どーもー。仕事の備忘録的な為に作ったブログなのにコンプライアンス的な事ばっか気になってあんまりかける事がないよ！！大人って大変だよね〜。気にしなきゃ行けないことまみれだよ。でもそろそろ気にするのも心の底からめんどくさくなってきたので、くだらない事からちまりちまりと書いてきます。書き続けられるか...は、ミス三日以下坊主なのであんま期待しないでください。内容も。

さーてさて、なんか右の図みたいに、※（米印）だけがこう、左にはみ出てて、それ以下の文章が右にインデントされてたり、しますよね。デザインする側的にはつい、こういったちまい処理したくなっちゃうんだけど、このちまいのが以外とめんどくさかったり、あるよね。私だけじゃないよね、この気持ち！！

以下、続きからこの地味なやつの対処法。

その１：咄嗟に考えつくのは改行して全角スペースを入れるってやつ。

まー、ダメとは言わんさ。スペースでも。
だけんどもさ、見た目としては保証されたかもしれないけど文章としては不可思議な所にスペースが来る訳で。
「ちょっと！文章として成り立ってないわよ！ｷｰｰｰ!」と万が一怒られてしまっても何も言い訳出来ない。
すみません、ちょっと出来心で...と言うしかない。
それにCMSとか入ってて編集する度にスペースの位置考えて入力するのもめんどいし、なにより文章としてこれはあかん。
ブラウザや人の設定によってもスペースの解釈って違うしね。

その２：じゃあ、※を画像にして配置してみる？

うん、スペースよりも（個人的には）有効な手だと思う。
これならCMSでの入力だってへっちゃらだし、文章中に変なスペース入れる必要だってない。
ない...けど...。
文字サイズ、大きくしたり小さくしたりしたら、画像だとバレてしまうやん？いや、バレても良いんだけどさ、いいんだけどさ！！
それに、私はMacなので良いけどアンチエイリアスの効いてない（もしくはその逆もあり）windowsとかで見たら画像だとバレてしまうやん？いや、バ（ry
とにかく、なんか、こう...頑張ってマークアップとかしてて、この部分だけ負けた気分になるというか...俺はこんなちっぽけな※粒に負けたのか...ってなる。

その3：マイナスインデントしてみようか！

前置きなげーーーよ！やっと本題です。スマンかった！正直スマンかった。
とにかく、最近の私はこの方法でやってます。※のヤツをぎったんぎったんにしてやってます。
　∧＿∧
　(　･ω･)＝つ≡つ
　(っ　≡つ＝つ
　/　　　) ﾊﾞﾊﾞﾊﾞﾊﾞ
　( /￣∪

まずは、HTML。すごく...普通

<p>※注意！この辺りにはクマが出没します。そう言ってる間にも奴らが息を潜めてこちらの様子を伺ってうわなにするやめ...</p>

次はCSS。

 p{
 	text-indent: -1em;
 	margin-left: 1em;
 	}

まずは※分をマイナスインデントで左に。
text-indentは本来、文章の始めを一マスインデント（スペース）させる時とかに使います。
webにはあまりなじみのない文中のインデントですが、紙モノのエディトリアルの方とかに文章もらったりすると、よく文頭にスペースでインデントが入ってたりします。
余談ですが、知り合いの文章書きな方曰く、このインデントは非常に重要だそうです、文章界では。。。

で、戻りますがtext-indentで文頭をマイナスで一文字分左に動かしちゃいます。
そうすると※だけ本来の<p>のボックスからピョコロっとはみ出ると思います。ピョロンと。
で、基本的にこの処理をするボックス（この場合は<p>）に固定幅が与えられていない事が前提だったりするんですが、
最後にこのピョロっとボックスからはみ出た※分をmargin-leftでマイナスインデントした分だけずらします。こんだけ！

※もマークですが、文中において飾り要素ではなく意味があるものなので、
文章の一部としてあった方がいいんじゃないかなーどうかなーといった感じです。

とにかく、最近の私はこういう※注が来たときは、こういう方法で料理してやってますぐえへへ

おわり

先日「くいしんぼっと」という名前の、いかにもふざけたTwitter botを作ってみました。プログラマでもない私がbotを作るだなんて、プログラミングに興味がわいたのかと言われればそういう訳でもなく。
ゲンミツに言えば"興味"こそあれど、私の脳みそではどうやらお話にならない（根っからの文系脳）様で、学生の時のActionScriptの授業も四苦八苦でした。

今回は、そんなbotの（リリースの）おはなし。
ちなみに→のうさぎはもちろん「うさしまる」です。

おかげさまで、おもいっくそ文系脳な私にでも作れちゃったんだから本当にありがたい。まあ、さすがにcronの設定には悩まされましたが。。。

ちなみにくいしんぼっととは、Twitterで@kuishin_bot 宛にリプライをするとメニューをつぶやき返してくれるbotです。
それにプラスして『朝・昼・夜（もしくは夕）デザート』の言葉に反応して、それぞれのメニューを返します。ランダムに返すので、何を返すかは私もわからないです。

ちなみにとても謎なのが、正規表現で→[夕夜]と書いたのになぜか「晩」という言葉にも反応すると言う事...。わからん。。。まあ、晩御飯っていう言い方もあるので反応してくれるのはありがたいんだけど...謎。なぞ。
だれかおしえて！！

まあ、詳しい事はくいしんぼっとのサイトで〜。

余談ですが、きっかけはなんとなくだったものの、使ってくれた皆さんに「便利」とか「たのしい」とか言ってもらえるのってなんだか嬉しいですね！
自分的にはこいつが"使えるヤツ"だとは思ってもみなかったのですが、いざ運用してみると意外と「使える」と言ってくれる方が多い。ありがたや。
おかげさまでtwinaviさんにもお役立ち／便利系として登録していただきました！

うれしいねぇ〜。あそんでくださって、本当にありがとうございます。

backgroundで画像を指定するんですが、フツウにonMouse前と後の画像をそれぞれ用意して指定すると、onMouseした時にこう「チカッ」と一瞬消えるの。アレ、地味なんだけど結構気になる。

原因は、onMouseした時に画像を読み込み始めるのでそのタイムロス？でチカッとなる。みたい。

ということで、チカッとしない方法。
結構既にもうやっている人多いんだけど、自分めも用な感じで！

まず、onMouseする画像はこんな感じにつくります。onMouse前と後の画像をピッタリ上下くっつけて一つの画像にします。ココではわかりやすい様に"縦100px横250px"です。ちなみに一つ分は"縦50px横250px"です。

まずはサンプルページ。

以下ソースの簡単な解説。

a{
	display: block;
	width: 250px;
	height: 50px;
	background: url(sample_logo.gif) no-repeat top left;
	text-indent: -400000px;
	}

まずはaタグをinline要素からblock要素に。これで縦横指定が効いたりします。
そして、くっつける前の一つ分の画像のサイズを縦横指定（この場合は"縦50px横250px"）。
backgroundで画像を読み込み、text-indentをマイナス指定して、とんでもなく左方向へ吹っ飛んでいただきます。

これで下準備はOK！次は:hoverした時の画像切り替えです。

a:hover{
	background-position: 0 -50px;
	}

先にaタグに必要な指示（blockとか）はしたので、後はbackground-positionでonMouse時にずらすだけです。
この場合はonMouse前と後の画像が縦に並んでいるので、縦方向だけにズラしたいです。のでので！横方向は0を指定。縦方向は上にズラしたいので、マイナス画像の高さ分の数値を指定して上げます。
この場合は、一つの表示領域が高さ50pxなので、-50pxを指定してます。

これで、大丈夫なんじゃないでしょうか。。。

もう2年くらい前？にとあるサイトのコーディングをしなきゃならなくて、それが右のサイドナビゲーションにfixedをつかった2カラムレイアウトだった。
当時、fixedがIEにはそのままじゃ効かない！って事を知ってる程度だった私は勿論、position: fixed;なんて使った事がなかった。
「私になんて無理だよー！！」って思いつつも「挑戦してみたい」ってキモチが高くて、躍起になって頑張った記憶があります。。。なつかしい。

ということで、続きから覚え書きとサンプルコード。

というか、webの学校に入るまでは自分は紙の仕事をしたいと思っていたし、正直webには然程興味がなかった。多分間違って学校入学しちゃったんだと思う。
当時の私と言えば、ウッカリ「ソースコードを表示」を押してしまって、画面いっぱいのソースコードが出たときは「ウイルスだぁぁああ！！！」と叫んだりした事もあった。

そんな状態からwu先生にHTMLの基礎を教わった私は、勿論"frame"も"tableレイアウト"も知らなかった。なにそれおいしいの？状態ってやつです。

前置きが長くなったけど、どのみちframeを使えなかったし、意地でもやりたくなかった。
苦肉の策でIE用のCSSとか使ってるけど。

詳しくはサンプルページのHTML内にCSSがぶっ込んであるのでそちらご参照くだせえ。

#main{
	width:420px;
	margin-left: 30px;
	}
#side{
	position: fixed;
	top: 0px;
	left: 460px;
	width:330px;
	height: 100%;
	}
.bottom{
	position: absolute;
	bottom: 0;
	}
body{
	background: url(null) fixed;
	height: 100%;
	}

#sideの中にある.bottomをposition: absolute;で下合わせにして、#sideの領域を常に下まで延ばしています。

それで、IE7でうまく動く様にコイツをいれました。

<!--[if lt IE 7]>
<style type="text/css">
 #side{
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+0));
  left: 460px;
 }
 body {
  background: url(null) fixed;
 }
</style>
<![endif]-->

そんなかんじで、こんな感じです。