CSS3で作るナビゲーション
CSS3で作るタブメニュー
今回は、前回のWEBパーツに続き、これまで紹介してきたCSS3の機能を使ってナビゲーションパーツを作成してみましょう。まずは、図 1のような、タブ型ナビゲーションの作り方を紹介します。タブ画像を並べたようなデザインですが、テキストはWebフォント、グラデーションはlinear-gradient、角丸はborder-radiusで指定し、CSSだけで実装したサンプルになります。
|
|
| 図1：タブ型ナビゲーション（クリックで拡大） |
HTMLは以下のようになります。
［リスト01］HTMLソース（tab01.html）
<head> ～中略～ <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="css/tab.css" /> </head> <body class="tab01"> <ul id="nav"> <li><a href="tab01.html">Tab01</a></li> <li><a href="tab02.html">Tab02</a></li> <li><a href="tab03.html">Tab03</a></li> </ul>
head内で指定している外部参照のCSSファイルは、GoogleWebFonts（http://www.google.com/webfonts）で提供されているWebフォント（Terminal Dosisの極太）を使用するためのものです。
ナビゲーションで現在位置を表現できるよう、body要素にはclass属性でCSSシグネチャを付けています。ナビゲーションはul要素でマークアップし、navというID名を付けています。HTML5でマークアップしていますが、現状では新要素を認識しないブラウザもあるため、ここではナビゲーションのための新要素「nav」は使用していません。
共通のスタイルを指定する
まずは、スタイリングしやすいように、ul要素やli要素のデフォルトスタイルをリセットしておきましょう。margin、paddingを0に、リストマーカーも不要なのでlist-style-typeプロパティを指定します。続いて、floatプロパティを指定して横並びに配置し、font-familyプロパティでWebフォントを適用します。
［リスト02］CSSソース（tab.css）
#nav {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav li {
margin: 0;
padding: 0;
float: left;
font-family: 'Terminal Dosis', sans-serif;
}
a要素には、カーソルホバー時と通常時に共通したスタイルを指定しておきましょう。幅を指定できるように、displayプロパティでブロックレベル表示にするのがポイントです。
［リスト03］CSSソース（tab.css）
#nav li a {
display: block; /* ブロックレベル表示に */
width: 150px; /* 幅を150pxで固定 */
margin-right: 1px; /* 右側に1pxのマージン */
text-align: center; /* テキストを中央揃え */
text-decoration: none; /* 下線を表示しない */
border-radius: 10px 10px 0 0; /* 角丸 */
}
これでリンクテキストの共通部分のスタイル指定ができました。
通常時のスタイルを指定する
続いて、通常時のリンクスタイルを指定しましょう。通常時は、背景がグリーンのグラデーションです。各ブラウザ用にグラデーションの指定が複数個あります。自分で書くと大変そうですが、以前紹介したCSS3ジェネレーター（http://css3generator.com/）を利用すれば、IEを含むほとんどのブラウザに対応したコードを自動生成してくれます。
［リスト04］CSSソース（tab.css）
#nav li a:link,
#nav li a:visited {
～中略～
background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}
さらにグラフィカルになるよう、背景色に合わせた暗めのグリーン（#669933）を、borderやtext-shadowに指定します。
［リスト05］CSSソース（tab.css）
#nav li a:link,
#nav li a:visited {
～中略～
border: 1px #669933 solid;
text-shadow: 1px 1px 3px #669933;
}
ホバー時、アクティブ時のスタイルを指定する
同様にホバー時、アクティブ時のスタイルを指定します。背景をオレンジのグラデーションにし、borderとtext-shadowに濃い目のオレンジ（#ff9900）を指定します。
［リスト06］CSSソース（tab.css）
#nav li a:hover,
#nav li a:active {
～中略～
background: #ffc578; /* Old browsers */
background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* IE10+ */
background: linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
border: 1px #ff9900 solid;
text-shadow: 1px 1px 3px #ff9900;
}
transitionでアニメーションを指定
最後に、ホバー時に拡大表示されるよう、図2のようにマージンとパディングの値を指定します。また、transition-durationプロパティで、通常時からホバー時へのスタイルが0.3秒で変化するように指定します。
|
|
| 図2：マージンとパディングの指定（クリックで拡大） |
［リスト07］CSSソース（tab.css）
#nav li a:link,
#nav li a:visited {
～中略～
margin-top: 10px;
padding: 10px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#nav li a:hover,
#nav li a:active {
～中略～
margin-top: 0;
padding: 15px 0;
}
ナビゲーションで現在位置を示す
ナビゲーションメニューで現在位置を示す表現として、ホバー時、アクティブ時と同じスタイルを適用することにしましょう。ここでは、body要素に付けたCSSシグネチャとnth-child()で、現在位置のセレクタを指定しています。例えば、body class="tab01"のページの場合、ul#navの1番目の子要素liが、現在のカテゴリになります。
これまではそれぞれのli要素に「class="nav01"」や「class="nav02"」といったクラス名を付け、「.tab01 #nav li.nav01」というようなセレクタで制御するのが一般的でした。しかしCSS3を使えば、「.tab01 #nav li:nth-child(1)」というセレクタで「Tab01」のスタイルを制御でき、li要素に付けるクラス名は不要になります。
［リスト08］CSSソース（tab.css）
#nav li a:hover,
#nav li a:active,
.tab01 #nav li:nth-child(1) a,
.tab02 #nav li:nth-child(2) a,
.tab03 #nav li:nth-child(3) a {
～ホバー時、アクティブ時、現在位置を示すスタイル～
}
「CSS3で作るナビゲーション」サンプルプログラム
