CSS Grid マガジンレイアウト

<!-- MOON BREW カフェ誌面：grid-template-areas で雑誌風の特集ページを組む -->
<div class="mb-mag">
  <header class="mb-mag__head" style="grid-area: head">
    <span class="mb-mag__kicker">CAFE STORY</span>
    <h1 class="mb-mag__logo">MOON BREW</h1>
    <span class="mb-mag__date">2026 / 初夏号</span>
  </header>

  <article class="mb-mag__hero" style="grid-area: hero">
    <div class="mb-mag__hero-photo" aria-hidden="true"></div>
    <div class="mb-mag__hero-body">
      <span class="mb-mag__tag">特集</span>
      <h2 class="mb-mag__title">朝の一杯を、<br>もっと豊かに。</h2>
      <p class="mb-mag__lead">深煎り琥珀ブレンドと、窓辺の静かな時間。</p>
    </div>
  </article>

  <aside class="mb-mag__cell mb-mag__cell--a" style="grid-area: a">
    <span class="mb-mag__num">01</span>
    <p class="mb-mag__cell-t">本日の豆</p>
    <p class="mb-mag__cell-d">エチオピア・ゲイシャ</p>
  </aside>
  <aside class="mb-mag__cell mb-mag__cell--b" style="grid-area: b">
    <span class="mb-mag__num">02</span>
    <p class="mb-mag__cell-t">焼き菓子</p>
    <p class="mb-mag__cell-d">キャラメルスコーン</p>
  </aside>
  <aside class="mb-mag__cell mb-mag__cell--c" style="grid-area: c">
    <span class="mb-mag__num">03</span>
    <p class="mb-mag__cell-t">店主より</p>
    <p class="mb-mag__cell-d">今月の抽出ノート</p>
  </aside>

  <footer class="mb-mag__foot" style="grid-area: foot">
    <span>ISSUE 12</span><span>・</span><span>MORNING EDITION</span><span>・</span><span>¥0 FREE PAPER</span>
  </footer>
</div>

/* MOON BREW：grid-template-areas でカフェ誌面を宣言的に組む */
:root {
  --cream: #f5ede1;
  --brown: #2b1d12;
  --amber: #c98a3b;
  --brown-soft: #5b4632;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 400px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Segoe UI", serif;
  background: var(--brown);
  overflow: hidden;
}

/* 誌面本体：名前付きエリアで雑誌レイアウトを定義 */
.mb-mag {
  width: 100%;
  height: 400px;
  padding: 14px;
  background: var(--cream);
  display: grid;
  gap: 10px;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head head"
    "hero a    b"
    "hero c    foot";
  color: var(--brown);
}

/* ヘッダー */
.mb-mag__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brown);
}
.mb-mag__kicker {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--amber);
  font-weight: 700;
}
.mb-mag__logo {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.16em;
  font-weight: 800;
}
.mb-mag__date {
  margin-left: auto;
  font-size: 11px;
  color: var(--brown-soft);
  letter-spacing: 0.1em;
}

/* ヒーロー：写真＋本文を縦に */
.mb-mag__hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #efe2cf;
  box-shadow: 0 6px 18px rgba(43, 29, 18, 0.18);
}
.mb-mag__hero-photo {
  flex: 1;
  background: url("https://picsum.photos/500/400?random=41") center/cover no-repeat;
  filter: sepia(0.25) saturate(1.1);
}
.mb-mag__hero-body {
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(43,29,18,0) 0%, var(--brown) 100%);
  color: var(--cream);
  position: absolute;
  inset: auto 0 0 0;
}
.mb-mag__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--brown);
  font-weight: 700;
}
.mb-mag__title {
  margin: 8px 0 4px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
}
.mb-mag__lead {
  margin: 0;
  font-size: 11.5px;
  color: #e8d9c2;
  line-height: 1.6;
}

/* 索引セル */
.mb-mag__cell {
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e4d5bd;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mb-mag__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
}
.mb-mag__cell-t {
  margin: 6px 0 2px;
  font-size: 13px;
  font-weight: 700;
}
.mb-mag__cell-d {
  margin: 0;
  font-size: 11px;
  color: var(--brown-soft);
}

/* フッター */
.mb-mag__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--brown-soft);
  padding: 0 4px;
}

// 索引セルをクリックでハイライト（誌面の見出しを選んだ感覚を演出）
const cells = document.querySelectorAll(".mb-mag__cell");

cells.forEach((cell) => {
  cell.addEventListener("click", () => {
    // 既存のハイライトを解除してから付け替える
    cells.forEach((c) => c.style.removeProperty("box-shadow"));
    cell.style.boxShadow = "0 0 0 2px #c98a3b inset";
  });
});

<!-- CSS Grid マガジンレイアウト：名前付きエリアで雑誌風の誌面を構成 -->
<div class="mag">
  <header class="mag__head" style="grid-area: head">
    <span class="mag__kicker">FEATURE</span>
    <h1 class="mag__logo">AURORA</h1>
    <span class="mag__date">2026 / SUMMER</span>
  </header>

  <article class="mag__hero" style="grid-area: hero">
    <span class="mag__tag">COVER STORY</span>
    <h2 class="mag__title">光と余白の<br>デザイン誌</h2>
    <p class="mag__lead">グリッドで組まれた誌面は、視線を自然に導く。</p>
  </article>

  <aside class="mag__cell mag__cell--a" style="grid-area: a">
    <h3>01</h3><p>Typography</p>
  </aside>
  <aside class="mag__cell mag__cell--b" style="grid-area: b">
    <h3>02</h3><p>Color</p>
  </aside>
  <aside class="mag__cell mag__cell--c" style="grid-area: c">
    <h3>03</h3><p>Layout</p>
  </aside>

  <footer class="mag__foot" style="grid-area: foot">
    <span>ISSUE 07</span><span>—</span><span>EDITORIAL GRID</span>
  </footer>
</div>

/* 全体：落ち着いたクリーム地に黒文字の雑誌風 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Helvetica Neue", "Hiragino Sans", system-ui, sans-serif;
  background:
    radial-gradient(120% 120% at 0% 0%, #fdf6ec 0%, #f3e9d8 60%, #ead9bf 100%);
  color: #1a1714;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

/* グリッド本体：名前付きエリアで誌面を定義 */
.mag {
  width: min(880px, 100%);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head head"
    "hero hero a"
    "hero hero b"
    "foot foot c";
  background: #fffaf2;
  border: 2px solid #1a1714;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.45);
}

/* ヘッダー：ロゴと号数 */
.mag__head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid #1a1714; padding-bottom: 8px;
}
.mag__kicker, .mag__date { font-size: 11px; letter-spacing: .25em; font-weight: 700; }
.mag__logo { font-size: clamp(22px, 4vw, 34px); letter-spacing: .14em; font-weight: 800; }

/* ヒーロー：表紙特集 */
.mag__hero {
  position: relative; overflow: hidden;
  border-radius: 10px; padding: 22px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.05)),
    linear-gradient(135deg, #e8743b, #c0392b 45%, #7b2d4f 100%);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.mag__hero::after { /* 装飾の同心円 */
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 0 0 14px rgba(255,255,255,.12);
}
.mag__tag {
  align-self: flex-start; font-size: 10px; letter-spacing: .2em; font-weight: 700;
  background: #fff; color: #c0392b; padding: 4px 9px; border-radius: 20px;
}
.mag__title { font-size: clamp(24px, 5vw, 38px); line-height: 1.12; font-weight: 800; }
.mag__lead { font-size: 13px; opacity: .92; }

/* 小セル：番号付きの索引 */
.mag__cell {
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1.5px solid #1a1714; min-height: 0;
  transition: transform .25s ease;
}
.mag__cell:hover { transform: translateY(-3px); }
.mag__cell.is-pick {
  border-color: #c0392b; border-width: 2.5px;
  box-shadow: 0 0 0 3px rgba(192,57,43,.18);
}
.mag__cell h3 { font-size: 26px; font-weight: 800; }
.mag__cell p { font-size: 12px; letter-spacing: .08em; opacity: .8; }
.mag__cell--a { background: #f7d9c4; }
.mag__cell--b { background: #d7e3d0; }
.mag__cell--c { background: #cfd9ea; }

/* フッター */
.mag__foot {
  display: flex; gap: 12px; align-items: center;
  border-top: 2px solid #1a1714; padding-top: 8px;
  font-size: 11px; letter-spacing: .2em; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .mag__cell { transition: none; }
}

// 索引セルをクリックで選択ハイライト（null安全・グリッド自体はCSSのみ）
(() => {
  const cells = document.querySelectorAll('.mag__cell');
  if (!cells.length) return;
  cells.forEach((cell) => {
    cell.style.cursor = 'pointer';
    cell.addEventListener('click', () => {
      cells.forEach((c) => c.classList.remove('is-pick'));
      cell.classList.add('is-pick');
    });
  });
})();