履歴もしくは日誌

「はてなリング」のロゴ画像でかい補足: CSS での子どもセレクタと子孫セレクタについて

「はてなリング」のロゴの画像を 40 ピクセル幅にしてしまおうって書いたら，突っ込みが．いや，書いているときから Internet Explorer ぢゃうまくいかないかもって思っていたのですが，やっぱりうまく行かないのな．なぜなら，Internet Explorer が CSS の子どもセレクタに対応していないらしいのです．

前提として class 名が hatenaring である要素で，「はてなリング」へのリンクロゴを貼付けの部分を囲みます:

<div class="hatenaring">
   <script type="text/javascript"
     src="http://ring.hatena.ne.jp/showlogo?rid=cycring&amp;sid=1848">
   </script>
   <noscript>
   <a href="http://cycring.ring.hatena.ne.jp/go?type=random&amp;sid=1848">random</a>
   <a href="http://cycring.ring.hatena.ne.jp/">Hatena Ring cycring</a>
   </noscript>
</div>

.hatenaring > div > img {
   width: 40px;
}

訂正:子どもセレクタの記号は < でなくて > でした．

子どもセレクタを使ったこの指定は，hatenaring というクラス名の要素の子ども要素の div の子供要素の img は幅が 40 ピクセルっていう指定です．

Internet Explorer はこれが解釈できず無視します．

.hatenaring div img {
   width: 40px;
}

この子孫セレクタを使った指定だと hatenaring というクラス名の要素で中の全ての div 要素 (子孫) の中の，そのまた全ての img 要素 (子孫) が対象です．Internet Explorer もこっちは解釈します．

でもね，こっちだと「はてなリング」の場合は狙っている画像以外の，ロゴ画像をクリックした時に表示されるナビゲーションの為のロゴも大きさが変わっちゃいます．

.hatenaring div img {
   width: 40px;
}

.hatenaring div * img {
   width: 14px;
}

こうすれば Internet Explorer でも，ロゴは 40 ピクセル幅，ナビゲーションのアイコンは 14 ピクセル幅で表示すると思います．

この Internet Explorer が子供セレクタを解釈できない問題の回避策は以下のサイトにありました：

• Lucky bag::blog: IE でも擬似的に子供セレクタ
  http://www.lucky-bag.com/archives/2005/06/simulate_child.html

下で紹介するのは，個々の「はてなリング」の ID を利用して，それぞれ個別に CSS を設定するっていう戦略:

• はてなリングのアイコンがでかすぎる件 - HsbtDiary (2005-11-10)
  http://www.hsbt.org/diary/20051110.html#p01

ぼくは Safari とか Firefox などのターゲットとしている Web ブラウザではそれなりに表示できて，Internet Explorer といったターゲットではない Web ブラウザでも多少違った表示がされても可読であれば問題無しって思っていますんで，Internet Explorer への対策はしないかも．

Trackback URI http://onohiroki.cycling.jp/tb/tb.cgi/weblog_d20051110n1 TrackBack