パソコンと花

list(リスト)要素でナビゲーションを作る

ナビゲーションとは

ナビゲーションは航海術とか経路を誘導するという意味があります。

Webページが増えてくるとユーザーが目的のページを探しきれないで迷子になってしまいます。

そんな時に道案内してくれるのがナビゲーションになります、このナビゲーションは目的のページに行くように貼ったリンクの事でもあります。

ナビゲーションには

  • グローバルナビゲーション
  • ローカルナビゲーション
  • パンくずナビゲーション(パンくずリスト)

などがありユーザーをページ内で迷子にしないように配置しましょう。

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

グローバルナビゲーションはWebサイト内の主要なページへリンクしていて、ユーザーを好みのページへ誘導してくれます。

下の画像のように、すべてのページの同じ位置に共通して設置します。

ページ上部の右側が最も多い場所です、どんなものがあるのかをユーザーに分かり易くしています。

ローカルナビゲーションとは

ローカルナビゲーションはWebサイト内の同じ階層の中にあるページに移動するための限定的なリンク集です。

新着情報やカテゴリー別に分類されています、どこにどんなページがあるかを誘導します。

パンくずナビゲーションとは

パンくずナビゲーションは通常パンくずリストと言われます。

記事内の左上部に位置していてサイト内のどの位置にいるのかをユーザーに分かり易く示したナビゲーションです。

現在の記事の上の階層にあるページを順番にリストアップしてリンクを設置します。

下の画像の赤い枠がパンくずリストになります。

パンくずナビゲーション

グローバルナビゲーションを作ってみよう

htmlに順不同リストを記述する

header内にnav要素を記述

グローバルナビゲーションは記事の上部にあるので「header」内に「nav要素」を使用して記述します。

nav要素内に順不同リストのul要素を記述、その中にナビに使用するページ名を記述していきます。

記事名を「li要素」で項目ごと囲います。

ヘッダ内に記述した順不同リスト

ブラウザには各項目がリストにより表示されます。

ブラウザに表示された順不同リスト

aタグとhref属性を利用してリンクを貼る

各項目をaタグを使用してリンクを貼っていきます「#(シャープ)」記号はまだページが無くてリンク先に飛ばせない時とかに使用します。

ページのトップに行くというものでheaderがページトップにあるのでクリックしても変化はないと思います。

ブラウザで確認すると色が変わって文字の下に線ができているのでリンクが貼られたことになります。

リンクが指定されたリスト

CSSを使って横並びに

htmlでCSSファイルを参照するように記述して

CSSのファイルに以下の事を記述しています。

  • header部分に使用する画像を取り込みます。
  • 画像の高さを指定しています(高さだけ指定すると幅は画像の縦横比に従って表示されます)
  • 画像の大きさは縦横比を考慮して最大の大きさに
  • ブラウザを動かしたときの画像の伸縮は中心を起点に動くように
  • 下の画像との余白は70pxにして
  • 文字は右揃えに
  • header部分の内側に15pxの余白を取って

と指定しています。

ヘッダー内のCSS装飾

リストに対してCSS装飾しています。

  • リスト外周りの余白は0pxに
  • リスト内側の余白左側は0pxに
  • リストのスタイルタイプはnoneで文字の前の点を無しで
ヘッダー内の順不同リストの装飾

リストの項目毎の装飾は

  • インラインブロックにして項目を横並びにする
  • 各項目の内側の余白を上下4px、左右を8pxにして
  • 外側の余白を0pxにする
ヘッダー内のリスト項目に装飾

header内のa要素に対して

  • テキストデコレーションはnone文字の下線は無しに
  • 文字色は親要素を参照して
ヘッダー内のa要素にCSS装飾

a要素にマウスが乗ったら

  • 色をロイヤルブルーにしてね
ヘッダー内のホバー属性

このようにCSSに記述すると下の画像のようにheader部分に画像は入り、リンクが貼られた文字が右上に横並びで表示されます。

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

list(リスト)要素でナビゲーションを作る

グローバルナビゲーションは一般的に順番を必要としない順不同リスト(ul要素)を使用して作ります。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事