P.276

解説 (1)

div#globalNavi の背景に画像を読み込ませ、見かけ上、 div#header 内の右下を埋める角丸を表現します。

次に、 ul#globalNavi 内の li 要素をフロートさせてタブ型のナビゲーションにします（ 158 ページの「横並びのタブ型ナビゲーション」を参照）

CSS(1)

div#header ul#globalNavi {
  margin: 0 8px;
  padding: 5px 0 0 0;
  width: 800px;
  background: #ccc url(img/bg_gNavi.gif) right top no-repeat;
}

div#header ul#globalNavi:after {
  /* after擬似要素による子ボックスのフロートのクリア */
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

div#header ul#globalNavi li {
  float: left; /* 左寄せ */
  width: 151px;
  list-style-type: none;
  text-align: center; /* li内のテキストを中央揃え */
}

解説 (2)

ul#globalNavi 内の a 要素に display: block を指定し、ブロックボックス化した上で背景画像を読み込ませてボタンのように表現します。

background-position プロパティを利用し、リンクの通常状態とマウスカーソルが上に重なった状態で背景画像の位置を切り替えます（ 348 ページの「 09/ 背景画像を利用したロールオーバー効果」を参照）。

CSS(2)

/* タブの切り替え */

div#header ul#globalNavi li a {
  padding: 12px 0 15px 0;
  border: none;
  display: block; /* ブロックボックス化 */
  line-height: 1;
  position: relative; /* IE 6対応（マウス反応範囲が広がらないバグの対処）*/
  color: #666;
  background: #ccc url(img/tab_gNavi.gif) no-repeat;
  text-decoration: none;
}

/* オンマウス時 */
div#header ul#globalNavi li a:hover {
  color: #000;
  background-position: -151px 0; /* 背景画像の表示開始位置を左にずらす */
}

解説 (3)

サンプルでは、現在表示しているページを示すために、 ul#global 内のli 要素に current というクラスがつけられています。

XHTML

<ul id="globalNavi">
  <li class="current"><a href="./">Home</a></li>
  <li><a href="./">About</a></li>
  <li><a href="./">Archives</a></li>
  <li><a href="./">Bookmarks</a></li>
</ul>

解説 (4)

表示されているページを視覚的に表現するため、 li 要素に current クラスがつけられたときにタブの背景画像を切り替える処理を加えます。

CSS(3)

div#header ul#globalNavi li.current a {
  color: #000;
  background-color: #fff;
  background-position: -302px 0; /* 背景画像の表示開始位置を左にずらす */
}

Download

• 6-2-9.css
• 6-2-9.html