CSS3で作るナビゲーション

2011年11月17日(木)
宮本 麻矢(著)山田 祥寛(監修)

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で作るナビゲーション」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています