🖼️
デザイン
UIデザインの基本原則
優れたユーザーインターフェースを設計するための基礎知識を解説します。
カードレイアウト Card Layout
情報をカード単位でまとめて表示する汎用的なレイアウトパターン。
ライブデモ
📊
開発
CSS Gridの実践テクニック
実務で使えるCSS Gridのレイアウトパターンを紹介します。
🚀
パフォーマンス
Webパフォーマンス最適化
Core Web Vitalsのスコアを改善する具体的な方法を解説します。
ソースコード
<div class="demo-cards">
<article class="demo-card">
<div class="demo-card-img">🖼️</div>
<div class="demo-card-body">
<span class="demo-card-tag">デザイン</span>
<h3 class="demo-card-title">UIデザインの基本原則</h3>
<p class="demo-card-desc">優れたユーザーインターフェースを設計するための基礎知識を解説します。</p>
<div class="demo-card-footer">
<span class="demo-card-date">2024.03.15</span>
<span class="demo-card-read">5分で読める</span>
</div>
</div>
</article>
<article class="demo-card">
<div class="demo-card-img">📊</div>
<div class="demo-card-body">
<span class="demo-card-tag">開発</span>
<h3 class="demo-card-title">CSS Gridの実践テクニック</h3>
<p class="demo-card-desc">実務で使えるCSS Gridのレイアウトパターンを紹介します。</p>
<div class="demo-card-footer">
<span class="demo-card-date">2024.03.12</span>
<span class="demo-card-read">8分で読める</span>
</div>
</div>
</article>
<article class="demo-card">
<div class="demo-card-img">🚀</div>
<div class="demo-card-body">
<span class="demo-card-tag">パフォーマンス</span>
<h3 class="demo-card-title">Webパフォーマンス最適化</h3>
<p class="demo-card-desc">Core Web Vitalsのスコアを改善する具体的な方法を解説します。</p>
<div class="demo-card-footer">
<span class="demo-card-date">2024.03.10</span>
<span class="demo-card-read">6分で読める</span>
</div>
</div>
</article>
</div>.demo-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.demo-card {
background: #fff; border-radius: 12px; overflow: hidden;
border: 1px solid #e5e7eb; transition: all 0.2s;
}
.demo-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-primary) 15%, transparent);
border-color: color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.demo-card-img {
height: 80px; display: flex; align-items: center; justify-content: center;
font-size: 32px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--ui-primary) 8%, #fff),
color-mix(in srgb, var(--ui-primary) 18%, #fff));
}
.demo-card-body { padding: 14px; }
.demo-card-tag {
display: inline-block; font-size: 11px; font-weight: 600;
color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 10%, #fff);
padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.demo-card-title {
margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #333;
line-height: 1.4;
}
.demo-card-desc {
margin: 0 0 10px; font-size: 12px; color: #777; line-height: 1.5;
}
.demo-card-footer {
display: flex; justify-content: space-between; font-size: 11px; color: #aaa;
}AIプロンプト
Basic
カードレイアウトをHTML/CSSで作ってください。画像・タイトル・説明文・日付を含むカードをグリッドで並べます。
Custom
以下の仕様でカードレイアウトを実装してください。 - レスポンシブグリッド（auto-fill + minmax） - カードにサムネイル画像、タグ、タイトル、説明、日付 - プライマリカラー: #2563eb - ホバーで浮き上がるエフェクト - タグ部分のカラーバッジ - カード高さの統一（CSS Grid subgrid推奨）
Advanced
アクセシビリティ対応のカードレイアウトを実装してください。 - article要素でセマンティックな構造 - カード全体がクリッカブル（a要素のストレッチ） - フォーカス時の明確なアウトライン - 画像のalt属性とloading="lazy" - ハイコントラストモード対応 - container queriesでカードサイズに応じた表示切替 - prefers-reduced-motion対応 - スケルトンローディング状態の実装