Lesson 05 属性セレクタを利用して効率よくスタイリング - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編​

Webデザイン 表現&技法の 新・スタンダード

Lesson 5

属性セレクタを利用して 効率よくスタイリング

	制作・文			平澤 隆（underHat）
＞	To Use			CSS
＞	Browser			IE 7over | Firefox 3over | Safari 4over

CSS2.1までに定義されている属性セレクタは、どれも完全一致のため、使い勝手があまりよくなかった。CSS3で追加予定の属性セレクタは、指定した属性の属性値が部分一致していればスタイルを適用できる。

属性セレクタとは、その名が示すとおり指定した属性と一致した場合にスタイルが適用される。これにより、class属性の指定があるp要素のみにスタイルを適用させたり、特定のリンク先にだけアイコンを付与したりといった指定が可能となる。CSS3までに定義予定の属性セレクタのパターンは【1-1】のようなものがある。


【1-1】属性セレクタのパターン。5～7の属性セレクタがCSS3で追加予定だ

E[foo^="bar"]の属性セレクタは、指定した属性の属性値が「前方一致」した場合に、指定した要素にスタイルを適用させることが可能だ。これにより、 たとえばhttp:// から始まる外部リンクにのみスタイルを適用させることができる。【2-1】【2-2】【2-3】。


【2-1】CSSソース。パスが http:// から始まる場合に、icon_gaibulink.gif が背景として表示される


【2-2】


【2-3】HTMLソース。外部リンクにだけスタイルが適用され、別窓用のアイコンが表示されている

また、クラス名の前方が同じ場合にベースとなるスタイルを適用させ、後方のクラス名によってスタイルを変更するという使い方も可能だ。この場合の指定は【3-1】【3-2】【3-3】のようになる。


【3-1】class名が focus- から始まるp要素にベースとなるスタイルが適用される


【3-2】HTMLでのマークアップ


【3-3】ベースとなるスタイルが適用された上で、個別のスタイルが適用されている

E[foo$="bar"]の属性セレクタは、指定した属性の属性値が「後方一致」した場合に、指定した要素にスタイルを適用させることが可能だ。これにより、リンク先がPDFやワードファイルなどの場合に、アイコンを表示させたりすることができる。 具体的な指定は【4-1】【4-2】【4-3】のようになる。


【4-1】CSSソース。リンク先ファイルの拡張子によってアイコンを変更している


【4-2】HTMLのマークアップ。ファイルの拡張子が違うリスト


【4-3】アイコンが表示される事で、どのファイルにリンクしてるかが視覚的に分かりやすくなる

E[foo*="bar"] の属性セレクタは、指定した属性の属性値が「部分一致」した場合に、指定した要素にスタイルを適用させることが可能だ。これにより、特定の ディレクトリ内のimg要素にだけスタイルを適用させるといったことが可能になる【5-1】【5-2】【5-3】。

ディレクトリによって適用されるスタイルを無理に変えなくとも、img要素に直接classを指定すれば済む問題ではあるが、CMS（コンテンツマネジメントシステム）などを利用している場合、更新する人にそのつどclass属性を付けてもらうと更新が手間になり、付け忘れなども生じてしまう。そこで、ディレクトリによってス タイルを変更すれば効率よく更新が行えるようになる。


【5-1】HTMLソース。絵文字用の画像、アップロードされた画像、共通画像など用途によってディレクトリを分けている


【5-2】upload_fileディレクトリにアップされたimg要素にのみボーダーを引いている


【5-3】/img/upload_file/ にアップした画像のみ、指定したスタイルが適用されている

CSS3 の対応状況が悪いInternetExplorerでも、属性セレクタに関してはInternet Explorer 7 から対応しており、Internet Explorer 6 がターゲットから外れていれば問題なく使えるので、現状でも実用性が高いといえるだろう。