ナビゲーション(1)
ナビゲーションとは
- 閲覧者が迷わずに目的へ辿りつけるように手助けすることが役割。
- 各ページへのリンクをまとめたリンク集で項目を列挙したもの。
- リンクの価値は同質なので番号のない箇条書きとして扱う。
ナビゲーションブロックのスタイル
下記の形が基本
<ul> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <li><a href="#">リンク4</a></li> <li><a href="#">リンク5</a></li> </ul>
display:block でa要素(リンク1~5の部分)をブロックレベル要素にする事でマウスに反応する場所が面になるのでボタンを演出できる。インラインレベル要素のままだとテキストにしか反応しない。→使い分ける
li a{ dispay:block; }
縦並びメニュー
- marginの相殺に留意する
- 要素間のmarginは絶対値が大きい方が適用される。
- ボックス内ボックスがある場合も相殺がおこる。
- borderは「ul」の3辺、残り1辺は「li a」に設定する。
※marginの相殺は後日まとめ予定
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦並びメニュー</title> <link rel="stylesheet" href="style.css"> </head> <div id="nav"> <ul> <li><a href="#">HTML+CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">ActionScript</a></li> </ul> </div>
</body> </html>
css
@charset "utf-8"; /* reset */ html, body, div, 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; } /* layout */ #nav { width: 180px; margin: 50px 0 0 50px; font-size: 20px; font-weight: bold; } #nav ul { border-top: 2px solid #F90; border-right: 2px solid #F90; border-left: 2px solid #F90; } #nav li a { display: block; border-bottom: 2px solid #F90; background: #39F; color: #FFF; line-height: 40px; padding: 0 1em; } /* 擬似クラス */ #nav a:hover { background: #F90; }
横並びメニュー
- ul>li>a>のカタマリをdivで包む。
- 各リスト項目「li」にfloat:leftを適用し横並びにする。
- floatの解除を忘れない。
- 「li」にwidthを指定し、display:blockでa要素をブロックレベルに変える。
- 「li」ではなく「li a」にborderを設定する事でborderの数値による崩れを防ぐ。
- borderは「ul」の3辺、残り1辺は「li a」に設定する。
css
/* reset */ html, body, div, 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; } /* layout */ #nav { width: 800px; font-size:20px; font-weight: bold; margin: 50px 0 0 50px; } #nav ul { width: 800px; overflow: hidden; border-top: 2px solid #F90; border-bottom: 2px solid #F90; border-left: 2px solid #F90; } #nav li { float: left; width: 160px; text-align: center; } #nav li a { display: block; border-right: 2px solid #F90; background: #39F; color: #FFF; line-height: 40px; } /* 擬似クラス */ #nav a:hover { background: #F90; }
実際の利用例
横ナビ
縦ナビ