縦ナビゲーション
ナビゲーション
- マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み
- 文字以外の領域面ををクリック可能にするためには「display: block」が必須
縦ナビゲーション
- 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する
- 「li a」は、マウスの反応を受け取る「面」を指定する
《例》
<body> <ul class="nav"> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </body>
/* reset */ html, body, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { background: #FFF; font-size: 16px } /* .nav */ .nav { width: 64px; margin: 50px auto; } .nav li{ margin-bottom: 18px; line-height: 20px; } .nav li a:link { color: #2069C3; } .nav li a:hover { color: #F90; text-decoration: underline; }
要素間の上下マージンの相殺
- どちらも正の値の場合、大きいほう
- どちらも負の値の場合、小さいほう
- 一方が正の値、他方が負の値の場合、足し引きした値を設定
「li」自体も要素間の上下マージンの相殺は発生します。
borderの設定
- リストの幅・高さが指定された領域内に表示しなければ、レイアウトが崩れる(ボーバー幅の値分だけ増える)
- 基本的に border は、「li a」に指定する
- 「a(anchor)」は、マウスの反応を受け取ることを示す
- 「href(hyper reference)」は、リンクの遷移先を表す
課題(リストと擬似クラス)
- フォルダー名「0706_name」
- ファイル名「nav1_name.html」「nav2_name.html」「nav3_name.html」
- 画像フォルダー名は「img」
- 今回は、初期型の練習のため CSSは、embed
- ただし、共通CSSは「style.css」としてすべてのページに外部リンクにする
手順のチェック
以下の手順は、必ず実行しましょう。
リストをナビゲーションに(縦)
<body> <ul class="nav"> <li id="new"><a href="#">新着情報</a></li> <li id="info"><a href="#">お知らせ</a></li> <li id="item"><a href="#">製品情報</a></li> <li id="shop"><a href="#">店舗案内</a></li> <li id="company"><a href="#">会社案内</a></li> </ul> </body>
共通設定
- resetとbody
《style.css》
/* リセット */ html, body, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } /* body */ body { background: #FFF; font-size: 16px; }
解答例
Nav01
- 「li a」で共通設定をし、#で個別性を設定します
ul.nav { width: 100px; margin: 50px auto; } ul.nav li a { display: block; padding: 23px 0px; text-align: center; border: solid 1px; font-weight: bold; color: white } li#new a { background: red; border-color: red } li#info a { background: orange; border-color: orange } li#item a { background: yellowgreen; border-color: yellowgreen } li#shop a { background: limegreen; border-color: limegreen } li#company a { background: skyblue; border-color: skyblue } li#new a:hover, li#info a:hover, li#item a:hover, li#shop a:hover, li#company a:hover { background: white; } li#new a:hover { color: red } li#info a:hover { color: orange; } li#item a:hover{ color: yellowgreen; } li#shop a:hover { color: limegreen; } li#company a:hover { color: skyblue; }
Nav02
- background-position の値は、リストマーカーの画像の大きさによって変更します
- 左から上からの順に位置指定をします
- hover用の画像を用意すれば、「display: block」の面積の中に含まれるため、画像置換は可能です
ul.nav { width: 180px; margin: 50px auto; border-top: dotted 1px #73A1FF; } ul.nav li a { display: block; padding: 10px 0 8px 16px; border-bottom:dotted 1px #73A1FF; background: url(img/tri.png) no-repeat left 14px; font-weight:bold; color:#73A1FF; } ul.nav li a:hover { color:#FA0; }
:first-child
- 個別にクラス名をつけたり、ulにborder指定をせずに最初のliのみに指定できる
- IE8は、「:last-child」は認識しませんが「:first-child」は認識します