ulタグを用いた横並びナビゲーションの作り方を紹介します。
Webページへのリンクをまとめたものをナビゲーションと呼び、そのなかでも主要コンテンツをまとめたものをグローバルナビゲーションと呼びます。
これらは往々にしてページ上部に横並びで配置されることが多いです。
ここでは横並びのナビゲーションの作成方法を順番に確認していきましょう。
liタグは通常縦に並んでゆきます。これを解除し、回り込ませることで横並びを実現します。
liタグにwidthとfloatを指定し、ボックスを横に並べる方法と同様のやり方でレイアウトします。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ulナビゲーション</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="navi01"> <li>項目01</li> <li>項目02</li> <li>項目03</li> <li>項目04</li> <li>項目05</li> </ul> </body> </html>
@charset "UTF-8"; body { background-color: gray; margin: 0; font-size: 40px; } #navi01 { list-style: none; /* 行頭記号 */ margin: 0; /* 外側の余白 */ padding: 0; /* 内側の余白 */ background-color: red; } #navi01 li { background-color: blue; width: 150px; float: left; /* 回り込み */ }
ナビゲーションは通常のテキストと違い、ボタンのようにデザインされることが多くあります。そこで問題になるのが上下中央にテキストを配置する方法です。
vertical-alignが上下中央寄せをするための要素ですが、これはテーブルのセルであるth、tdタグで使われるものになります。
そこで、aタグのスタイルシートとしてdisplayにtable-cellを指定することで、セルと同様の動きをするように指定し、vertical-alignの設定が効くようにします。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ulナビゲーション</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="navi01"> <li><a href="#">項目01</a></li> <li><a href="#">項目02</a></li> <li><a href="#">項目03</a></li> <li><a href="#">項目04</a></li> <li><a href="#">項目05</a></li> </ul> </body> </html>
@charset "UTF-8"; body { background-color: gray; margin: 0; font-size: 20px; } #navi01 { list-style: none; margin: 0; padding: 0; background-color: red; } #navi01 li { background-color: blue; height: 60px; width: 150px; float: left; display: table; /* 表示形式 */ } #navi01 li a { background-color: green; color: black; /* 文字色 */ text-decoration: none; /* 下線 */ display: table-cell; /* 表示形式 */ text-align: center; /* テキスト横位置 */ vertical-align: middle; /* 縦位置 */ }
ナビゲーションにマウスの挙動による表示切替を入れると、より操作感がでます。
たとえば、マウスカーソルが押下可能な領域に差し掛かると色が変わるようにすることです。
具体的には疑似クラス(:hover、:activeなど)を使って、そのデザインを制御することになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ulナビゲーション</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="navi01"> <li><a href="#">項目01</a></li> <li><a href="#">項目02</a></li> <li><a href="#">項目03</a></li> <li><a href="#">項目04</a></li> <li><a href="#">項目05</a></li> </ul> </body> </html>
@charset "UTF-8"; body { background-color: gray; margin: 0; font-size: 20px; } #navi01 { list-style: none; margin: 0; padding: 0; background-color: red; } #navi01 li { background-color: blue; height: 60px; width: 150px; float: left; display: table; } #navi01 li a { background-color: green; color: black; text-decoration: none; display: table-cell; text-align: center; vertical-align: middle; } /* マウスオーバー */ #navi01 li a:hover { background-color: yellow; } /* クリック時 */ #navi01 li a:active { background-color: purple; }