Webデザイン |
Lesson 5 | 属性セレクタを利用して 効率よくスタイリング |
制作・文 | 平澤 隆(underHat) | |||
> | To Use | CSS | ||
> | Browser | IE 7over | Firefox 3over | Safari 4over |
CSS2.1までに定義されている属性セレクタは、どれも完全一致のため、使い勝手があまりよくなかった。CSS3で追加予定の属性セレクタは、指定した属性の属性値が部分一致していればスタイルを適用できる。 |
01
【1-1】属性セレクタのパターン。5~7の属性セレクタがCSS3で追加予定だ
02
【2-1】CSSソース。パスが http:// から始まる場合に、icon_gaibulink.gif が背景として表示される
【2-2】
【2-3】HTMLソース。外部リンクにだけスタイルが適用され、別窓用のアイコンが表示されている
03
【3-1】class名が focus- から始まるp要素にベースとなるスタイルが適用される
【3-2】HTMLでのマークアップ
【3-3】ベースとなるスタイルが適用された上で、個別のスタイルが適用されている
04
【4-1】CSSソース。リンク先ファイルの拡張子によってアイコンを変更している
【4-2】HTMLのマークアップ。ファイルの拡張子が違うリスト
【4-3】アイコンが表示される事で、どのファイルにリンクしてるかが視覚的に分かりやすくなる
05
ディレクトリによって適用されるスタイルを無理に変えなくとも、img要素に直接classを指定すれば済む問題ではあるが、CMS(コンテンツマネジメントシステム)などを利用している場合、更新する人にそのつどclass属性を付けてもらうと更新が手間になり、付け忘れなども生じてしまう。そこで、ディレクトリによってス タイルを変更すれば効率よく更新が行えるようになる。
【5-1】HTMLソース。絵文字用の画像、アップロードされた画像、共通画像など用途によってディレクトリを分けている
【5-2】upload_fileディレクトリにアップされたimg要素にのみボーダーを引いている
【5-3】/img/upload_file/ にアップした画像のみ、指定したスタイルが適用されている