coding tips

posted：2014.07.02

[html] 横並びナビゲーション

ulタグを用いた横並びナビゲーションの作り方を紹介します。

サンプルをダウンロード
from GitHub

ナビゲーションとは

Webページへのリンクをまとめたものをナビゲーションと呼び、そのなかでも主要コンテンツをまとめたものをグローバルナビゲーションと呼びます。

これらは往々にしてページ上部に横並びで配置されることが多いです。

ここでは横並びのナビゲーションの作成方法を順番に確認していきましょう。

li要素を横に並べる

liタグは通常縦に並んでゆきます。これを解除し、回り込ませることで横並びを実現します。

liタグにwidthとfloatを指定し、ボックスを横に並べる方法と同様のやり方でレイアウトします。

li要素を横に並べる
図1. li要素を横に並べる
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ulナビゲーション</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul id="navi01">
    <li>項目01</li>
    <li>項目02</li>
    <li>項目03</li>
    <li>項目04</li>
    <li>項目05</li>
  </ul>
</body>
</html>

@charset "UTF-8";

body {
  background-color: gray;
  margin: 0;
  font-size: 40px;
}

#navi01 {
  list-style: none; /* 行頭記号 */
  margin: 0;  /* 外側の余白 */
  padding: 0; /* 内側の余白 */
  background-color: red;
}

#navi01 li {
  background-color: blue;
  width: 150px;
  float: left; /* 回り込み */
}

文字列を上下中央に表示させる

ナビゲーションは通常のテキストと違い、ボタンのようにデザインされることが多くあります。そこで問題になるのが上下中央にテキストを配置する方法です。

vertical-alignが上下中央寄せをするための要素ですが、これはテーブルのセルであるth、tdタグで使われるものになります。

そこで、aタグのスタイルシートとしてdisplayにtable-cellを指定することで、セルと同様の動きをするように指定し、vertical-alignの設定が効くようにします。

文字列を上下中央に表示させる
図2. 文字列を上下中央に表示させる
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ulナビゲーション</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul id="navi01">
    <li><a href="#">項目01</a></li>
    <li><a href="#">項目02</a></li>
    <li><a href="#">項目03</a></li>
    <li><a href="#">項目04</a></li>
    <li><a href="#">項目05</a></li>
  </ul>
</body>
</html>

@charset "UTF-8";

body {
  background-color: gray;
  margin: 0;
  font-size: 20px;
}

#navi01 {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: red;
}

#navi01 li {
  background-color: blue;
  height: 60px;
  width: 150px;
  float: left;
  display: table; /* 表示形式 */
}

#navi01 li a {
  background-color: green;
  color: black; /* 文字色 */
  text-decoration: none;  /* 下線 */
  display: table-cell;  /* 表示形式 */
  text-align: center; /* テキスト横位置 */
  vertical-align: middle; /* 縦位置 */
}

マウスオーバー・クリック時の表示を設定する

ナビゲーションにマウスの挙動による表示切替を入れると、より操作感がでます。

たとえば、マウスカーソルが押下可能な領域に差し掛かると色が変わるようにすることです。

具体的には疑似クラス(:hover、:activeなど)を使って、そのデザインを制御することになります。

マウスオーバー・クリック時の表示
図3. マウスオーバー・クリック時の表示
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ulナビゲーション</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul id="navi01">
    <li><a href="#">項目01</a></li>
    <li><a href="#">項目02</a></li>
    <li><a href="#">項目03</a></li>
    <li><a href="#">項目04</a></li>
    <li><a href="#">項目05</a></li>
  </ul>
</body>
</html>

@charset "UTF-8";

body {
  background-color: gray;
  margin: 0;
  font-size: 20px;
}

#navi01 {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: red;
}

#navi01 li {
  background-color: blue;
  height: 60px;
  width: 150px;
  float: left;
  display: table;
}

#navi01 li a {
  background-color: green;
  color: black;
  text-decoration: none;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

/* マウスオーバー */
#navi01 li a:hover {
  background-color: yellow;
}

/* クリック時 */
#navi01 li a:active {
  background-color: purple;
}
動作確認環境