【超基本】flexboxでシンプルなグローバルナビゲーションを作成しよう

こんにちは、Webプログラマー見習いのトムです。

今回はブログや企業サイトで良く出てくる「グローバルナビゲーション」をCSSを使って作成してみます。ちなみに私、毎度のことで恐縮ですが、つい先日までグローバルナビゲーションって用語を知りませんでした（汗　今はブログやってますので当然知ってますよ！？）。以下の通りです。

グローバルナビゲーションは、Webサイトの全ページに共通して表示するメニューです。主要なコンテンツへのリンクがまとめられているもので、略して「グロナビ」と呼ばれることもあります。 グローバルナビゲーションがあることで、ユーザーはサイトの概要を把握しやすくなり、目的の情報にたどり着きやすくなります。
https://ferret-one.com/blog/website_globalnavi_pattern

いま見て頂いている私のブログですと、以下の部分を指します。

さて、このグローバルナビゲーションをできる限りシンプルなコードで実装したいと思います（今回実装するコードは、旅行代理店のWebサイトを想定しています）

今回のポイント・・・ナビゲーションをリストで表現し、flexboxでリストを横並びにするのがポイント

グローバルナビゲーションの実装
実装のポイント

グローバルナビゲーションの実装

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Travel SKY VIEW Corp</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <section id="header">
    <h1>旅行代理店 SKY VIEW</h1>
  </section>

  <section id="global-navi">
    <nav class="wrapper">
      <ul>
        <li><a href="#">新着情報(New)</a></li>
        <li><a href="#">今月のお勧めツアー</a></li>
        <li><a href="#">国内旅行特集！</a></li>
        <li><a href="#">アクセス</a></li>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">会社概要</a></li>
      </ul>
    </nav>
  </section>


</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

a {
  text-decoration: none;
  color: white;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

#header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 24px;
  text-align: center;
  background-color: #fff;
}

#global-navi {
  width: 100%;
  background-color: rgb(127, 127, 127);
  color: white;
}

#global-navi ul {
  display: flex;
  text-align: center;
}

#global-navi li {
  list-style: none;
  width: 17%;
  padding: 20px 0px;
  font-size: 14px;
  border-left: 1px solid #222222;
}

#global-navi li:last-child {
  border-right: 1px solid #222222;
}

実装結果

See the Pen global-navi_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

実装のポイント

flexboxの利用・・・#global-navi ul に display:flexを指定し、リストを横並びにする。
liｄlist-style:noneを指定し、箇条の点（先頭の●）を非表示にする
各ナビゲーションの左側に線を引き(border-left)、liの最後の要素（last-child)のみ右側にも線を引く(border-right)
ulにtext-align:centerを指定し、liにwidth(100/6[ナビの数] ≒ 17%)を指定することで、グローバルナビゲーションのリンク文字をセンタリング（↑で引いた線と線の真ん中にリンク文字を配置）します。ちなみにwidthの数値は17%以上であれば6つのリンクが等間隔に並びます。

HTMLやCSSを学習するようになって、flexboxが世の中のサイトに頻繁に使われていることを実感しています。今回作成したグローバルナビゲーションでも、ナビのリンクをリスト(ul と li)で記述し、それを横並びにするためにflexboxを使っています。

以上、flexboxを使ってグローバルナビゲーションの実装例を解説しました！