list(リスト)要素でナビゲーションを作る
ナビゲーションとは
ナビゲーションは航海術とか経路を誘導するという意味があります。
Webページが増えてくるとユーザーが目的のページを探しきれないで迷子になってしまいます。
そんな時に道案内してくれるのがナビゲーションになります、このナビゲーションは目的のページに行くように貼ったリンクの事でもあります。
ナビゲーションには
- グローバルナビゲーション
- ローカルナビゲーション
- パンくずナビゲーション(パンくずリスト)
などがありユーザーをページ内で迷子にしないように配置しましょう。
グローバルナビゲーションとは
グローバルナビゲーションはWebサイト内の主要なページへリンクしていて、ユーザーを好みのページへ誘導してくれます。
下の画像のように、すべてのページの同じ位置に共通して設置します。
ページ上部の右側が最も多い場所です、どんなものがあるのかをユーザーに分かり易くしています。
ローカルナビゲーションとは
ローカルナビゲーションはWebサイト内の同じ階層の中にあるページに移動するための限定的なリンク集です。
新着情報やカテゴリー別に分類されています、どこにどんなページがあるかを誘導します。
パンくずナビゲーションとは
パンくずナビゲーションは通常パンくずリストと言われます。
記事内の左上部に位置していてサイト内のどの位置にいるのかをユーザーに分かり易く示したナビゲーションです。
現在の記事の上の階層にあるページを順番にリストアップしてリンクを設置します。
下の画像の赤い枠がパンくずリストになります。
グローバルナビゲーションを作ってみよう
htmlに順不同リストを記述する
header内にnav要素を記述
グローバルナビゲーションは記事の上部にあるので「header」内に「nav要素」を使用して記述します。
nav要素内に順不同リストのul要素を記述、その中にナビに使用するページ名を記述していきます。
記事名を「li要素」で項目ごと囲います。
ブラウザには各項目がリストにより表示されます。
ａタグとhref属性を利用してリンクを貼る
各項目をａタグを使用してリンクを貼っていきます「#(シャープ)」記号はまだページが無くてリンク先に飛ばせない時とかに使用します。
ページのトップに行くというものでheaderがページトップにあるのでクリックしても変化はないと思います。
ブラウザで確認すると色が変わって文字の下に線ができているのでリンクが貼られたことになります。
CSSを使って横並びに
htmlでCSSファイルを参照するように記述して
CSSのファイルに以下の事を記述しています。
- header部分に使用する画像を取り込みます。
- 画像の高さを指定しています(高さだけ指定すると幅は画像の縦横比に従って表示されます)
- 画像の大きさは縦横比を考慮して最大の大きさに
- ブラウザを動かしたときの画像の伸縮は中心を起点に動くように
- 下の画像との余白は70pxにして
- 文字は右揃えに
- header部分の内側に15pxの余白を取って
と指定しています。
リストに対してCSS装飾しています。
- リスト外周りの余白は0pxに
- リスト内側の余白左側は0pxに
- リストのスタイルタイプはnoneで文字の前の点を無しで
リストの項目毎の装飾は
- インラインブロックにして項目を横並びにする
- 各項目の内側の余白を上下4px、左右を8pxにして
- 外側の余白を0pxにする
header内のａ要素に対して
- テキストデコレーションはnone文字の下線は無しに
- 文字色は親要素を参照して
a要素にマウスが乗ったら
- 色をロイヤルブルーにしてね
このようにCSSに記述すると下の画像のようにheader部分に画像は入り、リンクが貼られた文字が右上に横並びで表示されます。
list(リスト)要素でナビゲーションを作る
グローバルナビゲーションは一般的に順番を必要としない順不同リスト(ul要素)を使用して作ります。
