一から始めるWeb制作 #11〜ナビゲーションの基礎・グローバルナビゲーション

Webデザイン イメージ

ウェブページ制作において、ナビゲーションはとても重要。

ユーザーや検索エンジンが、目的のコンテンツへいかに迅速にたどり着けるか、その「道しるべ」となるものだからだ。

今回より複数回に分けて、ナビゲーションの基礎について解説しよう。

最初は、全ページに共通する、グローバルナビゲーションについて。

ナビゲーションとディレクトリ構造

日頃、さまざまなウェブページを閲覧していると、各ページのヘッダに「メニュー」として、各カテゴリーへのリンクがあるのを見かけるだろう。

これがナビゲーションだ。

一般的に、ナビゲーションとは

  • ヘッダーに設置するリンクメニュー
  • パンくずリスト
  • 記事の目次
  • ページ送りのリンク

を指し、全ページに共通するヘッダー部分のナビゲーションを、「グローバルナビゲーション」という。

グローバルナビゲーションとファイルのディレクトリ構造は、同じでなければならないので、ウェブ制作の設計時点で、十分に検討しておく必要がある。

例えば、「一から始めるウェブ制作 #6〜HTML & CSSコーディングの基本と規則」で説明したデモサイトのディレクトリ構造を、グローバルナビゲーションでコーディングすると、以下の通りとなる。

各メニュー先のファイルは未完成のため、現状リンクアドレスは「#」にしてある。

  <body>
    <header>
      <div>
        <a href="index.html"><img id="logo" src="images/Zakkuri.png" alt="Site Logo"></a>
      </div>
    </header>

    <div class="container"><!-- 大枠のコンテナ -->
      <nav>
        <ul class="pc">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Debian</a>
          </li>
          <li>
            <a href="#">Ubuntu</a>
          </li>
          <li>
            <a href="#">RHEL</a>
          </li>
          <li>
            <a href="#">OSS</a>
          </li>
        </ul>
      </nav>

(以下省略)

今回、ナビゲーションの説明のために、新たなデモサイトを用意したので、上記HTMLと見比べてみよう。

デモサイト2

各カテゴリーでページが増えたら、グローバルナビゲーションのリンク先に、カテゴリー別のトップページ(カテゴリー名/index.html)を設けて、そこから増えたページへリンクさせる。

これが、グローバルナビゲーションの基本概念となる。

グローバルナビゲーションは二階層まで

「グローバルナビゲーションとファイルのディレクトリ構造は、同じでなければならない」と説明したが、全てをナビゲーションに記載するわけではない。

目的は、

「ユーザーや検索エンジンが、目的のコンテンツへいかに迅速にたどり着けるか」

なので、グローバールナビゲーションには、各カテゴリーのトップエージへのリンクだけ表示すれば良い。

また、グローバルナビゲーションは、よくても二階層までに留めておいた方が良い。

グローバルナビゲーションを多階層にして、かえってウェブページを見にくくしては設置する意味がないし、そもそもそれほど深い階層にしてしまっては、本来の目的を失ってしまうからだ。

フッターメニュー

グローバルナビゲーションには、全てのリンクを表示する必要はない。

例えば、会社概要(About Us)、プライバシーポリシー、サイトマップ、連絡先(Contact)といった、メインコンテンツほど重要ではないが必要な項目については、ヘッダーのグローバルナビゲーションには入れず、フッターメニューとして記載する。

フッターメニューは、検索に重要なリンクではないので、必ずしもnavタグやulタグで囲む必要はない。デモサイトでは、以下のように記載している。

<footer>
<p class="footmenu"><a href="index.html">Home</a> | <a href="#">Sitemap</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a></p>

<p class="copyright">Copyright ©ざっくりLinux! All rights reserved.</p>
</footer>

もちろん、正確なコーディングとして、ulタグにて記載することは良いことだ。

CSSでグローバルナビゲーションを整える

上記の通り、HTMLでグローバルナビゲーションをマークアップしたら、ウェブページで適切に表示されるよう、CSSで整えていこう。

ヘッダーのCSS

最初は全体の構造をきめ、ヘッダーをCSSで整える。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 16px;
}

header {
  background: #dadada;
  height: 70px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#logo {
  height: 50px;
  margin: 10px auto 0 auto;
}

.container {
  position: relative;
  top: 70px;
}

最初の「box-sizing: border-box」は、「paddingとborderを幅と高さに含める」という意味。わかりにくいが、要するにスマートフォンやサイズの違うPCによる、レイアウトの崩れを防ぐ役目をもつ。クラスを設けず、「*」によって全ページに共通するCSSとする。

headerはスクロールしても常にトップに表示できるよう、position: fixed、top: 0で固定し、z-index: 10で常に画面最前部にヘッダーが表示されるようにしてある。

ヘッダー部分は、後々レスポンシブに対応することを考慮し、スクロールしてもついてくる形にしておいた。

尚、ヘッダー以下はdivにてコンテナ(class=container)を作成し、ヘッダー(70px)の高さ分として、トップから70px下げた。

グローバルナビゲーションのCSS

次に、グローバルナビゲーションをCSSで整える。

上記HTMLで、ナビゲーションのulに「pc」というクラス名をつけてあるので、グローバルナビゲーションでもクラスを統一しよう。

クラス名「pc」については、後々モバイル用のハンバーガーメニューと対比させるため。

ul.pc {
  background: black;
  display: flex;
  padding: 0;
  margin: 0 auto;
}

ul.pc li {
  list-style: none;
  padding: 1em 0;
  text-align: center;
  width: 20%;
}

ul.pc li:hover {
  background: #808080;
  padding: 1em 0;
}

ul.pc li a {
  color: #fff;
  text-decoration: none;
}

CSSで設定することは、以下3つ。

  1. ナビゲーション全体の骨格を作る(ul)
  2. リストアイテムの体裁を整える(ul li)
  3. リストアイテムのリンク設定(ul li a)

ナビゲーション全体の骨格を作る

メニューを画面の左右いっぱいに置くため、背景色を設定し、ナビゲーション内外に余分なスペースができないよう、padding:0; margin: 0 auto;としておく。

display: flexは、リストアイテム(li)を簡単に横並びにしてくれる便利なCSSなので、覚えておこう。

リストアイテムの体裁を整える

list-style: noneで箇条書きの黒丸を打ち消し、paddingで中丸とリストとの間を打ち消して、上下に1文字分の余白を作る。

HTMLで作成したリストアイテムは5つなので、各々の幅を1/5ずつにするため、リストアイテムひとつのwidthを20%にした。

このままでも良いが、ユーザーエクスペリエンス(UX)には、ナビゲーション上でマウスがどこを指しているかを明確にするため、オンマウス時にリストアイテムの色が変わるよう設定してある(ul li:hover)。

リストアイテムのリンク設定

最後に、メニューの文字色を設定し、リンクの下線を打ち消す。

これで、最低限のCSSでグローバルナビゲーションが設置できた。あとはサイトのイメージに合わせたレイアウトにするよう、CSSで微調整してみよう。

まだ、レスポンシブ用にメディアクエリを設定していないので、現時点ではPCのみのグローバルナビゲーションである。

この記事のまとめ

ナビゲーションは、ウェブページの道しるべとして、とても大切なものということを書いた。

グローバルナビゲーションは全ページに設置し、各カテゴリーへの誘導を容易にするためのもの。多階層にして全てのリンクを表示させるのではなく、あくまでカテゴリーのページトップへのリンクがあれば十分。

HTMLはできるだけ簡潔にしておいた方が、人にも機械のためにも良い。

次回は、グローバルメニューをレスポンシブにする「ハンバーガーメニュー」について。

コメント