HTML/CSSだけで動くドロワーメニューの作り方
HTMLとCSSだけで動作するドロワーメニューの作り方を紹介します。JavaScriptを使用せず、チェックボックスとlabel要素を利用してメニューの開閉を実現するシンプルなサンプルです。CSSだけで動作するため、軽量なサイトやJavaScriptを使わずに実装したい場面でも利用できます。
「メニューを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、閉じるボタンや背景部分をクリックするとメニューを閉じられます。基本的なドロワーメニューの仕組みを理解したい方や、HTML/CSSだけでUIを実装したい方にもおすすめです。
サンプルコードはHTMLとCSSのみで構成されているため、そのままコピーして利用できます。メニュー項目や色、幅、アニメーション速度なども自由に変更でき、自分のサイトに合わせてカスタマイズできます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「メニューを開く」をクリックすると左側からドロワーメニューが表示されます。JavaScriptを使用せず、HTMLとCSSだけで開閉できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけで動くドロワーメニュー</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ドロワーメニュー全体 -->
<div class="html-css-drawer-menu_container">
<!-- ドロワーメニューを開く操作エリア -->
<div class="html-css-drawer-menu_wrap">
<!-- 操作エリアのタイトル -->
<div class="html-css-drawer-menu_title">
HTML/CSSだけで動くドロワーメニュー
</div>
<!-- 操作エリアの説明文 -->
<p class="html-css-drawer-menu_text">
JavaScriptを使用せず、HTMLとCSSだけでドロワーメニューを開閉できます。
</p>
<!-- ドロワーメニューを開くボタン -->
<label
for="html-css-drawer-menu-toggle"
class="html-css-drawer-menu_open">
メニューを開く
</label>
</div>
<!-- 開閉状態を管理するチェックボックス -->
<input
type="checkbox"
id="html-css-drawer-menu-toggle"
class="html-css-drawer-menu_check">
<!-- 背景クリックでドロワーメニューを閉じる領域 -->
<label
for="html-css-drawer-menu-toggle"
class="html-css-drawer-menu_overlay">
</label>
<!-- ドロワーメニュー本体 -->
<aside class="html-css-drawer-menu_drawer">
<!-- ドロワーメニュー上部 -->
<div class="html-css-drawer-menu_header">
<!-- ドロワーメニューのタイトル -->
<div class="html-css-drawer-menu_heading">
メニュー
</div>
<!-- ドロワーメニューを閉じるボタン -->
<label
for="html-css-drawer-menu-toggle"
class="html-css-drawer-menu_close"
aria-label="閉じる">
×
</label>
</div>
<!-- ナビゲーションメニュー -->
<nav
class="html-css-drawer-menu_nav"
aria-label="メインメニュー">
<!-- ホームへのリンク -->
<a
class="html-css-drawer-menu_link"
href="#home">
ホーム
</a>
<!-- サービスへのリンク -->
<a
class="html-css-drawer-menu_link"
href="#service">
サービス
</a>
<!-- お知らせへのリンク -->
<a
class="html-css-drawer-menu_link"
href="#news">
お知らせ
</a>
<!-- お問い合わせへのリンク -->
<a
class="html-css-drawer-menu_link"
href="#contact">
お問い合わせ
</a>
</nav>
</aside>
</div>
</body>
</html>
/* すべての要素 */
*,
*::before,
*::after{
box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}
/* ページ全体 */
body{
margin:0; /* ページ外側の余白をなくす */
padding:40px 20px; /* 上下40px・左右20pxの余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体のフォント */
}
/* ドロワーメニュー全体 */
.html-css-drawer-menu_container{
width:100%; /* 利用可能な横幅いっぱいへ広げる */
}
/* ドロワーメニューを開く操作エリア */
.html-css-drawer-menu_wrap{
width:100%; /* 画面幅に合わせて縮小する */
max-width:720px; /* 操作エリアの最大横幅 */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 操作エリア内側の余白 */
border:1px solid #e5e7eb; /* 操作エリアの枠線 */
border-radius:18px; /* 操作エリアの角丸 */
background:#f8fafc; /* 操作エリアの背景色 */
text-align:center; /* 内容を中央揃え */
}
/* 操作エリアのタイトル */
.html-css-drawer-menu_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* 操作エリアの説明文 */
.html-css-drawer-menu_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
}
/* ドロワーメニューを開くボタン */
.html-css-drawer-menu_open{
display:inline-block; /* ボタンとして表示 */
padding:12px 28px; /* ボタン内側の上下・左右余白 */
border-radius:10px; /* ボタンの角丸 */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font-size:16px; /* ボタンの文字サイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* 開閉状態を管理するチェックボックス */
.html-css-drawer-menu_check{
position:fixed; /* ページレイアウトへ影響しない位置へ配置 */
width:1px; /* チェックボックスの横幅を最小化 */
height:1px; /* チェックボックスの高さを最小化 */
opacity:0; /* チェックボックスを透明にする */
pointer-events:none; /* チェックボックス本体の操作を無効化 */
}
/* ドロワーメニュー表示中の背景 */
.html-css-drawer-menu_overlay{
position:fixed; /* 画面全体へ固定 */
inset:0; /* 上下左右を0にして画面全体へ広げる */
z-index:9998; /* ドロワーメニューより背面へ表示 */
background:rgba(15,23,42,.55); /* 背景色。.55を大きくすると暗くなる */
opacity:0; /* 初期状態では透明 */
visibility:hidden; /* 初期状態では操作できないようにする */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:
opacity .3s,
visibility .3s; /* 0.3秒で背景の表示状態を切り替える */
}
/* ドロワーメニュー本体 */
.html-css-drawer-menu_drawer{
position:fixed; /* 画面左側へ固定 */
top:0; /* 画面上端へ配置 */
left:0; /* 画面左端へ配置 */
z-index:9999; /* 背景より前面へ表示 */
width:320px; /* ドロワーメニューの横幅 */
max-width:85%; /* 画面幅の85%を超えないようにする */
height:100vh; /* 画面の高さ全体へ広げる */
padding:24px; /* ドロワーメニュー内側の余白 */
background:#ffffff; /* ドロワーメニューの背景色 */
box-shadow:8px 0 30px rgba(0,0,0,.15); /* ドロワーメニュー右側の影 */
transform:translateX(calc(-100% - 40px)); /* 影を含めて画面左外へ隠す */
transition:transform .3s; /* 0.3秒でドロワーメニューを開閉する */
overflow-y:auto; /* 内容が長い場合は縦スクロール可能にする */
}
/* チェックボックスが選択された時の背景 */
.html-css-drawer-menu_check:checked
~ .html-css-drawer-menu_overlay{
opacity:1; /* 背景を表示 */
visibility:visible; /* 背景を操作可能にする */
}
/* チェックボックスが選択された時のドロワーメニュー */
.html-css-drawer-menu_check:checked
~ .html-css-drawer-menu_drawer{
transform:translateX(0); /* ドロワーメニューを画面内へ表示 */
}
/* ドロワーメニュー上部 */
.html-css-drawer-menu_header{
display:flex; /* タイトルと閉じるボタンを横並びにする */
align-items:center; /* 縦方向の中央へ揃える */
justify-content:space-between; /* 左右へ分けて配置 */
gap:16px; /* タイトルと閉じるボタンの間隔 */
margin-bottom:24px; /* 下側24pxの余白 */
}
/* ドロワーメニューのタイトル */
.html-css-drawer-menu_heading{
margin:0; /* 外側余白をなくす */
color:#111827; /* タイトルの文字色 */
font-size:28px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
}
/* ドロワーメニューを閉じるボタン */
.html-css-drawer-menu_close{
display:flex; /* ×印を中央へ配置 */
flex-shrink:0; /* ボタンが縮まないようにする */
align-items:center; /* ×印を縦中央へ配置 */
justify-content:center; /* ×印を横中央へ配置 */
width:44px; /* ボタンの横幅 */
height:44px; /* ボタンの高さ */
border-radius:50%; /* ボタンを円形にする */
background:#111827; /* ボタンの背景色 */
color:#ffffff; /* ×印の文字色 */
font-size:24px; /* ×印の文字サイズ */
font-weight:700; /* ×印を太字にする */
line-height:1; /* ×印の行間を詰める */
cursor:pointer; /* マウスカーソルを指型へ変更 */
}
/* ナビゲーションメニュー */
.html-css-drawer-menu_nav{
display:flex; /* メニュー項目を並べる */
flex-direction:column; /* メニュー項目を縦並びにする */
gap:12px; /* メニュー項目同士の間隔 */
}
/* ナビゲーションリンク */
.html-css-drawer-menu_link{
display:block; /* リンク全体をクリック可能にする */
padding:16px; /* リンク内側の余白 */
border-radius:10px; /* リンクの角丸 */
background:#f3f4f6; /* リンクの背景色 */
color:#111827; /* リンクの文字色 */
font-size:16px; /* リンクの文字サイズ */
font-weight:700; /* リンク文字を太字にする */
line-height:1.5; /* リンク文字の行間 */
text-decoration:none; /* リンクの下線を非表示 */
}
/* ナビゲーションリンクへマウスを重ねた状態 */
.html-css-drawer-menu_link:hover{
background:#dbeafe; /* マウスを重ねた時の背景色 */
color:#1d4ed8; /* マウスを重ねた時の文字色 */
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* スマートフォン用のページ全体 */
body{
padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
}
/* スマートフォン用の操作エリア */
.html-css-drawer-menu_wrap{
margin:24px auto; /* 上下24pxの余白へ変更 */
padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
}
/* スマートフォン用のドロワーメニュー */
.html-css-drawer-menu_drawer{
padding:24px 18px; /* 上下24px・左右18pxへ余白を調整 */
}
}
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。JavaScriptを使用せず、HTMLのチェックボックスとlabel要素、CSSのセレクターを利用してドロワーメニューの開閉を実現しています。軽量で導入しやすく、JavaScriptを利用できない環境でも基本的なドロワーメニューを実装できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはドロワーメニュー本体、開くボタン、閉じるボタン、背景オーバーレイ、メニュー項目を配置するファイルです。表示するメニュー項目やタイトル、文章を自由に編集できます。
style.cssはドロワーメニュー全体のデザインを設定します。背景色、文字色、横幅、余白、角丸、影、開閉アニメーションなどの見た目を変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置してください。配置後はsample/index.htmlをブラウザで開くだけで利用できます。「メニューを開く」をクリックすると左側からドロワーメニューが表示され、「×」ボタンまたは背景部分をクリックすると閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、メニュー項目、リンク先を変更できます。style.cssではドロワーメニューの横幅、背景色、文字色、余白、角丸、影、背景オーバーレイの色、開閉アニメーション速度などを自由に調整できます。
数値調整
style.cssの「width:320px;」はドロワーメニューの横幅です。値を変更するとメニュー全体の幅が変わります。
style.cssの「max-width:85%;」は画面に対する最大幅です。値を変更するとスマートフォンなど小さい画面での表示幅が変わります。
style.cssの「transition:transform .3s;」の「.3」は開閉アニメーション時間です。値を大きくするとゆっくり、小さくすると速く開閉します。
style.cssの「background:rgba(15,23,42,.55);」の「.55」は背景オーバーレイの濃さです。値を大きくすると背景が濃く、小さくすると薄くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの「max-width:85%;」を利用して画面サイズに応じて横幅を自動調整しています。スマートフォン・タブレット・PCでも利用できます。
コメント