nlog(n): 画像のインラインスタイルをスタイルシートへ移す

Thu April 21, 2005

画像のインラインスタイルをスタイルシートへ移す

このサイトでは，タイトル部分にカテゴリアイコンを表示している。これまで，このアイコン画像の枠線を消すのにインラインスタイルを使っていたが，これをスタイルシートに移して同様の効果を得るようにする。

■ ■ ■

このサイトでは，各記事のタイトル部分にカテゴリを示す画像を表示して，カテゴリアイコンとして使用している(nlog(n): カテゴリ表示のアイコンをつけるには)。画像には「枠線なし，右寄せ」のスタイルをつけている。これまでは，この画像スタイルを img タグ中のインラインスタイルとして style="border: none; float: right;" として指定していた。テンプレートでは次のようになっている。

<div class="title">
<MTEntryCategories>
<a href="<$MTCategoryArchiveLink$>"><img src="/mticons/<$MTCategoryLabel$>.gif" width="80" height="15" alt="<$MTCategoryLabel$>" style="border: none; float: right;" /></a>
</MTEntryCategories>
<$MTEntryTitle$>
</div>

この方法は XHTML 1.0 の文法としては正しいが，「文書の論理構造と表現を分離する」というスタイルシートの考え方からすると，好ましいとは言えない。文書の中に表現が埋め込まれてしまっているからである。そこで，画像のインラインスタイルを削除してスタイルシートに追加することにした。

スタイルシートには，次を追加する。

.title img {
   border: none;
   float: right;
   width: 80px;
   height: 15px;
   }

この意味は，「title というクラス名がついた要素に囲まれた img 要素に対して，括弧 {} の中のスタイルを適用する」ということになる。つまり，<div class="title"> ... <img /> ... </div> となっている部分の img だけに適用されることになる。これよりももっと限定して，「title というクラス名がついた div 要素に囲まれた img 要素」に対して適用したければ，「.title img」の代わりに「div.title img」とすればよい。

こうしておけば，img タグからは style 属性を削除してよいことになる。表示はもとのものと同じになる。

これですっきり。実は，今までインラインスタイルを使っていたのは，スタイルシートのセレクタがどのようにパターンマッチするのかが理解できていなかった，というオチだったりする。

セレクタと，それにマッチする要素について簡単にまとめておく。

セレクタ	対応する要素
div#banner a	<div id="banner"><a ...>...</a></div>
div.date a	<div class="date"><a ...>...</a></div>
img	<img ... />
img.thumbnail	<img class="thumbnail" ... />
.thumbnail	<... class="thumbnail" ...>

Posted by n at 2005-04-21 23:12 | Edit | Comments (0) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments