HTMLコーディングをはじめよう〜副業にも!|第7章 ナビゲーションの基礎 その1

Webデザイン イメージ

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

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

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

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

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

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

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

ナビゲーションは、ウェブページのメニューと同じ意味である。そして、全ページに共通するヘッダー部分のナビゲーションを、「グローバルナビゲーション」という。

ウェブサイトをいちから制作する場合、グローバルナビゲーションとファイルのディレクトリ構造は、同じ構造でなければならない。

例えば、「HTMLコーディングをはじめよう〜副業にも!|第3章 コーディングの基本と規則」で説明したデモサイトのディレクトリ構造を、グローバルナビゲーションでコーディングすると、以下の通りとなる。

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

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="Debian/index.html">Debian</a></li>
    <li><a href="Ubuntu/index.html">Ubuntu</a></li>
    <li><a href="RHEL/index.html">RHEL</a></li>
    <li><a href="OSS/index.html">OSS</a></li>
  </ul>
</nav>
</header>

CSSやjavascript、imagesフォルダは表示する必要がないので、トップページのスクリーンショットにあるように「Home」「Debian」「Ubuntu」「RHEL」「OSS」の5つのリンクを表示する。

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

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

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

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

目的は、「ユーザーや検索エンジンが、目的のコンテンツへいかに迅速にたどり着けるか」なので、グローバールナビゲーションには各カテゴリーのトップエージへのリンクだけ表示すれば良い。

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

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

フッターメニュー

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

例えば、会社概要(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: 1em;
}

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

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

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

display: flexは、floatやinline-blockを使わずに、リストを横並びにできる便利なCSS。これで、サイトロゴは左端、グローバルメニューは右端に、ヘッダー上で横一列に配置できる。

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

尚、ヘッダー以下はdivにてコンテナを作成し、ヘッダー(70px)より高さに余裕を持たせ、トップから80px下げた。

ヘッダー部分は、後々レスポンシブに対応するため、スクロールしてもついてくる形にしておいた方が良い。

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

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

nav {
  margin: auto 0 0 auto;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
}

nav ul li a {
  color: black;
  padding: 0 .3em;
  text-decoration: none;
}

navでは、全体をヘッダー内右寄せにし、左に余白を設置するためautoにする。上下は、上をauto、下を0とした。

nav ulでは、上記でも使用したdisplay: flexを用いて右寄せに。list-style: noneで箇条書きの中丸を打ち消し、padding: 0で中丸とリストとの間を打ち消す。

nav ul li aでは、リスト間の余白をpaddingで設定し、文字色をリンク色ではない黒、リンクの下線をtext-decoration: noneで打ち消す。

これで、最低限のCSSでグローバルナビゲーションが設置できた。あとはサイトのイメージに合わせたレイアウトにするよう、CSSで微調整すれば良い。以下に、デモサイトトップページのスクリーンショットを載せておく。

デモサイト スクリーンショット

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

この章のまとめ

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

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

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

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

コメント