2014-09-11
2014-09-11
リストをナビゲーション
ナビゲーションブロック
- カテゴリ間を移動するためのインタラクション機能
- タブ(ボタン)型で横並びのデザイン
ナビゲーションブロックの構成
- ナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつである
- 項目を列挙したものといえる
- リンクの価値は同質なので、番号のない箇条書きとして扱う
ナビゲーションブロックのスタイル
縦並びメニュー
<ul> <li><ahref="#">HTML+CSS</a></li> <li><ahref="#">JavaScript</a></li> <li><ahref="#">PHP</a></li> <li><ahref="#">WordPress</a></li> <li><ahref="#">ActionScript</a></li> </ul>
ボタンとして反応させるには、
「アンカー」に対して、マウスの動きに反応する「面積」を設定します。
#nav li a { display: block; }
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>縦並びメニュー</title> <linkrel="stylesheet"href="style.css"> </head> <body> <divid="nav"> <ul> <li><ahref="#">HTML+CSS</a></li> <li><ahref="#">JavaScript</a></li> <li><ahref="#">PHP</a></li> <li><ahref="#">WordPress</a></li> <li><ahref="#">ActionScript</a></li> </ul> </div> </body> </html>
《style.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; }
縦並びのボックス
- paddingは問題なし
- marginは相殺される
要素間の上下マージンの相殺
- どちらも正の値の場合、大きいほう
- どちらも負の値の場合、小さいほう
- 一方が正の値、他方が負の値の場合、足し引きした値を設定
ボックス内にボックスがある場合のマージンの相殺
ボックス内のボックスがある場合も相殺されマージン値の大きいボックスのマージンが採用されます。
つまり、「#container」の「margin: 0;」なので、「#header」の「margin: 10px;」が採用されて、「#header」の上に「#container」までの「余白」ができずに、そのままbodyに対しての空きを作ってしまいます。
この相殺は、外側のボックスにpadding又はborderが設定されているおらず、2つのボックスの間に他の要素が存在しない場合にのみ発生します。
※「div要素」は、グループのために利用されますが、「dl」や「ul」などのリストは、中に他要素が入ることが前提です。
もちろん「li」自体も要素間の上下マージンの相殺は発生します。
横並びのボックス(liにborderを指定した場合)
- marginは通常計算(相殺されません)
- paddingはブラウザにより影響
- borderも計算に入れる
borderの数値を大きくしただけで、崩れます。
この解釈は、ブラウザごとに違います。(旧ブラウザとモダンブラウザの違い)
ということで、このような崩れをなくすためには「li」に borderを設定するのではなく、「li a」に borderを設定します。
指定された「li幅の上」にborderが設定されるため、幅にborderを加算する必要が無くなります。
リストを横ナビにするときのポイント
- 「li」ではなく、「li a」にborderを指定する
- ul は、レイアウト幅を指定
- li は、widthとfloatを指定
- li a は、display: block と border-rightを指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>横並びメニュー</title> <linkrel="stylesheet"href="css/style1.css"> </head> <body> <divid="nav"> <ul> <li><ahref="#">HTML+CSS</a></li> <li><ahref="#">JavaScript</a></li> <li><ahref="#">PHP</a></li> <li><ahref="#">WordPress</a></li> <li><ahref="#">ActionScript</a></li> </ul> </div><!-- /#nav --> </body> </html>
@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: 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; }