creonメモ

コーディングやデザインの作業メモなど

画面最上部の横並びナビゲーション

f:id:iriarj:20191225083020j:plain よくあるサイトデザインの1つ、ページ一番上の横並びメニューの書き方例です。

こういうの

f:id:iriarj:20191227215820p:plain
横並びナビゲーション

今回の横並びは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は読みやすい幅で最大値を指定しています。