こんにちは、フローです。
今回もハンバーガーメニューについて書いていきたいと思います。

目次

• 1 ハンバーガーメニュー

• 2 <span>タグで線を作る

• 3 まとめ

ハンバーガーメニュー

前回の例はこちら。

美味しそうな名前ですが、食べ物ではありません。

ウェブデザインでよく使用されるナビゲーションメニューの一種で、

小さなスクリーン（スマートフォンやタブレットなど）での使用が一般的です。

メニューアイテムを隠し、トグル機能を提供することで、スペースを節約します。

ハンバーガーメニューは、通常、3つの横線のアイコンで構成されています。

<span>タグを使用して作成され、CSSを使用してスタイルが適用されます。

クリックすると、メニューアイテムが表示され、再びクリックすると非表示になります。

小さなスクリーンに最適ですが、大きなスクリーンでも使用することができます。

ただし、大きなスクリーンでは、通常のナビゲーションメニューを使用することが一般的です。

ハンバーガーメニューを使用する場合は、

ユーザーにとって明確で直感的な方法で、メニューが表示されることを示す必要があります。

また、メニュー項目を隠すことによって、

アクセシビリティの問題が生じる可能性があるため、適切な対策を講じる必要があります。

<span>タグで線を作る

HTMLの例だと

<div class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>

この部分ですね。

デフォルトでインライン要素として定義されており、

コンテンツの一部として表示されます。

そのため、線（バー）が出てくるわけではありません。

しかし、<span>タグを使用して3つの線（バー）を作成し、

CSSスタイルを適用することで、線を作ることができます。

通常、<span>タグには、CSSスタイルが適用され、それによって線の色、幅、高さ、位置などが設定されます。

例えば、以下のようなCSSコードを使用して、3つの線を水平に配置することができます。

.hamburger {
  display: inline-block;
  cursor: pointer;
  padding: 10px 15px;
  position: relative;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease-out;
}

.bar:nth-child(2) {
  margin-top: 5px;
}

.bar:last-child {
  margin-top: 10px;
}

このCSSは、

<span>タグが含まれる要素（例えば、class=”hamburger”）に適用されます。

このスタイルでは、.barクラスを持つ3つの要素（<span>タグ）を定義し、

それらを絶対位置に配置して、水平に並べます。

また、トランジション効果を使用して、

線がクリックされたときにアニメーションされるようにします。

このように、CSSを使用して、<span>タグで線を作成し、スタイルを適用することで、ハンバーガーメニューが表示されるのです。

まとめ

ハンバーガーメニューは、もはや必須の項目と言っていいでしょう。

今は、ほとんどの人がスマホかタブレットでネットを見ていますからね。

見やすいWEB設計には欠かせないものだと思います。

次回も、ハンバーガーメニューを詳しく見ていきましょう。

レッツチャレンジ！