画面最上部の横並びナビゲーション
よくあるサイトデザインの1つ、ページ一番上の横並びメニューの書き方例です。
こういうの
今回の横並びはflexboxを使っています。
まずhtml
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>flex-box</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/base.css"> </head> <body> <header> <nav> <ul class="g-nav-lists"> <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> </nav> </header> <main> メインコンテンツ </main> </body> </html>
このサンプルの場合はフッターや別のナビゲーションがないので<nav>
と<ul>
の構造が変に見えるかもしれませんが、フッターなどで似たようなデザインのナビゲーションを使うときにul単位で記述を共通化できるので私はけっこう好きです。
headerではreset.cssとbase.cssを読み込んでいます。
reset.cssはこちらを使用しています。
古いCSSリセットからはもう卒業!モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス
CSSはこちらです。
作業内容を見やすくする目的でborderやmin-heightなど書いていますが、実際のページを作るときは不要かもしれません。
html { font-size: 62.5%; } body { font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.6em; line-height: 2; } .g-nav-lists { display: flex; justify-content: center; list-style-type: none; background: #ccc; } .g-nav-lists li a { color: #222; text-decoration: none; padding: .8rem 1.5rem; display: block; } .g-nav-lists li a:hover { background: #555; color: #fff; } main { border-right: 1px solid #ccc; border-left: 1px solid #ccc; min-height: calc(100vh - 4.8rem); margin: 0 auto; max-width: 80rem; padding: 2rem; }
今回はheader要素とmain要素の幅を分けています。
headerはアイキャッチ画像を使う場合もページ横幅いっぱいまで簡単に設定でき、mainは読みやすい幅で最大値を指定しています。