CSS3 セレクタ チートシート
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。
本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。
2007年 記事一覧。(11 / 11 ページ)
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。
本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。
前回の続きです。今回が最終回、擬似要素を中心にまとめています。
擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。
今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。
CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。
ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。
昨年、ピクセル単位で広告スペースを販売するという手法を使い、5ヶ月で 100万ドルを稼いで話題になった 「Million Dollar Homepage」 を覚えていらっしゃる方は多いのではないでしょうか。
この Million Dollar Homepage と同じピクセル広告ページを作成するための PHP スクリプトとして公開されているのが、「GPix Pixel Ad Script」。PHPSPOT さんなどでも紹介されていました。
TRANS さんで、「日本語で日本語のCSS情報のみをGoogle Coopで検索する。」 と題して、日本語で日本語のCSSについての情報を検索する 「CSS Engine in Japan」 というカスタムサーチエンジンが公開されていたので紹介。
あと、紹介ついでに CSS Engine in Japan 内で 「Firefoxの検索プラグインに入れてみたい。」 と書かれていたので、おせっかいにも OpenSearch plugin 用の XML も簡単に作って公開してみます。
あけましておめでとうございます。新年最初のエントリーはプルダウンメニューで画面表示用、プリント用など、出力メディアタイプ別に CSS を簡単に切り替えられるスクリプトの紹介。元ネタは 「A List Apart」 から。