2022/3/18 （更新日: 2022/3/19）

【Flexbox】デスクトップでは横、スマホでは縦に並ぶナビゲーションの作り方

CSS

デスクトップでは横並び、スマホでは縦並びになるナビゲーションってどうやって作るの？

そんな疑問にお答えします。

ナビゲーションのレイアウトではハンバーガーメニューがよく使われますが、スマホ時は縦並びというのも見られるパターンです。

こちらのようなタイプです。

今回はこれを作ります。

1 デスクトップでは横、スマホでは縦に並ぶナビゲーション
- 1.1 HTML
- 1.2 CSS

デスクトップでは横、スマホでは縦に並ぶナビゲーション

HTML

<header class="header">
  <div class="header-inner inner">
    <nav class="header-nav">
      <ul class="header-nav-list">
        <li class="header-nav-item">
          <a class="header-nav-item-link" href="#">Home</a>
        </li>
        <li class="header-nav-item">
          <a class="header-nav-item-link" href="#">About</a>
        </li>
        <li class="header-nav-item">
          <a class="header-nav-item-link" href="#">Service</a>
        </li>
        <li class="header-nav-item">
          <a class="header-nav-item-link" href="#">Works</a>
        </li>
        <li class="header-nav-item">
          <a class="header-nav-item-link" href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

基本的な作りはこちらの記事と同じです。

【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】

ヘッダーの中にインナー、インナーの中にナビゲーションを配置しています。

CSS

.inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: content-box;
}

.header {
  background: #00CC99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-nav-list {
  display: flex; /* 横並び */
  justify-content: space-around; /* 均等配置 */
}

.header-nav-item-link {
  display: block;
  color: #fff;
  font-size: 20px;
  height: 80px;
  line-height: 80px;
}

@media screen and (max-width: 767px) {
  .header-nav-list {
  flex-direction: column; /* 縦並び */
  align-items: center; /* 中央寄せ */
  }
}

デスクトップで横並びにするために「display: flex;」、そして「justify-content: space-around;」で均等配置にしています。

次にスマホで縦並びにするために「flex-direction: column;」と指定します。

また中央に配置するために「align-items: center;」も指定します。

ここでのポイントは「align-items」が制御する方向の変化です。

💡ポイント！　