Sencha Ext JS / Sencha Touch プロフェッショナルプログラミングガイド
CSSの基本とCSSセレクター
CSSの基本とCSSセレクターについて
CSSはご存じでしょうか？CSS(Cascading Style Sheet)は、いまや当たり前に使われるようになりました。このCSSは、ビジュアル的な部分を定義するために存在します。
では、このカスケーディングと呼ばれる理由は何でしょうか。「階段状になった滝」という意味らしいです。これじゃピンとこないかもしれません。
記述方法が、連なっていてそれぞれが階層を意味しているといえばわかりやすいでしょうか。既にCSSを日々使われている方からするとごく当たり前のことかもしれません。
それでは、CSSセレクタはご存じでしょうか。意外と言葉自体を知らない方は多いようです。私もその1人でした。
ここでは、CSSセレクタをExt JSを使いながらみていきます。今回はW3C CSS3 SelectorsとExt JSのAPI Documentationをベースに解説します。
先に簡単にCSSセレクタについて確認しておきます。CSSセレクタとは、CSSでドキュメント内のDOMエレメント（HTMLエレメント：以下DOMエレメント）を特定する手段を指します。
つまり、デザイナの方が日々CSS で色をつけたり背景を指定したりしている記述そのものがCSSセレクタです。ドキュメントの中に存在するタグ（DOMエレメント／HTMLエレメント）を指定した条件で絞り込み、該当するタグに対してデザイン設定を行うというのが通常のCSSのデザイン作業になります。
Ext JSでは、このCSSセレクタを使ってDOMエレメントを取得し操作することが可能です。この方式を知っているのと知らないのでは、コーディング量が大幅に変動しますので、初期の段階でしっかり押さえておくことをおすすめします。
まず、セレクタの種類を確認し、それからExt JSでどのように扱うかについて触れたいと思います。CSSセレクタは、大きく分けて4つに分類することができます。
以下の確認コードは、基本的にFireFox 3.0で動作確認していますが、FireFox 3.0が対応していないものでSafariなどを利用する場合があります。Safariなど他のブラウザで確認しなければならないものについては、都度記載します。
また、ブラウザの進化も早く、CSS3もドンドン対応していっています。
そのうち、動くようになるかもね（笑
エレメントセレクタ
*
俗に、ユニバーサルセレクタと呼ばれるものです。全てのDOMエレメントを指します。また、次のように間にいることで、*部分のDOMエレメントは全てのDOMエレメントを指します。
|
1 2 3 |
<span style="color:#000099;">div</span>#<span style="color:#000099;">foo</span> * <span style="color:#000099;">a</span> { <span style="color:#000099;">font-weight</span>: <span style="color:#000099;">bold</span>; } |
上記の例では、divのIDがfooの下にあるあらゆるDOMエレメントの下にあるAタグに対してCSSを適用しています。HTMLとしては、次のコード内の太字のAタグが適用されます。
|
1 2 3 4 5 6 7 8 9 10 |
<span style="color:#0000FF;"><div <span style="color:#000000;">id=</span><span style="color:#009900;">"foo"</span>></span> <span style="color:#0000FF;"><p></span> <strong><span style="color:#0000FF;"><a <span style="color:#000000;">href=</span><span style="color:#009900;">"http://www.xenophy.com"</span>></span>株式会社ゼノフィ<span style="color:#0000FF;"></a></span></strong> <span style="color:#0000FF;"></p></span> <span style="color:#0000FF;"><span></span> <strong><span style="color:#0000FF;"><a <span style="color:#000000;">href=</span><span style="color:#009900;">"http://www.xenophy.com"</span>></span>株式会社ゼノフィ<span style="color:#0000FF;"></a></span></strong> <span style="color:#0000FF;"></span></span> <span style="color:#0000FF;"><a <span style="color:#000000;">href=</span><span style="color:#009900;">"http://www.google.com/"</span>></span>Google<span style="color:#0000FF;"></a></span> <span style="color:#0000FF;"></div></span> |
E
Eは、DOMエレメントの略です。こういう書き方をされるとちょっとわかりづらいと思いますが、たくさん出てくるので覚えていきましょう。
具体的には、次のような普段よく使われているようなコードになります。
|
1 2 3 |
<span style="color:#000099;">h1</span> { <span style="color:#000099;">font-size</span>:<span style="color:#009900;">18px</span>; } |
HTMLは次の通りです。
|
1 |
<span style="color:#0000FF;"><h1></span>Sencha Ext JS / Sencha Touch プロフェッショナルプログラミングガイド<span style="color:#0000FF;"></h1></span> |
DOMエレメントの種類を記述すると、該当のDOMエレメントに対して指定したCSSができるという例です。ここでは、h1タグ内の文字サイズを18pxに設定しました。
E F
先ほどの、E=Elementの略ですといいましたが、Fは単純にEの次なんで・・・。EとFの間には半角スペースが入っています。
これは、DOMエレメントのネスト構造を指定してCSSを設定することができるということです。
|
1 2 3 |
<span style="color:#000099;">ul</span> <span style="color:#000099;">li</span> <span style="color:#000099;">a</span> { <span style="color:#000099;">font-size</span>:<span style="color:#009900;">24px</span>; } |
ULタグの下のLIタグのさらに下のAタグに対してCSSを適用します。
HTML は次の通りです。
|
1 2 3 4 5 |
<span style="color:#0000FF;"><ul></span> <span style="color:#0000FF;"><li></span> <span style="color:#0000FF;"><a <span style="color:#000000;">href=</span><span style="color:#009900;">"http://www.extjs.com/"</span>></span>Ext JS<span style="color:#0000FF;"></a></span> <span style="color:#0000FF;"></li></span> <span style="color:#0000FF;"></ul></span> |
また、次のように記述することもできます。
|
1 2 3 |
<span style="color:#000099;">ul</span> <span style="color:#000099;">a</span> { <span style="color:#000099;">font-size</span>:<span style="color:#009900;">24px</span>; } |
LIタグの指定が消えました。しかしCSSは適用されます。これは、正確なネスト構造の順番を記述する必要はなく、指定したいDOMエレメントのネスト構造が定義できていれば、CSSセレクタは正常にDOMエレメントを特定します。
執筆なう
目次へ戻る
