ドロワー Drawer
画面端からスライドインするパネル。サイドメニューや詳細表示に使用。
ライブデモ
ソースコード
<div class="demo-drawer-wrap">
<button class="demo-drawer-open" id="demoDrawerOpen">ドロワーを開く</button>
<div class="demo-drawer-overlay" id="demoDrawerOverlay"></div>
<aside class="demo-drawer" id="demoDrawer" aria-hidden="true" role="dialog" aria-label="サイドメニュー">
<div class="demo-drawer-header">
<h3 class="demo-drawer-title">メニュー</h3>
<button class="demo-drawer-close" id="demoDrawerClose" aria-label="閉じる">✕</button>
</div>
<nav class="demo-drawer-nav">
<a href="#" class="demo-drawer-link">ダッシュボード</a>
<a href="#" class="demo-drawer-link">プロジェクト</a>
<a href="#" class="demo-drawer-link">チーム</a>
<a href="#" class="demo-drawer-link">設定</a>
<a href="#" class="demo-drawer-link">ヘルプ</a>
</nav>
</aside>
</div>.demo-drawer-wrap { position: relative; overflow: hidden; min-height: 420px; }
.demo-drawer-open {
padding: 10px 24px; border: none; border-radius: 8px;
background: var(--ui-primary); color: #fff; font-weight: 600;
cursor: pointer; font-size: 14px; transition: opacity 0.2s;
}
.demo-drawer-open:hover { opacity: 0.85; }
.demo-drawer-overlay {
display: none; position: absolute; inset: 0;
background: rgba(0,0,0,0.3); z-index: 10; border-radius: 8px;
}
.demo-drawer-overlay.active { display: block; }
.demo-drawer {
position: absolute; top: 0; left: 0; bottom: 0;
width: 220px; background: #fff; z-index: 20; border-radius: 0 10px 10px 0;
box-shadow: 4px 0 16px rgba(0,0,0,0.1);
transform: translateX(-100%); transition: transform 0.3s ease;
}
.demo-drawer.open { transform: translateX(0); }
.demo-drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px; border-bottom: 1px solid #e5e7eb;
}
.demo-drawer-title {
margin: 0; font-size: 16px; font-weight: 700;
color: var(--ui-primary);
}
.demo-drawer-close {
background: none; border: none; font-size: 18px;
cursor: pointer; color: #999; transition: color 0.2s;
}
.demo-drawer-close:hover { color: var(--ui-primary); }
.demo-drawer-nav { display: flex; flex-direction: column; padding: 8px; }
.demo-drawer-link {
padding: 10px 12px; text-decoration: none; color: #555;
border-radius: 6px; font-size: 14px; transition: all 0.2s;
}
.demo-drawer-link:hover {
background: color-mix(in srgb, var(--ui-primary) 10%, #fff);
color: var(--ui-primary);
}(function() {
const openBtn = document.getElementById('demoDrawerOpen');
const closeBtn = document.getElementById('demoDrawerClose');
const overlay = document.getElementById('demoDrawerOverlay');
const drawer = document.getElementById('demoDrawer');
function open() {
drawer.classList.add('open');
overlay.classList.add('active');
drawer.setAttribute('aria-hidden', 'false');
}
function close() {
drawer.classList.remove('open');
overlay.classList.remove('active');
drawer.setAttribute('aria-hidden', 'true');
}
openBtn.addEventListener('click', open);
closeBtn.addEventListener('click', close);
overlay.addEventListener('click', close);
})();AIプロンプト
Basic
ドロワーメニューをHTML/CSSで作ってください。ボタンをクリックすると画面左端からスライドインするパネルが表示されます。
Custom
以下の仕様でドロワーメニューを実装してください。 - 左右の方向を選択可能 - オーバーレイ背景付き - スライドインアニメーション（300ms ease） - プライマリカラー: #2563eb - ヘッダー部分に閉じるボタン - ドロワー内にナビゲーションリンクとアバター表示
Advanced
アクセシビリティ対応のドロワーを実装してください。 - role="dialog" と aria-label を設定 - フォーカストラップ（ドロワー内でTabが循環） - ESCキーで閉じる - 開閉時のフォーカス管理（開くボタン→ドロワー→開くボタンに戻る） - prefers-reduced-motion対応（アニメーション無効化） - bodyスクロールロック - タッチスワイプで閉じる機能