コピペ可 初めてでもできるハンバーガーメニュー前編【第20話】

WordPress学習記録

[PR] 筆者が受講しているスクールはこちら

RaiseTechはAWS・Java・副業・デザイン・マーケティングに特化し現場レベルの学習ができるエンジニアリングスクールです。カリキュラムはもちろんあらゆるサポートが充実していることも特徴の1つです。

RaiseTechの無料説明会に参加してみる 

コピペコードだけ欲しい方は以下目次のコピペコードまで飛んでください！

ハンバーガーメニュー完成例

ハンバーガーメニューの作り方はいろいろありますしどれが正解というのもありません。今回は私が初めて作った時のものをご紹介します。

See the Pen bGBoLrm by m (@mizuki51) on CodePen.

0.5倍にして見ていただけるとわかりやすいかと思います。
それでは、HTML→CSS→JavaScript (jQuery)の順に説明していきます！

ハンバーガーメニューHTML部分

<header class="header">

 <div class="header__left">
 <h1>ハンバーガーメニュー</h1>
 </div>

<div class="header__right">

 <button class="header__right__hamburger">
 <span class="header__right__hamburger__line"></span>
 <span class="header__right__hamburger__line"></span>
 <span class="header__right__hamburger__line"></span>
 </button>

 <div class="header__right__menu">
 <ul>
 <li><a href="#">メニュー1</a></li>
 <li><a href="#">メニュー2</a></li>
 <li><a href="#">メニュー3</a></li>
 <li><a href="#">メニュー4</a></li>
 </ul>
 </div>

</div>
</header>

それでは色部分ごとの説明とカスタマイズ方法について説明していきます。枠の色とコードマーカー色が同じです。

黄色部分

ヘッダーの左側のかたまりになります。divタグの中にh1タグやimgタグ、aタグなどを入れていきました。

赤部分

ハンバーガーの3本線を作る枠組みになります。このHTMLを組んだだけでは何も画面に出ません。
実際に線を出すにはCSSで装飾していくことが必要です。

基本は3本線が主流ですが2本線にしたい場合は<span>〜</span>を1つ消してください。

青部分

ハンバーガーボタンを押した時に出てくるメニュー部分になります。
基本のメニューの作り方と変わりはありません。

メニューは飛び先のリンクが埋め込まれていることがほとんどなのでaタグを入れていますがリンクがいらない場合は<a>, </a>の部分を消すだけでOKです。
またメニュー項目数を変えたい場合は同じものをコピペで下に増やしたり<li>〜</li>を削除するだけでOKです。

今回はデモなのでリンク先を＃というダミーにしてあります。ローカルで模写をしたい時やサイトをコーディングしたいときは使いやすいダミーリンクなので使ってみてください！

HTMLだけでプレビューした場合はこのような画面になります。

スポンサーリンク

CSS初期値をリセット

CSSはかなり長くなりますしカスタマイズの幅もとても広いです。
順番に見ていきます。

リセットCSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}


html{
font-size: 62.5%;
}

こちらはハンバーガーメニューに限らず私がいつもCSSの冒頭で記述しているものになります。
いちいち考えるのがめんどくさい！何を指定するべきかわからない！という方はリセットCSSで検索するといろんな種類のものが出てくるのでそちらをディレクトリの中に入れてHTMLのhead部分でlinkで読み込ませるという方法もありです。

私がよく使うリセットCSSはdestyle.cssです。全てをリセットしてくれるのでコーディングしやすいです。

私のオリジナルのリセットCSSを指定してフロント側を読み込むとこんな感じです。

ヘッダーのスタイリング

.header{
width: 100%; //画面幅いっぱいに表示する
height: 70px; //ヘッダーの高さ
display: flex;
justify-content: space-between;
background-color: bisque; //背景色
}

ヘッダー全体のスタイル指定です。
初心者の私が理解しづらかった黄色字の2行について説明します。

ヘッダー内を左側パーツ、右側パーツに分けたいためdisplay: flex;を指定
左側パーツを左端揃え＆右側パーツを右端揃えにするためjustify-content: space-between;を指定（display: flex; が指定されている時のみ有効）

display: flex;はハンバーガーメニューに限らずさまざまな場面で使うことがある便利なプロパティなので学習しておくことをお勧めします。

Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com

こちらのゲームが分かりやすかったのでぜひ挑戦してみてください！

ヘッダーのスタイルを指定するとこんな感じです。

ヘッダー左部分のスタイリング

.header{
 &__left{
  margin-left: 16px;
  h1{
   line-height: 70px;
   font-size: 1.8rem;
  }
 }
}

赤字部分line-heightは行間の広さを決めるプロパティです。h1をヘッダーの高さの中央に配置したいのでヘッダーで指定した高さと同じ値を指定するとヘッダー内の上下中央揃えにすることができます。

ですのでヘッダーの高さを50pxにした場合はline-heightに50pxを指定すると上下中央揃えにすることができます。

以上のCSSを指定した時のフロント側はこのようになります。

前編はここまでです。続きはこちらから↓

コピペ可 初めてでもできるハンバーガーメニュー後編【第21話】
コピペでプログラミング初心者でも簡単にハンバーガーメニューを実装できる！HTML+CSS+jQueryを使って実際にプログラミング初心者が初めてハンバーガーメニュー作りに挑戦した時の詳しいコーディング方法についてご紹介しています。
univ-programmer.com
2021.05.09

ハンバーガーメニューコピペ用コード

<header class="header">
 <div class="header__left">
  <h1>ハンバーガーメニュー</h1>
 </div>

 <div class="header__right">

  <button class="header__right__hamburger">
   <span class="header__right__hamburger__line"></span>
   <span class="header__right__hamburger__line"></span>
   <span class="header__right__hamburger__line"></span>
  </button>

  <div class="header__right__menu">
   <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
   </ul>
  </div>
 </div>

</header>

@charset "utf-8";

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 text-decoration: none;
 list-style: none;
}

html{
 font-size: 62.5%;
}

.header{
 width: 100%;
 height: 70px;
 display: flex;
 justify-content: space-between;
 background-color: bisque;
 &__left{
  margin-left: 16px;
  h1{
   line-height: 70px;
   font-size: 1.8rem;
  }
 }
 &__right{
  &__hamburger{
   position: relative;
   width: 70px;
   height: 70px;
   right: 20px;
   background-color: bisque;
   border: none;
   cursor: pointer;
   &__line{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: 30px;
    height: 2px;
    transition: all 0.3s;
    background-color: black;
    &:nth-of-type(1){
     top: 20px;
    }
    &:nth-of-type(2){
     top: 34px;
    }
    &:nth-of-type(3){
     top: 48px;
    }
   }
   &.is-open{
    .header__right__hamburger__line{
     transition: all 0.3s;
     &:nth-of-type(1){
      transform: rotate(45deg);
      right: 20px;
      top: 35px;
     }
     &:nth-of-type(2){
      width: 0;
     }
     &:nth-of-type(3){
      transform: rotate(-45deg);
      right: 20px;
      top: 35px;
     }
   }
  }
 }
 &__menu{
  display: none;
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  ul{
   li{
    a{
     display: block;
     padding: 1.4rem 0 1.4rem 1.8rem;
     font-size: 1.4rem;
     background-color: chocolate;
     color: bisque;
     &:hover{
      background-color: rgb(255, 234, 209);
      color: chocolate;
     }
    }
   }
  }
 }
}
}
$(function() {
 $('.header__right__hamburger').click(function(){
   $(this).toggleClass('is-open');
   $('.header__right__menu').slideToggle(200);
 });
});

最後に

今回はHTMLとハンバーガーメニュースタイリング前までの準備段階までのスタイリングでした。この辺は基礎知識でできることも多かったですね。

後編ではハンバーガーボタンのスタイリングやメニューの作り方、jQueryを使って動きづけについてご紹介していますのでぜひ合わせて参考にしてみてください。

最後までお読みいただきありがとうございました。

後編はこちらから↓

https://univ-programmer.com/week7-2/

スポンサーリンク

コメント

タイトルとURLをコピーしました