ナビゲーションとは

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)リンクすることも、忘れずに施しておいてください。