HTMLとCSSでつくるハンバーガーメニュー

こんにちは。Minaです。
今回は、HTMLとCSSを使って、ハンバーガーメニュー（ボタンのみ）を作っていこうと思います。
ヘッダーはありません。ハンバーガーメニューのボタンのみの制作になります。
チェックボックスを利用して作ります。
では、さっそく制作にとりかかりましょう。
まずは、HTMLになります。
bodyタグ内に以下のように書きます。

<input type="checkbox" id="hamburger">
<label for="hamburger" class="hamburger-btn">
<span></span><span></span><span></span>
</label>

チェックボックスを作り、idをhamburgerにし、labelのforにチェックボックスのidと同じhamburgerを指定することで、チェックボックスとラベルとを関連付けています。ラベルにはクラス名として、hamburger-btnと命名しています。btnはボタン（button）の略です。
ラベルタグの中にある3つのスパンがハンバーガーメニューを構成する1本の１本の線になります。線は3つ用意するので、スパンも３つ記述しています。
HTMLの記述はこれだけでおしまいです。
続いてcssに移ります。

まずは、ハンバーガーメニューのボタンを作成していきます。

.hamburger-btn{
display : block;
background-color : pink;
width : 50px;
height : 50px;
border-radius : 10px;
cursor : pointer;
position : relative;
top : 20px;
left : calc(100% - 20px);
transform : translateX(-100%);
}

display : block;でラベルをブロック要素にしています。幅と高さを設定するためです。
background-color : pink;で背景色をピンクにしています。お好みで変えてください。
width : 50px;とheight : 50px;で幅と高さを設定しています。ここの値もお好みで調整してください。
border-radius : 10px;で角を丸めています。お好きにどぞー。
cursor : pointer;でマウスがのったときの表示をポインターマークにしています。
position : relative;は次に設定するスパンのための指定になります。
top : 20px;で上から20pxの位置に配置しています。
left : calc(100% - 20px);とtransform : translateX(-100%);で右から20pxの位置に配置しています。calcは計算してくれる関数になります。単にleft : 100%だと行き過ぎて画面から見えなくなってしまうので、translateX(-100%)で自分の幅分戻しています。さらに、calc(100% - 20px);とすることで、20pxぶん余白を空けています。

続いて、1本１本の線を表すスパンの設定に入ります。
最初に３つのスパンに共通した設定を行います。

.hamburger-btn span{
display : block;
background-color : #fff;
width : 30px;
height : 4px;
border-radius : 5px;
position : absolute;
left : 10px;
transition : 0.4s;
}

display : block;でスパンをブロック要素にしています。幅と高さを設定するためです。
background-color : #fff;で背景色を白にしています。お好みで変えてください。
width : 30px;とheight : 4px;で幅と高さを指定しています。ここの値もお好みで調整してください。
border-radius : 5px;で線の角を丸めています。お好きにどぞー。
position : absolute;で親要素であるhamburger-btnクラスを基点とした距離を決めています。left : 10px;で基点から10px左に配置しています。
topの値は、各線によって違うので、ここでは記述しません。
transition : 0.4s;は、このあと、線を動かすときにかける時間になります。

では、続いて、スパンの各々の設定に移ります。

.hamburger-btn span:nth-of-type(1){
top : 12px;
}

.hamburger-btn span:nth-of-type(2){
top : 23px
}

.hamburger-btn span:nth-of-type(3){
top : 34px;
}

スパンのそれぞれの設定を行うにはnth-of-type(n)の書き方が便利です。
１番目は、nth-of-type(1)、２番目は、nth-of-type(2)、３番目は、nth-of-type(3)になります。
それぞれの位置を親要素を基点として、上から12px、23px、34pxの位置に配置しています。ここら辺の値の調整は、もう少し、線と線の間隔を狭めたいと思うかもなので、お任せします。

続いて、チェックされたときの線の動きになります。

#hamburger:checked ~ .hamburger-btn span:nth-of-type(1){
top : 50%;
transform : translateY(-50%) rotate(45deg);
}

#hamburger:checked ~ .hamburger-btn span:nth-of-type(2){
opacity : 0;
}

#hamburger:checked ~ .hamburger-btn span:nth-of-type(3){
top : 50%;
transform : translateY(-50%) rotate(-45deg);
}

２本目の線は、opacity : 0;で消しています。
１本目と３本目の線を動かしています。
top : 50%;とtransform : translateY(-50%)の設定で線の位置を中央に持ってきています。50%だけだと自分の高さも入ってしまうので、translateY(-50%)で自分の高さを半分引いています。これで中央に配置できます。
rotate(45deg)とrotate(-45deg)で、それぞれ線を回転させています。
以上が動きの部分です。

最後に、チェックボックスを見えなくして触れなくしましょう。

#hamburger{
position : absolute;
opacity : 0;
z-index : -1;
}
opacity : 0;で見えなくして、z-index : -1;で触れなくしています。
ただ、このz-index : -1;は今回の場合、触れなくなりますが、hamburger-btnクラスをposition : fixed;にした場合は、触れられてしまいます。ただ、通常は、ヘッダーが乗るはずなので、z-index : -1;で触れなくなると思います。
不安な場合は、z-index : -1;を使うのではなく、right : 100%などと書いて、どこかに飛ばすのが良いかと思います。

おつかれさまでした。
以上でハンバーガーメニュー（ボタンのみ）の制作は完了です。