Home > P.276

P.276

  • Last Modified: 2008年11月29日 17:07

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説 (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

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/103
Listed below are links to weblogs that reference
P.276 from lh3.jp

Home > P.276

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top