最近HTMLやCSSの勉強をしているので、架空のかわいいCD告知サイトをつくってみました。
スマートフォンから見るとハンバーガーメニューが表示されるようにしてみました（動画参照）。PC版のリストは技量不足で残念ながら実装できませんでした…。
実際のコードはこちらから。
続きから備忘録的なものです。
—୨୧—
使用した言語
- HTML
- CSS
- JavaScript（Vanilla JS）
—୨୧—
HTMLはメモすべき点がとくになかったので、まずはCSSから。
.nav-wrap {
position: fixed; /* 上に固定する */
top: 0; /* 具体的な位置を数字で調整 */
right: 0;
}top: 0;とright: 0;で右上に固定しています。
.hamburger {
position: relative;
width: 30px; /* ハンバーガーメニューの横の長さ */
height: 60px; /* ハンバーガーメニューの縦の長さ */
appearance: none; /* フォームのデフォルトのデザインを非表示 */
border: 0;
padding: 0;
margin: 0;
background-color: transparent; /* 背景色を透明にする */
}background-colorをtransparentに設定することで、ヘッダーや背景画像と雰囲気をなじませています。
.hamburger span,
.hamburger span::before,
.hamburger span::after {
position: absolute;
display: block; /* ブロックボックスに変更する */
content: ""; /* これを書かないと1本線のみになる */
width: 100%;
height: 2px;
background-color: #FFFFFF;
transition: all ease-in 0.5s; /* 全てのプロパティを0.5秒かけて表示する（ゆっくり始まり、遅く終わる）
}widthの値を大きくするとハンバーガーメニューの棒が横に長くなり、heightの値を大きくするとハンバーガーメニューの線が太くなります。
.hamburger span::before {
top: -10px;
}top: -10px; と設定してあげることで、3本線の中の上の線の位置を定義してあげています。
.hamburger span::after {
bottom: 10px;
}bottom: 10px; と設定してあげることで、3本線の中の下の線の位置を定義してあげています。
—୨୧—
ここからはハンバーガーメニューを開いたときのCSSの処理です。
.hamburger.open span {
background-color: transparent;
}background-color: transparent; で背景色を透明にして、真ん中の線を消します。
.hamburger.open span::before {
top: 0;
transform: rotate(45deg);
}
.hamburger.open span::after {
bottom: 0;
transform: rotate(-45deg);
}ハンバーガーメニューの上下の線を45度（-45度）回転させて×を作ります。
—୨୧—
.nav {
position: fixed; /* 上に固定 */
width: 80%;
height: 100vh;
right: -100%; /* 普段は画面の外にいる */
background-color: #46487d; /* ハンバーガーメニューを開いたときの背景色 */
transition: all ease-in 0.5s; /* 全てのプロパティを0.5秒かけて表示する（ゆっくり始まり、速く終わる）
}ここのwidth: と height: はハンバーガーメニューを開いたときの面積です。
.nav-item {
line-height: 3em;
}行間の調整をします。
.nav.open {
right: 0;
}押されたら隠していたメニューを表示します（-100%から0%へ）。
—୨୧—
続いてJavaScript。
"use strict"; // 厳格化モード
{
const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('open');
nav.classList.toggle('open');
});
}document.querySelector()メソッドで、()内に書かれたCSSセレクターにマッチする要素を取得します。
hamburger.addEventListener()メソッドでターゲット（ここではハンバーガーメニュー）をクリックしたときに関数を実行します。関数の中ではopenクラスのつけ外しの処理をしています。
と、ここまでがハンバーガーメニューの処理でした。
—୨୧—
続いて、PC向けの設定です。JavaScriptは使用しないので、CSSのみになります。
.onlySP {
display: none;
}.onlySPクラスをつけているところは、PC向けには表示しないようにしています。
.headerImg img {
width: 100vw;
z-index: 99%;
}width: 100vw;でヘッダー画像をブラウザの幅いっぱいに表示します。
z-index: 99%;にしているのは、キャッチコピー（h2）をヘッダー画像の上からのせるためです。
h2 {
font-size: 40px;
text-align: left;
line-height: 1.7em;
margin-left: -50vw;
}margin-left: -50vw;でキャッチコピーを左側に寄せています。
PC向けのポイントはこんなところでしょうか。
—୨୧—
その他
この前更新したイラストはこのために描いたのでした（イラスト単体はこちらから）。
今回のサイト作りはイラスト作成を含めて1週間かかりました。気圧とか季節の変わり目に負けなければもうすこし早く完成したかもしれないです…（からだがよわい）。
デザインまわりも、背景画像と文字色がかぶってしまったり、太字にしたら文字がつぶれてしまって可読性に欠けたり… むずかしい… でもデザインって奥深い！と思いました。
背景素材お借りしました。OKUMONO さま