ベントグリッド Bento Grid
弁当箱のように不均等なセルサイズで要素を配置するモダンレイアウト。
ライブデモ
超高速
ミリ秒単位のレスポンスで最高のUXを提供します。
安全
グローバル
リアルタイム分析
ダッシュボードですべてのメトリクスをリアルタイムに確認。
同期
ソースコード
<div class="demo-bento">
<div class="demo-bento-item large">
<span class="demo-bento-icon">⚡</span>
<h3 class="demo-bento-title">超高速</h3>
<p class="demo-bento-desc">ミリ秒単位のレスポンスで最高のUXを提供します。</p>
</div>
<div class="demo-bento-item">
<span class="demo-bento-icon">🔒</span>
<h3 class="demo-bento-title">安全</h3>
</div>
<div class="demo-bento-item">
<span class="demo-bento-icon">🌐</span>
<h3 class="demo-bento-title">グローバル</h3>
</div>
<div class="demo-bento-item wide">
<span class="demo-bento-icon">📊</span>
<h3 class="demo-bento-title">リアルタイム分析</h3>
<p class="demo-bento-desc">ダッシュボードですべてのメトリクスをリアルタイムに確認。</p>
</div>
<div class="demo-bento-item">
<span class="demo-bento-icon">🔄</span>
<h3 class="demo-bento-title">同期</h3>
</div>
</div>.demo-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 12px;
}
.demo-bento-item {
padding: 18px; border-radius: 14px;
background: color-mix(in srgb, var(--ui-primary) 6%, #fff);
border: 1px solid color-mix(in srgb, var(--ui-primary) 12%, transparent);
display: flex; flex-direction: column; justify-content: center;
transition: all 0.25s;
}
.demo-bento-item:hover {
background: color-mix(in srgb, var(--ui-primary) 12%, #fff);
transform: translateY(-2px);
box-shadow: 0 4px 16px color-mix(in srgb, var(--ui-primary) 12%, transparent);
}
.demo-bento-item.large {
grid-row: span 2;
}
.demo-bento-item.wide {
grid-column: span 2;
}
.demo-bento-icon { font-size: 24px; margin-bottom: 8px; }
.demo-bento-title {
margin: 0; font-size: 15px; font-weight: 700; color: var(--ui-primary);
}
.demo-bento-desc {
margin: 6px 0 0; font-size: 12px; color: #777; line-height: 1.5;
}AIプロンプト
Basic
ベントグリッド（弁当箱型）レイアウトをHTML/CSSで作ってください。大小さまざまなサイズのカードをグリッドで配置します。
Custom
以下の仕様でベントグリッドを実装してください。 - 3カラムベースで大小セルを組み合わせ - grid-row/column spanで特定セルを拡大 - プライマリカラー: #2563eb - 各セルにアイコン + タイトル + 説明 - ホバーエフェクト（浮き上がり + シャドウ） - レスポンシブ（モバイルでは1カラム）
Advanced
アクセシビリティ対応のベントグリッドを実装してください。 - セマンティックなHTML（section, article, heading階層） - フォーカス順序がビジュアルの順序と一致 - ハイコントラストモード対応 - prefers-reduced-motion対応 - container queriesでセルサイズに応じたコンテンツ切替 - CSS Gridの名前付きエリアで可読性向上 - ドラッグ&ドロップでセル配置のカスタマイズ - レスポンシブブレークポイントでグリッド構造自体を変更