ウェブページ制作において、ナビゲーションはとても重要。
ユーザーや検索エンジンが、目的のコンテンツへいかに迅速にたどり着けるか、その「道しるべ」となるものだからだ。
今回より複数回に分けて、ナビゲーションの基礎について解説しよう。
最初は、全ページに共通する、グローバルナビゲーションについて。
ナビゲーションとディレクトリ構造
日頃、さまざまなウェブページを閲覧していると、各ページのヘッダに「メニュー」として、各カテゴリーへのリンクがあるのを見かけるだろう。
これがナビゲーションだ。
一般的に、ナビゲーションとは
- ヘッダーに設置するリンクメニュー
- パンくずリスト
- 記事の目次
- ページ送りのリンク
を指し、全ページに共通するヘッダー部分のナビゲーションを、「グローバルナビゲーション」という。
グローバルナビゲーションとファイルのディレクトリ構造は、同じでなければならないので、ウェブ制作の設計時点で、十分に検討しておく必要がある。
例えば、「一から始めるウェブ制作 #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と見比べてみよう。
各カテゴリーでページが増えたら、グローバルナビゲーションのリンク先に、カテゴリー別のトップページ（カテゴリー名/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つ。
- ナビゲーション全体の骨格を作る（ul）
- リストアイテムの体裁を整える（ul li）
- リストアイテムのリンク設定（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はできるだけ簡潔にしておいた方が、人にも機械のためにも良い。
次回は、グローバルメニューをレスポンシブにする「ハンバーガーメニュー」について。
コメント