PR

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 {
  ~ホバー時、アクティブ時、現在位置を示すスタイル~
}
Think IT会員限定特典
  • 「CSS3で作るナビゲーション」サンプルプログラム

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

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

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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