デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: ダーク・シネマティック / カード
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| タイトル（常時スクリム後の実効地） | #e8ecf0 | #0b0f14 | #14181e | 15.00:1 | AA 合格 |
| カテゴリラベル（常時スクリム後の実効地） | #9fb0c0 | #0b0f14 | #14181e | 8.01:1 | AA 合格 |
| 壊れた例：タイトル（スクリムがホバー時のみ・地の最明部） | #e8ecf0 | #7b8794 | #7b8794 | 3.08:1 | 不合格 |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>ダーク・シネマティック プロジェクトカード デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--fg:#e8ecf0;
--sub:#9fb0c0;
--amber:#f0b429;
}
body{background:#0b0f14;color:var(--fg);min-height:340px;padding:24px;
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
h3{font-family:"Georgia","Times New Roman",serif;font-size:17px;letter-spacing:.01em;margin-bottom:4px}
.lead{font-size:12px;color:var(--sub);line-height:1.8;max-width:36em;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;
text-decoration:none;color:inherit;display:block;
/* overflow:hiddenで角を丸めると:focus-visibleのoutlineも切り取られる。
box-shadowでリングを描けばこの祖先の外側切り取りの影響を受けない */
transition:transform .18s ease}
.card:focus-visible{box-shadow:0 0 0 3px var(--amber);outline:none}
.card:hover{transform:translateY(-2px)}
/* 光源はあえてタイトルの直上（左下寄り）に置く。写真は均一な暗さではなく、
文字が乗る場所がたまたま明るいことは実写でも普通に起きるため、その最悪ケースで検証する */
.p1{background:radial-gradient(110% 85% at 30% 82%, #7b8794 0%, #43505c 30%, #1c242e 58%, #0b0f14 100%)}
.p2{background:radial-gradient(110% 85% at 25% 80%, #8a6b78 0%, #4a3944 30%, #221a20 58%, #0b0f14 100%)}
.p3{background:radial-gradient(110% 85% at 35% 85%, #6b7d8a 0%, #3a444d 30%, #1a2027 58%, #0b0f14 100%)}
/* タイトル用のスクリムは常時表示。ホバーでだけ出すと初期状態でタイトルが読めなくなる（demo_bad） */
.scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(8,11,15,.92) 0%, rgba(8,11,15,.35) 45%, transparent 75%);
pointer-events:none}
.body{position:absolute;left:0;right:0;bottom:0;padding:14px}
.cat{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:5px}
h4{font-family:"Georgia","Times New Roman",serif;font-size:15px;font-weight:400;line-height:1.3}
/* 詳細行はホバー／フォーカスの両方で出す。:hoverだけだとキーボード・タッチで永久に見えない */
.meta{max-height:0;opacity:0;overflow:hidden;transition:max-height .2s ease,opacity .2s ease;
font-size:11px;color:var(--sub);margin-top:6px}
.card:hover .meta,.card:focus-within .meta{max-height:40px;opacity:1}
</style></head><body>
<h3>Selected Works</h3>
<p class="lead">タイトル用のスクリムは常時表示にし、ホバー・フォーカスでは詳細行だけを追加する。フォーカスリングは box-shadow で描き、角丸トリミングの外側切り取りを避ける。</p>
<div class="grid">
<a class="card" href="#">
<div class="p1" style="position:absolute;inset:0"></div>
<div class="scrim"></div>
<div class="body">
<span class="cat">Documentary</span>
<h4>Into the Quiet Dark</h4>
<p class="meta">2025 / Director, Editor</p>
</div>
</a>
<a class="card" href="#">
<div class="p2" style="position:absolute;inset:0"></div>
<div class="scrim"></div>
<div class="body">
<span class="cat">Short Film</span>
<h4>Amber Hour</h4>
<p class="meta">2024 / Cinematographer</p>
</div>
</a>
<a class="card" href="#">
<div class="p3" style="position:absolute;inset:0"></div>
<div class="scrim"></div>
<div class="body">
<span class="cat">Music Video</span>
<h4>Low Tide</h4>
<p class="meta">2024 / Director</p>
</div>
</a>
</div>
</body></html>