ホーリーグレイルレイアウト Holy Grail
ヘッダー・フッター・メイン・左右サイドバーの5領域構成の伝統的レイアウト。
ライブデモ
メインコンテンツ
ここにページの主要コンテンツが入ります。CSS Gridで5領域を効率的に配置しています。
ソースコード
<div class="demo-holygrail">
<header class="demo-hg-header">
<span class="demo-hg-logo">🏛️ MyApp</span>
<nav class="demo-hg-topnav">
<a href="#">ホーム</a>
<a href="#">機能</a>
<a href="#">料金</a>
</nav>
</header>
<aside class="demo-hg-sidebar-left">
<div class="demo-hg-nav-item active">ダッシュボード</div>
<div class="demo-hg-nav-item">プロジェクト</div>
<div class="demo-hg-nav-item">設定</div>
</aside>
<main class="demo-hg-main">
<h2 style="margin:0 0 8px;font-size:16px;color:#333;">メインコンテンツ</h2>
<p style="margin:0;font-size:13px;color:#666;line-height:1.6;">ここにページの主要コンテンツが入ります。CSS Gridで5領域を効率的に配置しています。</p>
</main>
<aside class="demo-hg-sidebar-right">
<div class="demo-hg-widget">ウィジェット</div>
</aside>
<footer class="demo-hg-footer">
<span>© 2024 MyApp</span>
</footer>
</div>.demo-holygrail {
display: grid;
grid-template:
"header header header" 44px
"left main right" 1fr
"footer footer footer" 36px
/ 120px 1fr 100px;
gap: 1px; min-height: 260px; border-radius: 12px;
overflow: hidden; border: 1px solid #e5e7eb;
background: #e5e7eb;
}
.demo-hg-header {
grid-area: header; background: var(--ui-primary);
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px;
}
.demo-hg-logo { color: #fff; font-weight: 700; font-size: 14px; }
.demo-hg-topnav { display: flex; gap: 12px; }
.demo-hg-topnav a {
color: rgba(255,255,255,0.8); text-decoration: none; font-size: 12px;
transition: color 0.2s;
}
.demo-hg-topnav a:hover { color: #fff; }
.demo-hg-sidebar-left {
grid-area: left; background: #fff; padding: 12px 8px;
}
.demo-hg-nav-item {
padding: 8px 10px; font-size: 12px; color: #555;
border-radius: 6px; cursor: pointer; transition: all 0.2s; margin-bottom: 2px;
}
.demo-hg-nav-item:hover {
background: color-mix(in srgb, var(--ui-primary) 8%, #fff);
}
.demo-hg-nav-item.active {
background: color-mix(in srgb, var(--ui-primary) 12%, #fff);
color: var(--ui-primary); font-weight: 600;
}
.demo-hg-main {
grid-area: main; background: #fff; padding: 20px;
}
.demo-hg-sidebar-right {
grid-area: right; background: #fff; padding: 12px 8px;
}
.demo-hg-widget {
padding: 10px; font-size: 11px; color: #777;
background: color-mix(in srgb, var(--ui-primary) 5%, #fff);
border-radius: 6px; text-align: center;
}
.demo-hg-footer {
grid-area: footer; background: #fafafa;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #999;
}document.querySelectorAll('.demo-hg-nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.demo-hg-nav-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});AIプロンプト
Basic
ホーリーグレイルレイアウトをCSS Gridで作ってください。ヘッダー、フッター、メインコンテンツ、左右サイドバーの5領域構成です。
Custom
以下の仕様でホーリーグレイルレイアウトを実装してください。 - CSS Grid grid-template-areasで明示的な領域指定 - ヘッダーにロゴとナビゲーション - 左サイドバーにメニュー、右サイドバーにウィジェット - プライマリカラー: #2563eb - レスポンシブ（タブレットで右サイドバー非表示、モバイルで1カラム） - ヘッダー固定（sticky）
Advanced
アクセシビリティ対応のホーリーグレイルレイアウトを実装してください。 - セマンティックHTML（header, main, aside, footer, nav） - ARIAランドマーク（banner, main, complementary, contentinfo） - スキップリンク（メインコンテンツへジャンプ） - サイドバーの折りたたみ機能（toggle） - prefers-color-scheme対応 - print用のスタイルシート（サイドバー非表示） - container queriesで各領域のレスポンシブ - 100dvh対応とスクロール領域の適切な分割