ちょい休憩記事。あの黄色ノート、ハンバーガーメニューにしてみた。

なぜか昔ほしかった、あの「黄色いノート」

子供のころ、なぜか無性に欲しかった“黄色いノート”ってありませんでしたか？（あるかなぁ。。。ないだろ）

リングで綴じられていて、表紙はくすんだ黄色。
大学ノートよりちょっとオシャレで、大人っぽくて、でもなぜか自分には似合わない気がして手を出せなかった――。

そんな懐かしの黄色いノートを、今の自分のスキルで再現してみたい。
そう思って作ったのが、今回のノート風ハンバーガーメニューです。

ノート風のUI、こんな感じで開きます

今回のメニューは、こんな遊び心を詰め込みました。

• ハンバーガーボタンをクリックすると右側から開く
• 背景には横罫線
• 擬似要素で縫い目風の線を再現
• フォントは“モノスペース”で、ちょっとレトロな印象に
• スマホにも対応したレスポンシブ構成

完成品はこちら▼

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

💡 技術ポイント

ちょっと技術解説もしておきます。

▪ CSSで罫線を再現

background: repeating-linear-gradient(#f7f1aa, #fff9b3 20px, #c1c1c1 21px);

repeating-linear-gradient を使うと、罫線ノート風の背景が簡単に作れます。

▪ 擬似要素で縫い目再現

.menu::before {
  position: absolute;
  right: 10px;
  height: 100%;
  background: repeating-linear-gradient(
    #888 0px,
    #888 5px,
    transparent 5px,
    transparent 15px
  );
}

ノートの“綴じ部分”は ::before に repeating-linear-gradient を組み合わせて縦線っぽく表現しています。

▪ JavaScriptは最小限

hamburger.addEventListener("click", () => {
  menu.classList.toggle("open");
});

🎨 こんな人におすすめ

• デザインの息抜きをしたいとき
• 懐かしい雰囲気をUIに取り入れたいとき
• 自分だけの“思い出UI”を作ってみたいとき

☕ 最後にひとこと

当時学校指定で買えなかった「黄色いノート」。
いまはコードで自由に作れます。

こんな形で、自分の中に眠っていた“欲しかったもの”を形にできるのって、ちょっといいですよね。