【Webサイト制作】簡単！ハンバーガーボタンの作り方【前編】

URLをコピーしました！

ティアラ

ハンバーガーボタンってどうやって作るの？初心者でも作れますか？

suzuto

簡単に作れるよ。しかもカスタマイズしやすいように作る方法を解説します！

こんにちは、suzutoです。本日も記事を読んでいただきありがとうございます。

Webサイト制作で必ず出てくるのがハンバーガーボタン。ということで今回はハンバーガーボタンの作り方を初心者向けに簡単に解説していきます。

意外と難しそうに見えて簡単に作ることができるのでぜひ参考にしてください。

ちなみに今回は「HTML」と「CSS」のみで簡単に作ります。

完成形は以下になります。

See the Pen ハンバーガーボタン by スズキトシヤ (@agpslbps-the-styleful) on CodePen.

ベーシックな形の「ハンバーガーボタン」です。ちなみにハンバーガーボタンを作る方法は色々あるのですが、ボクが一番簡単だと感じた方法を今回はご紹介いたしますね。

それでは解説していきます。

本記事の内容

ハンバーガーボタンの作り方

まずはHTMLから書いていきます。

ハンバーガーボタンのHTML

全体のコードは以下になります。シンプルでしょ？w

<div class="burger">
        <span></span>
        <span></span>
        <span></span>
    </div>

まずは、クラス名「burger」で箱を用意します。これが外枠になるのです。

<div class="burger"></div>

次に、ハンバーガーボタンの線が「spanタグ」になります。

3本線のハンバーガーメニューなので、spanタグをクラス「burger」の中に3つ作ります。

<div class="burger">
        <span></span>
        <span></span>
        <span></span>
    </div>

以上でHTMLは完成です。

ハンバーガーボタンのCSS

HTMLが完了したらCSSを書いていきます。

CSSの全体は以下になります。

.burger {
        width: 50px;
        height: 50px;
        border: 2px solid #000;
        position: fixed;
        top: 5%;
        left: 5%;
        cursor: pointer;

        > span {
            width: 80%;
            height: 4px;
            border-radius: 4px;
            background-color: #000;
            position: absolute;
            inset: 0;
            margin: auto;
        }

        > span:nth-child(1) {
            top: -40%;
        }

        > span:nth-child(3) {
            top: 40%;
        }
    }

まずはクラス名「burger」の幅と高さを決めます。今回は幅と高さを「50px」にしました。さらに、外側に枠線をつけるため、borderで外枠線を作ります。

.burger {
width: 50px;
height: 50px;
border: 2px solid #000;
}

ハンバーガーボタンは画面に固定にしたいので、position: fixed;にして、画面全体のトップから5％、左から5％の位置に配置しました。

position: fixed;
top: 5%;
left: 5%;

ボタンにカーソルをのせた時にポインターが表示されるようにします。

cursor: pointer;

cursor: pointer;
カーソルを要素にのせた時にポインターが表示されるようにする。ユーザーにボタンであることを伝える役割がある。

次にハンバーガーメニューの中の3本線（span）のスタイルを当てます。

spanタグを1本作ってそれをベースに他の2本のポジションをずらして作るイメージです。

span {
            width: 80%;
            height: 4px;
            border-radius: 4px;
            background-color: #000;
            position: absolute;
            inset: 0;
            margin: auto;
        }

まずベースとなる1本のスタイルを作っていきます。

spanタグの幅を親要素のクラス「burger」に対して80％幅に指定します。ハンバーガーボタンの1本の線の幅を4px、少し角を丸めて色を黒色にしていきます。

width: 80%;
height: 4px;
border-radius: 4px;
background-color: #000;

さらに親要素に対して上下左右中央寄せをしたいので以下を指定します。

position: absolute;
inset: 0;
margin: auto;

positionプロパティを指定している親要素を起点にして水平垂直中央揃えすることができます。

position: absolute;
inset: 0;
margin: auto;

ベースのspanができたら、これを起点に上下に線を作ります。まずはから「上方向−40％」の位置（中心から上方向）に一つ配置します。

span:nth-child(1) {
top: -40%;
}

さらに下方向40%（中心から下方向）に一つ配置します。

span:nth-child(3) {
top: 40%;
}

最初に作ったど真ん中のspanを起点に上の線　→ 　span:nth-child(1)
最初に作ったど真ん中のspanを起点に下の線　→ 　span:nth-child(3)

以上で完成です。お疲れ様でした。

【まとめ】ハンバーガーボタンの作り方

全体のコードのおさらいです。

<div class="burger">
        <span></span>
        <span></span>
        <span></span>
    </div>

.burger {
        width: 50px;
        height: 50px;
        border: 2px solid #000;
        position: fixed;
        top: 5%;
        left: 5%;
        cursor: pointer;

        > span {
            width: 80%;
            height: 4px;
            border-radius: 4px;
            background-color: #000;
            position: absolute;
            inset: 0;
            margin: auto;
        }

        > span:nth-child(1) {
            top: -40%;
        }

        > span:nth-child(3) {
            top: 40%;
        }
    }

ハンバーガーボタンの線の幅の幅や位置を「％」で指定することでハンバーガーボタン全体の大きさが変わってもメンテナンスしやすく線の大きさなど調節しやすくなります。

今回はボタンのレイアウトだけですが、次回はこのハンバーガーボタンを実際に起動できるようにしていきたいと思います。

ハンバーガーボタンの見た目だけは簡単にできますのでぜひ試してみてください。