ナビゲーションとは

CSSで実装するナビゲーション

Webサイトで、最もよく使用されるナビゲーション部分を習得します。初めは、非常に理解しづらい節で、CSSの苦手意識が出てしまう人が多くいます。何度も練習を重ね、理解し克服しましょう。

ナビゲーションとは

的確に目的のページへ誘導するための機能を果たす(リンク)エリアの部分を指します。
メニュー(menu)と呼ばれることもあります。

近年のナビゲーション

ナビゲーションは主に、テキストを使用するものと画像を使用するものがあります。
現在はSEOやアクセシビリティの関係性やレスポンシブの仕様などを踏まえ、テキストで作られることが多くなってきています。

ナビゲーションの種類

参考：三井住友銀行：http://smbc.co.jp

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

ページ内で最も軸となるコンテンツを指すことが多く、どの画面でも、同じメニュー構成・同じデザイン・同じ場所に配置されています。主要なリンクとなるので、カーソルや指が触れると色や形状の変化を施している場合が多く、最もクリックし易く目立つ位置に配置されています。
参考：NTT DOCOMO公式サイト：http://nttdocomo.co.jp

ローカルナビゲーション
ページナビゲーション

特定のページにだけ配置されているナビゲーション。グローバルナビゲーションが横配置にレイアウトされている場合、ローカルナビゲーションは、縦型配置になっていることが多いようです。
参考：会社概要ページ cyberagent.co.jp

パンくずナビ・パンくずリスト

階層が深いWebサイトの場合、ユーザーが迷ってしまったり、なかなか目的のページへ辿り着かない状態を避けるため、表示しているページまでの情報経路を表示させておきます。目立たず、やや小さめのテキストで配置されています。

【例】すべてのカテゴリ > コンピュータ > パソコン > Mac > ノートブック、ノートパソコン

参考：ヤフーオークション　auctions.yahoo.co.jp

最近では、下部＝footer要素にも、各ナビゲーション類が充実しています。ごちゃごちゃにならないよう整理し、事前にレイアウトを考えてデザインするように心がけましょう。

上部＝header要素の左に配置されるロゴマークを押すと、トップページ(index.html)リンクすることも、忘れずに施しておいてください。