40代高卒者が製造業からIT転職する【ハンバーガーメニュー3】

programming
DMM WEBCAMP

こんにちは、フローです。

前回の続きで、ハンバーガーメニューをやっていきましょう。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【ハンバーガーメニュー2】

🍔ハンバーガーアイコン🍔

あの3本線の作り方を詳しく書いていきましょう。

対象となるHTMLはこちらです。

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

CSSを見ていきましょう。

hamburger

CSS

.hamburger {
  display: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

このCSSセクションは、

「ハンバーガーアイコン」に対するスタイルを定義しています。

・display: none;を非表示にすることを意味します。

・position: relative;は、

相対的に配置することを意味します。

・z-index: 1;は、

他の要素よりも前面に表示されるようにすることを意味します。

・cursor: pointer;は、

マウスカーソルを合わせたときにポインター（手の形）になることを意味します。

これは、この要素がクリック可能なことを示すヒントとして使用されます。

.hamburger .bar

.hamburger .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.hamburger内の.barに対するスタイルを定義しています。

・display: block;は、

ブロックレベル要素として表示することを意味します。

・width: 25px;は、横幅を25pxに設定します。

・height: 3px;は、縦幅を3pxに設定します。

・margin: 5px 0;は、上下のマージンを5pxに設定します。

・background-color: #f0f0f0;は、

背景色を#f0f0f0（灰色）に設定します。

・border-radius: 5px;は、

角丸を5pxに設定します。

・transition: all 0.3s ease-in-out;は、

スタイル変更時のトランジション効果を定義します。

このトランジション効果は、

全てのスタイル変更に適用され、0.3秒かけて緩やかに遷移します。

.hamburger内の.barが、

横幅25px、縦幅3px、灰色の角丸を持ったボタンのような形状になります。

.hamburger.active

.hamburger.active .bar:first-child {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

このCSSセクションは、

.hamburgerが「アクティブ」

（クリックされた）状態の時に、

.hamburger内の.barに対するスタイルを定義しています。

・.hamburger.active .bar:first-childは、

「アクティブ」状態の時に、

.hamburger内の最初の.barに対するスタイルを定義します。

transform: translateY(8px) rotate(45deg);

という行があります。

縦方向に8px移動し、45°回転することを意味します。

・.hamburger.active .bar:nth-child(2)は、

「アクティブ」状態の時に、

.hamburger内の2番目の.barに対するスタイルを定義します。

opacity: 0;という行があります。

不透明度0（完全に透明）に設定することを意味します。

.hamburger.active .bar:last-childは、

「アクティブ」状態の時に、

.hamburger内の最後の.barに対するスタイルを定義します。

transform: translateY(-8px) rotate(-45deg);

という行があります。

縦方向に-8px移動し、-45°回転することを意味します。

.hamburger内の.barが回転し、

消えたり移動したりする効果が実現されます。

レスポンシブデザイン

@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
  }

画面幅が768px以下の時に適用されるスタイルを定義しています。

・@media screen and (max-width: 768px)は、

画面幅が768px以下の時に、

適用されるスタイルを定義するメディアクエリを表します。

・.hamburger { display: block; }は、

.hamburgerをブロックレベル要素として表示することを意味します。

768px以下の時に.hamburgerがブロックレベルとして表示されます。

768pxの理由

スマホなど

小さい画面サイズを持つデバイスを考慮したレスポンシブデザインにおいて、

一般的に使われるブレイクポイント

（画面サイズに応じてレイアウトを変更するポイント）とされています。

iPadなどのタブレット端末が横向きで表示するときの画面サイズに近いため、

タブレット端末を持つユーザーに対する最適なレイアウトを実現することができます。

また、小さい画面を持つスマートフォンなどの端末においても、

最適なレイアウトを実現することができます。

ただし、このブレイクポイントは決まった数値ではなく、

サイトやアプリケーションの目的やターゲットユーザー、

コンテンツなどに応じて適切なブレイクポイントを選定する必要があります。

また、現在のWeb技術の進歩により、

より小さい画面サイズを持つ端末が増えているため、

異なるブレイクポイントを設定して、より適切なレイアウトを実現することもあります。

まとめ

今回はCSSだけの紹介です。

ここにjQueryを使うとメニューが出たり消えたりと、動きをつける事が出来ます。

次回は、jQueryを勉強しましょう。

レッツチャレンジ！