使えるのまとめ。

暇すぎるのでcssいじって遊んでます。僕が無知すぎるだけなのかもしれませんが、今になってこの属性便利すぎるじゃん、みたいなそういうやつ発見してきたので、それまとめときます。っていうのも、firefoxいれてから、IEとの表示の違いってやつが面白すぎてしかたないからなんです。なんておもしろいんだcss。

★★★「text-indent」こりゃ星三つですよ。まあ見ればわかるんですが、字下げできちゃうんです。僕はずっとこれがほしいと思ってました。実はずっと前からあったんですが、僕は知らなかったので、一文字目にスペースで空白を設けてがんばってました。これには1emとかそういう値を入れればいいんです。1emでちょうど一文字分下がります。ちなみに1emの意味知ってました？　emはひとつの文字の高さをあらわしているんだそうですよ。つまりM←これの縦の長さの分だけ字下げってことじゃないでしょうかね。あと似たようなものにexってありますが、それはひとつの文字の高さの半分だそうです。まあx←この高さってことですよ。そんなことも知らなかったのでなんか勉強になりました。この要素はIEでもMozillaでもいけました。

★★★「text-justify」文章打ってると、行の右端が行ごとにばらばらになっちゃって、いやーな気持ちになりませんか？　それを解決するのがこれですよ。文字の間をうまーく調整してくれるので、右端がきれいにそろいます。値はいろいろとあるんですが、日本語の文章ならinter-ideograph、英語の文章ならnewspaperを入力するといい感じです。ちなみにtext-alignにjustifyを指定しておかないとうまくいきません。僕は英語の教科書をみるたびに、なんでこんなに美しくまとまってるんだろうと思っていたんですが、それがこれなんです。等角フォントを指定すればいいとかあほなことはいわずにやってみてください。気分は最高です。

★★☆「:first-letter」これはA要素のうしろにつける:hoverみたいなノリのやつです。定義済みクラスとかなんとかいうあれ。文章の１文字目に関するセレクタです。雑誌を読んでいると、タイトル（HTMLでいうならH2的な）の一番初めの一文字だけサイズが大きくなったりしてる装飾を見かけることがありますが、それです。たとえばp:first-letter {color:red}って書けば、Pタグに囲まれた文章の１文字目が赤くなるんです。マジびっくりですよね。感動しまくって死にそうだったんですけど、mozillaではうまくいかなかったのでがっかりです。IEではちゃんと赤くなるんですけどね。やっぱmozillaでも表示されるものを使いたいと思うわけです。

★☆☆「:hover」誰もがA:hoverをはじめて書いたとき、きっと感動したことだろうと思います。僕はその:hoverはA要素専用のクラスなんだとずっと思っていたんですが、ためしにp要素にくっつけてみたら、なんと使えるじゃないですか！　普通の文章にマウスを重ねるだけで文字のサイズが変わったり色が変わったりするのには圧巻ですよ。なにこの虫眼鏡、と思いましたよ。んだけどIEで見てみたらやっぱりだめでしたわ。そりゃそうだ。むかしやったことあるもん。そのときできなかったもん。まあmozilla的にはいけるよ、って、それだけ。

とりあえずここまで。cssっていうのはまじめにやるとむずかしいんですなあ。