【HTML/CSS】グローバルナビの作り方を解説！実際のコードもあります

今回はHTML/CSSを使ってグローバルナビの作り方を解説していきます。

Webサイトを作る際に必ず実装する部分ですが、なんとなく作るのではなく、しっかりと内容を理解して作成することでユーザーや読み込む機械にもわかりやすい実装ができます。

細かいところですが理解を深めていきましょう。

グローバルナビとは
nav要素について
- セクショニングコンテンツとは
- nav要素の使い方
グローバルナビのCSSのポイント
- ul、olタグの左側にはデフォルトで余白がある
- ボックスの端をクリックしてもリンク先に飛ぶか
実際のコード
- HTML
- CSS
実際のコード（中央寄せ）
- HTML
- CSS
まとめ

グローバルナビとは

グローバルナビ（グローバルナビゲーション）とは、Webサイトの全てのページに共通して設置された案内リンクのことです。

Webサイトの主要なページをリンクにすることで、サイト自体の内容をざっくりと把握することができ、現在のページから見たいページへ簡単にアクセスすることができます。

また、グローバルナビの主要な項目ではなくても、副項目としてページがある場合は項目ごとに分けることが多いため、関連するページをわかりやすくすることができます。

nav要素について

グローバルナビを実装する際に、nav要素を使用します。

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
4.4.3 The nav element — HTML5: Edition for Web Authors

nav要素の説明文です。

「nav要素は、他のページやページ内の部品にリンクするページのセクション、つまりナビゲーションリンクを持つセクションを表します。」

翻訳するとこのようになります。

nav要素は主要なナビゲーションのセクションを表し、サイト内で最も重要なナビゲーション1つに使用します（ほとんどの場合はheader内のグローバルナビ）。

このnav要素を使用することで、検索エンジンにも「ここはナビゲーションですよ」と伝えることができます。

また、nav要素はセクショニングコンテンツに該当します。

セクショニングコンテンツとは・・・となりますよね？

少し深掘りしてみましょう。

セクショニングコンテンツとは

セクショニングコンテンツはこのように説明されています。

Sectioning content is content that defines the scope of headings and footers.

article

aside

nav

section

Each sectioning content element potentially has a heading and an outline.
3.2.5 Content models — HTML5: Edition for Web Authors

翻訳すると、

「セクショニングコンテンツとは、見出しやフッターの範囲を定義するコンテンツです。」
「各セクショニングコンテンツ要素は、潜在的に見出しとアウトラインを持ちます。」

上記のようなことが書かれています。

簡単にいうと、「セクショニングコンテンツは一つの括りのようなもので、その中に見出しと階層構造を持つ」という感じでしょうか。

nav要素の使い方

基本的にセクショニングコンテンツは見出しタグが必要ですが、aside要素とnav要素は見出しタグの省略が可能です。

このように記述します。

<nav>
   <ul>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/service">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
   </ul>
</nav>

グローバルナビのCSSのポイント

グローバルナビを実装する際にCSSで気をつけるポイントを紹介します。

ul、olタグの左側にはデフォルトで余白がある

ulタグ、 olタグを使用するとデフォルトで左側に40pxのpaddingがつきます。

私が初心者の頃はこのpaddingが何か分からず、苦戦した思い出があります。

デフォルトでついているリストのマーカー部分のためにpaddingとしてついてきますが、list-styleにnoneを指定する際にこのpaddingも忘れずに「0」にしておきましょう。

ボックスの端をクリックしてもリンク先に飛ぶか

グローバルナビのリンクを押す時、文字の上はもちろんですがその周辺を押すこともありますよね。

リンクとして押せる範囲を考えていない実装だと下の画像のようにリンクの押せる範囲が文字の上だけになってしまいます。

リンクとして押せる範囲を考えた実装をすることで、縦横いっぱいにリンクを押せる範囲が広がり、ユーザーも押しやすくなります。

実装の方法は、liタグの横幅を指定し、中にあるaタグに「display: block」を指定することです。

詳しくは実際のコードを参考にしてください。

実際のコード

実際に実装したデモはこちらです。

わかりやすいようにカーソルを乗せたらリンクのボックスの色が変わるようにしています（下のコードには記述していません）。

コードの詳細は下記をご覧ください。

今回はナビゲーションの部分のみのコードなので、header内で使用する場合は横幅を指定するか、aタグをdisplay: inline-blockにしてpaddingを設定するか等、状況に合わせて応用して使用してください。

HTML

<nav class="nav">
  <ul class="nav__menu">
    <li class="nav__item"><a class="nav__link" href="/about">会社概要</a></li>
    <li class="nav__item"><a class="nav__link" href="/service">サービス</a></li>
    <li class="nav__item"><a class="nav__link" href="/shop">ショップ</a></li>
    <li class="nav__item"><a class="nav__link" href="/blog">ブログ</a></li>
    <li class="nav__item"><a class="nav__link" href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

CSS

.nav__menu {
  padding-left: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.nav__item {
  flex: 1;
  text-align: center;
}

.nav__link {
  display: block;
  text-decoration: none;
  color: #333;
  text-align: center;
  padding: 8px;
}

.nav__link:hover {
  text-decoration: underline;
}

実際のコード（中央寄せ）

リンクの項目を中央寄せしたバージョンのデモを作成しました。

こちらをご覧ください。

HTML

上のデモで使用されているHTMLで、一つ目のデモと同じです。

<nav class="nav">
  <ul class="nav__menu">
    <li class="nav__item"><a class="nav__link" href="/about">会社概要</a></li>
    <li class="nav__item"><a class="nav__link" href="/service">サービス</a></li>
    <li class="nav__item"><a class="nav__link" href="/shop">ショップ</a></li>
    <li class="nav__item"><a class="nav__link" href="/blog">ブログ</a></li>
    <li class="nav__item"><a class="nav__link" href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

CSS

CSSではリストの幅をなくし、Flexboxを使用して中央寄せにしました。

.nav__menu {
  padding-left: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.nav__item {
  text-align: center;
}

.nav__link {
  display: block;
  text-decoration: none;
  color: #333;
  text-align: center;
  padding: 8px;
}

.nav__link:hover {
  text-decoration: underline;
}