1. Home
  2. Archive
  3. CSSの隣接セレクタを使ってMacのDock風インターフェースを作成する

CSSの隣接セレクタを使ってMacのDock風インターフェースを作成する

CSSのセレクタって意外と多いんですよね。未対応ブラウザのことを考えると実際に使用するのはもう少し先のことになりそうなセレクタも多いんですが、ここらで一度実際に使ってみたいと思います。

今回は隣接セレクタを使ってMacのDock風インターフェースを作ってみることにしました。

元記事はLucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーションです。

この記事を見れば作る必要ないじゃんって感じなんですけど、何事も自分でやってみないと覚えないので実際作ってみました。FireFoxとIE7ではちゃんと動きました。IE6では動きません。他は動作確認してないです。

MacのDock風インターフェースのサンプル

<ul>
  <li><img src="icon1.png" alt="icon1"/></li>
  <li><img src="icon2.png" alt="icon2"/></li>
  <li><img src="icon3.png" alt="icon3"/></li>
  <li><img src="icon4.png" alt="icon4"/></li>
  <li><img src="icon5.png" alt="icon5"/></li>
  <li><img src="icon6.png" alt="icon6"/></li>
</ul>
img{
  border:none;
}

li {
  float:left;
  list-style:none;
}

li img {
  width:64px;
  height:64px;
}

li:hover img {
  width:128px;
  height:128px;
}

li:hover +li img {
  width:96px;
  height:96px;
}

li:hover +li +li img {
  width:80px;
  height:80px;
}

隣接セレクタは、ある要素の直後の兄弟要素を指定できます。このソースを例に挙げてみます。

li:hover +li img {
  width:96px;
  height:96px;
}

この場合、li:hoverの直後のli要素内のimg要素を指定していることになります。この例で言うとマウスオーバーした要素の一つ右の画像です。

li:hover +li +li img {
  width:80px;
  height:80px;
}

これだとli:hoverの直後のli要素の直後のli要素なので2つとなりのli要素内のimg要素を指定しています。一つ前の要素とかもしてできればもっとDock風になるんですけど、現在はこれが限界のようです。

こういった便利なセレクタがブラウザ依存を気にせず使えるようになるとコーディングもしやすくなりそうですね。ちなみにCSSのセレクタのまとめは下記サイトなどがうまくまとめられています。

トラックバックURL

http://webtech-walker.com/archive/2007/04/24211027.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

コメントフォーム

※HTMLタグは使用できません。