CSS の 擬似要素 :after と :before
CSS に :after と :before という擬似要素があります。 名前の通り、擬似的に要素を作ってくれるのですが その応用範囲は広すぎるので、 簡単に「これまではできなかった例」で、紹介します。
次のように <li> タグの :before に “【”を、 :after に “】”を content 属性として指定します。
li:before {
content : "【"
}
li:after {
content : "】"
}
あとは次のように普通にリストを作成します。
<ol> <li>起</li> <li>承</li> <li>転</li> <li>結</li> </ol>
次のような結果になります。
対応していないブラウザもあるので、画像で表示しています。
このように“【】”で囲むことができました。
デザインを CSS だけで定義したくても どうしてもデザインのためのタグを書かなければならないときがあります。
例えば、前回の「吹き出し」も、尖った部分を作るには 次のように、メッセージ部分と別のタグを書く必要がありました。
<div class="balloon"> <p>メッセージ部分</p> <div class="arrow">↓</div> </ol>
多くのブラウザで擬似要素がサポートされれば、 デザインのための要素を書くことはグッと減るはずです。 当然 IE6 も・・・。
積ん読 2009/11/16
- [CSS]簡単にCSS3の新しいプロパティを楽しめるチュートリアル - コリス (2009/09/18)
- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 - phpspot開発日誌 (2009/10/23)
- Google App Engine/Paste用Pythonフレームワーク「Pyxer」 - MOONGIFT (2009/11/10)
- 初心者にもお勧めのスクリプト言語“Perl”向け統合開発環境「Padre」 - 窓の杜 (2009/11/12)
- 各種ブラウザでの互換性を検証できる編集ツール「Pirka'r」，IPAがOSSとして正式公開 - ITpro (2009/09/30)
- Ajaxに力を入れ始めたマイクロソフト、今度はJavaScript圧縮ツールを無料公開 - Publickey (2009/10/17)
