はじめに
今回は、自作のWebサイトにハンバーガーメニューを右上に設置し、スマートフォンでの表示に対応した実装例をご紹介します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
ナビゲーションバーが画面幅に収まりきらず崩れてしまう状況を改善するために、レスポンシブ対応の一環として導入しました。
書こうと思ったきっかけ
きっかけは、自分のスマホでWebサイトを確認したときに、「メニューが重なって読めない」「リンクが押しにくい」と感じたことでした。
PCでは問題なく表示されていたナビゲーションも、スマホではUIの邪魔になっていました。
そこで、「よく見るあの三本線（＝ハンバーガーメニュー）を入れてみよう」と思い、実装に挑戦しました。
ハンバーガーメニューとは？
ハンバーガーメニューは、3本の横線で構成されたアイコンで、クリックやタップすることでメニューの開閉を行う仕組みです。
特にスマートフォンなど画面が狭いデバイスで、ナビゲーションをコンパクトにまとめておきたいときに便利です。
内容について（実装コード紹介）
HTML
<header>
<div class="header-title">
<img src="images/logo1.png" alt="ロゴ" style="height: 50px; margin-right: 10px;">
</div>
<!-- ハンバーガーメニュー -->
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<!-- ナビゲーション -->
<nav class="nav-menu" id="nav-menu">
<a href="index.html">HOME</a>
<a href="greeting.html">代表挨拶</a>
<a href="office.html">事務所案内</a>
<a href="services.html">サービス案内</a>
<a href="pricing.html">料金案内</a>
<a href="contact.html">お問い合わせ</a>
<a href="support-a.html">就労支援A型</a>
</nav>
</header>
CSS（style2.css に追加）
/* ハンバーガーアイコン */
.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 20px;
cursor: pointer;
position: absolute;
top: 25px;
right: 20px;
z-index: 1100;
}
.hamburger span {
height: 3px;
background: #333;
border-radius: 2px;
transition: 0.3s;
}
/* ハンバーガー開閉時のアニメーション */
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ナビゲーションの表示切替 */
.nav-menu {
display: flex;
gap: 15px;
}
@media (max-width: 768px) {
.nav-menu {
display: none;
flex-direction: column;
background: white;
position: absolute;
top: 70px;
right: 20px;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
z-index: 1000;
}
.nav-menu.active {
display: flex;
}
.hamburger {
display: flex;
}
}
JavaScript（HTMLの末尾に追加）
<script>
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
navMenu.classList.toggle('active');
});
</script>
まとめ
ハンバーガーメニューの導入により、スマートフォンなどの小さな画面でも快適に操作できるナビゲーションを実現できました。
特にスマホユーザーの閲覧体験を損なわないUI設計は、今後のサイト制作においても重要だと感じています。
今回は基本的な開閉機能のみでしたが、アニメーションやARIA属性の追加など、さらなる改善にも挑戦していきたいと思います。