ナビゲーションボタンを作る際のポイント
- マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み
- 文字以外の領域面ををクリック可能にするためには「display: block」が必須
- 高さは、「line-height」か「padding」で指定する、
「li」に padding を指定しても「li a」に指定がなければ打ち消したことになるので領域が広がりません。
- borderを指定する際は「幅の指定はli」borderの指定は「li a」にする
縦並びのナビゲーション
例
<body> <ul> <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> </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; /* 下線を消す */ color: #222; } img { border: 0; } img, input { vertical-align: bottom; } /*レイアウト*/ ul { width: 200px; } li { width: 200px; height: 50px; text-align: center; } ul li#new a { display: block; background-color: #FE0000; height: 50px; line-height: 50px; color: #FFF; } ul li#info a { display: block; background-color: #FEA500; height: 50px; line-height: 50px; color: #FFF; } ul li#item a { display: block; background-color: #9ACD32; height: 50px; line-height: 50px; color: #FFF; } ul li#shop a { display: block; background-color: #32CD33; height: 50px; line-height: 50px; color: #FFF; }
横並びのナビゲーション
ブロックレベル要素は基本的には縦に並んでいくので、
「float」
というプロパティを使用します。
/* 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; /* 下線を消す */ color: #222; } img { border: 0; } img, input { vertical-align: bottom; } /*レイアウト*/ ul { width: 800px; margin: 50px auto 0; } li { width: 200px; height: 50px; text-align: center; float: left; } ul li a { display: block; height: 50px; line-height: 50px; color: #FFF; } ul li#new a { background-color: #FE0000; } ul li#info a { background-color: #FEA500; } ul li#item a { background-color: #9ACD32; } ul li#shop a { background-color: #32CD33; } ul li#new a:hover, ul li#info a:hover, ul li#item a:hover, ul li#shop a:hover { background-color: #FFF; } ul li#new a:hover { color: #FE0000; border: 1px solid #FE0000; } ul li#info a:hover { color: #FEA500; border: 1px solid #FEA500; } ul li#item a:hover { color: #9ACD32; border: 1px solid #9ACD32; } ul li#shop a:hover { color: #32CD33; border: 1px solid #32CD33; }