手書きWebサイトに動的な仕掛けを加えて、本格的なデザインを目指そう
スマートフォンやPCでWebサイトを見ているとき、右上にある「三本線のボタン」を押すと、すっとメニューが滑り出てきた経験はありませんか？
あの滑らかな動きを実現しているのが「JavaScript（ジャバスクリプト）」というプログラミング言語です。
「HTMLやCSSでサイトを作れるようになったけれど、もう少しプロっぽい・おしゃれなサイトにしたい！」という方に向けて、今回はJavaScriptの基本と、Web制作でよく使われる人気のWebギミックをご紹介します🐾
Webサイトは、主に3つの言語がチームを組んで作られています。
外部ファイルとして呼び出す場合も、HTMLファイル内にコードを入れる場合も、JavaScript（<script>）を書き込むのは一番下（</body> の直前）というルールがあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<!-- ① CSSは <head> 内に書く -->
<style>
/* デザインの定義 */
</style>
</head>
<body>
<!-- ページのコンテンツ -->
<!-- ② JavaScriptは </body> の直前に書く -->
<script>
// 動きの定義
</script>
</body>
</html></body> の直前）に書くの？よく使われるパーツの仕組みとサンプルコードです。HTML・CSS・JavaScriptをセットで記述することで実際に動作します！
画面をすっきり見せつつ、クリックでメニューを引き出し（ドロワー）のように表示させる定番ギミックです。
<button id="js-hamburger" class="hamburger-btn">
<span></span><span></span><span></span>
</button>
<nav id="js-drawer" class="drawer-menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav>/* メニューの初期状態（非表示） */
.drawer-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
/* JSで active クラスが付いた時の見た目（表示） */
.drawer-menu.active {
max-height: 200px;
}const hamburger = document.getElementById('js-hamburger');
const drawer = document.getElementById('js-drawer');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
drawer.classList.toggle('active');
});画像を大きく見せたいときや、重要なお知らせを画面中央にポップアップ表示させる機能です。
<!-- 開くボタン -->
<button id="js-open-modal">お知らせを見る</button>
<!-- モーダル本体（※ </body> の直前に記述するのが鉄則！） -->
<div id="js-modal" class="modal-overlay">
<div class="modal-content">
<p>お知らせの内容が入ります。</p>
<button id="js-close-modal">閉じる</button>
</div>
</div>/* モーダル全体（初期状態は非表示） */
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100vh;
background: rgba(0,0,0,0.5);
display: flex; justify-content: center; align-items: center;
opacity: 0; visibility: hidden;
transition: 0.3s;
}
/* active クラスが付いた時に表示 */
.modal-overlay.active {
opacity: 1;
visibility: visible;
}const openBtn = document.getElementById('js-open-modal');
const closeBtn = document.getElementById('js-close-modal');
const modal = document.getElementById('js-modal');
openBtn.addEventListener('click', () => modal.classList.add('active'));
closeBtn.addEventListener('click', () => modal.classList.remove('active'));
// 背景クリックでも閉じる（UX向上のコツ！）
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.classList.remove('active');
});</body> の直前（外側）に配置するのが鉄則です。親要素にホバーアニメーションなどの `transform` プロパティがついていると、モーダルの表示位置がずれたり画面全体に広がらなくなってしまうためです🐾
FAQ（よくある質問）などで、クリックするとパタパタと開閉するメニューです。長くなりがちなページをコンパクトにまとめられます。
いいえ、それはサトウキビです。
<div class="accordion-item">
<button class="accordion-header">Q. 質問タイトル</button>
<div class="accordion-content">
<p>回答文がここに入ります。</p>
</div>
</div>/* 中身の初期状態（非表示） */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 16px;
}
/* JSで active クラスが付いた時の表示設定 */
.accordion-content.active {
max-height: 200px;
padding: 12px 16px;
}// 複数のヘッダーを取得して処理を設定
const headers = document.querySelectorAll('.accordion-header');
headers.forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
header.classList.toggle('active');
content.classList.toggle('active');
});
});スクロール量を監視して、一定以上スクロールされたら画面右下にふわっと現れる便利なボタンです。（※このページの右下にも配置しています！）
<button id="js-scroll-top" class="page-top-btn">↑</button>/* 画面右下に固定配置（初期状態は非表示） */
.page-top-btn {
position: fixed;
bottom: 24px;
right: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
/* JSで active クラスが付いた時に表示 */
.page-top-btn.active {
opacity: 1;
visibility: visible;
}const topBtn = document.getElementById('js-scroll-top');
// スクロール量を監視（300px以上で表示）
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
topBtn.classList.add('active');
} else {
topBtn.classList.remove('active');
}
});
// クリックしたらスムーズに上部へ移動
topBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});ネットでJavaScriptのサンプルコードを検索する際、知っておくと迷わない重要ポイントがあります。
Web上で書き方を調べると、以下のような $ 記号を使ったコードがよく出てきます。
// これは「jQuery」というライブラリを使った書き方です
$('.menu-btn').click(function() {
$('.nav-menu').toggleClass('active');
});これは「jQuery」というJavaScriptを便利に使うための拡張ツールのコードです。これを動かすには別途読み込み設定が必要になります。
今回ご紹介したような、何も読み込まなくてもそのまま動く標準のJavaScriptは「生JavaScript」や「Vanilla JS（バニラ JavaScript）」と呼ばれます。検索する際は「JavaScript ハンバーガーメニュー VanillaJS」などで探すと、標準のコードが見つかりやすいですよ🐾
コードを書き終えて「うまく動かないな？」と思った時は、以下をチェックしてみてください。
<script>）は </body> の直前に書きましたか？js-xxx）やクラス名は完全に一致していますか？（大文字・小文字も区別されます）active クラスに対するCSSスタイルは記述しましたか？JavaScriptを取り入れると、Webページがぐっとおしゃれになり、使いやすくなります。
まずはサンプルコードのコピペから始めて、HTML・CSS・JavaScriptがどう連動して動くかを体験してみてくださいね🐾