リストをブロックに
ナビゲーションブロック
- カテゴリ間を移動するためのインタラクション機能
- タブ(ボタン)型で横並びのデザイン
ナビゲーションブロックの構成
- ナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつである
- 項目を列挙したものといえる
- リンクの価値は同質なので、番号のない箇条書きとして扱う
ナビゲーションブロックのスタイル
縦並びメニュー
<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>
ボタンとして反応させるには、
「アンカー」に対して、マウスの動きに反応する「面積」を設定します。
#nav li a { display: block; }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦並びメニュー</title> </head> <body> <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>
《style.css》
@charset "UTF-8"; body,ul,li,a { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #nav { font-size: 18px; font-weight: bold; margin: 50px 0 0 50px; } #nav ul { list-style-type: none; width: 150px; height: auto; border-top: 2px solid #347BB4; border-right: 2px solid #347BB4; border-left: 2px solid #347BB4; background-color: #64ACE8; } #nav li { margin-bottom: 8px; line-height: 1.2; color: #FF0000; } #nav li a { color: #FFFFFF; text-decoration: none; width: auto; height: auto; padding: 10px; display: block; border-bottom: 2px solid #347BB4; } #nav a:link, #nav a:visited { color: #FFFFFF; text-decoration: none; } #nav a:hover { color: #FFFFFF; background-color: #347BB4; }
横並びメニュー
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>横並びメニュー</title> </head> <body> <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>
《style.css》
@charset "UTF-8"; body,ul,li,a { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #nav { font-size: 18px; font-weight: bold; margin: 50px 0 0 20px; height: auto; width: auto; } #nav ul { list-style-type: none; width: 750px; height: auto; border-top: 2px solid #347BB4; border-bottom: 2px solid #347BB4; border-left: 2px solid #347BB4; overflow: hidden; /* またはauto */ } #nav li { font-size: 16px; font-weight: bold; text-align: center; float: left; display: inline; } #nav li a { padding: 10px 0; display: block; width: 148px; height: auto; background-color: #64ACE8; border-right: 2px solid #347BB4; } #nav li a:link,#nav li a:visited { color: #FFFFFF; } #nav li a:hover { color: #FFFFF; background-color: #347BB4; }
横並びのボックス
- marginは通常計算(相殺されません)
- paddingはブラウザにより影響
- borderも計算に入れる
borderの数値を大きくしただけで、崩れます。
この解釈は、ブラウザごとに違います。(旧ブラウザとモダンブラウザの違い)
ということで、このような崩れをなくすためには「li a」が「margin: 0;」「padding: 0;」「border: none;」で設定する背景画像でボタンに見せるナビゲーションが主流になります。
「border」の数値が大きくなった値を、「li」の「width」から引いて表示すると
問題なく表示されることがわかります。
「float」を使ったレイアウトに、borderを設定した場合も同様のことがおきます。
複雑な指定をすると混乱するので、この段階でWindows Internet Explorer対策は、あえて記述しません。
要素間の上下マージンの相殺
- どちらも正の値の場合、大きいほう
- どちらも負の値の場合、小さいほう
- 一方が正の値、他方が負の値の場合、足し引きした値を設定
ボックス内にボックスがある場合のマージンの相殺
ボックス内のボックスがある場合も相殺されマージン値の大きいボックスのマージンが採用されます。
つまり、「#container」の「margin: 0;」なので、「#header」の「margin: 10px;」が採用されて、「#header」の上に「#container」までの「余白」ができずに、そのままbodyに対しての空きを作ってしまいます。
この相殺は、外側のボックスにpadding又はborderが設定されているおらず、2つのボックスの間に他の要素が存在しない場合にのみ発生します。
※「div要素」は、グループのために利用されますが、「dl」や「ul」などのリストは、中に他要素が入ることが前提です。
もちろん「li」自体も要素間の上下マージンの相殺は発生します。