ナビゲーション

ヘッダーのナビゲーション（グローバルナビゲーション）を作成

PC 向けとモバイル向けのレイアウトで表示が大きく変わる

リストを作って作るのがナビゲーションの基本

ナビゲーションの HTML はほぼパターン化していて、箇条書きの <ul> <li> と <a> タグを組み合わせて作成する

ナビゲーション全体を <nav> タグで囲む場合が多い

各要素の class 属性などは必要に応じて付ける

HTML: ナビゲーションのの基本的な HTML

<nav>
␣␣<ul>
␣␣␣␣<li> <a htef="リンク先ページの URL"> リンク先ページの名前</a> </li>
␣␣␣␣<li> <a htef="リンク先ページの URL"> リンク先ページの名前</a> </li>
...
␣␣</ul>
</nav>

CSS の 3つのポイント

ナビゲーションを作成するときの CSS には大きく分けて 3つのポイントがある

<ul> からマージン、パディング、リスト先頭のマークを消す

条件によって変化する複雑なレイアウトをうまく制御する

<a> タグに適切なスタイルを適用する

<ul> のデフォルト CSS をリセットする

ナビゲーションで使用する <ul> タグには、いくつかのデフォルト CSS が適用されている

ナビゲーションを作るために、デフォルト CSS で設定されている上下マージンと左パディングを 0 にする

各リスト項目先頭のドットを消す

CSS: <ul> のデフォルト CSS をリセット

margin: 0;
paddin: 0;
list-style: none;

条件によって変化する複雑なレイアウトを制御する

レスポンシブデザインに対応したナビゲーションは、状態によって表示が複雑に変化する

どんな状態があるか整理する

3通りの表示の状態がある

それぞれの状態に合わせて CSS でレイアウトを作って行く

モバイル向けと PC 向けの表示を切り替えるには、メディアクエリが使える

モバイル向けのボタンをタップしてナビゲーションの表示・非表示を切り替えるには、JavaScript プログラムを使う

表示を切り替えたい要素にクラスを追加したり、削除したりして実現する

表示を切り替えたい要素はナビゲーションの <ul>

<ul> に collapse クラスを追加・削除するようにする

<ul> には、表示・非表示以外にもナビゲーションのデザインを作るためのスタイルを適用する必要がある

callapse クラス以外に、header-nav クラスを付ける

<ul> のクラス

<ul class="header-nav">（表示）◀ ▶ <ul class="header-nav collapse>（非表示）

ナビゲーションの表示状態を 3通り作る

CSS: 3つの表示状態を作るためのセレクタとメディアクエリ

.header-nav {
␣␣モバイル向けナビゲーションのスタイル
␣␣<ul> のデフォルト CSS をリセットするスタイル
}

.heade-nav.collapse {
␣␣ナビゲーションを非表示にするスタイル
}

@media (min-width: 768px) {
␣␣.header-nav {
␣␣PC 向けナビゲーションのスタイル
␣␣}
}

<a> タグに適切なスタイルを設定する

ナビゲーションのリンク <a> に display: block を適用して、ブロックボックスとして表示させる

ナビゲーションのリンクはデザイン上、パディングやボーダーを使用してテキストよりも大きめに作る場合が多い

サイズ調整がしやすいようにブロック卜すとして表示する

ナビゲーションのリンクを作る時には、どんなデザインでもほぼ使うテクニック

テンプレートファイル

base.html
style.css