CSS multi-column テキスト

<!-- MOON BREW 読み物：multi-column で新聞風コラムを組む -->
<article class="mb-col">
  <header class="mb-col__masthead">
    <span class="mb-col__kicker">COFFEE COLUMN</span>
    <h1 class="mb-col__logo">MOON BREW 通信</h1>
    <span class="mb-col__meta">第12号 ・ 焙煎の話</span>
  </header>

  <!-- 段ぶち抜きの大見出し -->
  <h2 class="mb-col__span">一杯の琥珀に宿る、<br>焙煎士の小さな日課</h2>

  <!-- 本文：column-width で自動段組み、ドロップキャップ付き -->
  <div class="mb-col__body">
    <p>朝、店の扉を開ける前に、焙煎士はまず豆の香りを確かめる。その日の湿度や気温で、火の入り方はわずかに変わる。だからこそ、深煎りの琥珀ブレンドは毎朝ほんの少しだけ表情を変える。</p>
    <p>ハンドドリップに使うお湯は、沸騰から一呼吸おいた九十度前後。最初の蒸らしでふくらむ泡を眺める時間が、一日でいちばん静かなひとときだと彼は言う。</p>
    <p>豆は週に二度だけ焙煎する。鮮度を保ちながら、香りが落ち着く三日目あたりがいちばん飲み頃。窓辺の席で、ゆっくり冷めていく一杯をどうぞ。</p>
    <p>キャラメルスコーンと合わせれば、苦みと甘みがやさしく溶け合う。今月のおすすめは、エチオピア産のフルーティーな浅煎りです。</p>
  </div>
</article>

/* MOON BREW：column-width / column-rule / column-span で新聞風コラム */
:root {
  --cream: #f5ede1;
  --brown: #2b1d12;
  --amber: #c98a3b;
}

* { box-sizing: border-box; }

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

.mb-col {
  height: 400px;
  padding: 18px 22px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

/* 新聞の題字 */
.mb-col__masthead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 3px double var(--brown);
}
.mb-col__kicker {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--amber);
  font-weight: 700;
}
.mb-col__logo { margin: 0; font-size: 22px; letter-spacing: 0.1em; font-weight: 800; }
.mb-col__meta { margin-left: auto; font-size: 10px; color: #6b5640; }

/* 段ぶち抜きの大見出し */
.mb-col__span {
  column-span: all;
  margin: 12px 0 10px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
  color: var(--brown);
}

/* 本文：自動段組み＋段間のけい線 */
.mb-col__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  columns: 3 180px;
  column-gap: 22px;
  column-rule: 1px solid #d8c6a8;
  font-size: 12px;
  line-height: 1.85;
  color: #3d2c1c;
  text-align: justify;
}
.mb-col__body p { margin: 0 0 10px; break-inside: avoid; }

/* 先頭段落のドロップキャップ */
.mb-col__body p:first-child::first-letter {
  float: left;
  font-size: 44px;
  line-height: 0.8;
  padding: 4px 8px 0 0;
  font-weight: 800;
  color: var(--amber);
}

// 段組み本文：ダブルクリックした段落をマーカーで強調（読書メモ風）
const body = document.querySelector(".mb-col__body");

body?.addEventListener("dblclick", (e) => {
  const p = e.target.closest("p");
  if (!p) return;
  // 琥珀色の下線マーカーをトグル
  const marked = p.style.background === "rgba(201, 138, 59, 0.18)";
  p.style.background = marked ? "" : "rgba(201, 138, 59, 0.18)";
});

<!-- CSS multi-column テキスト：新聞・雑誌風の段組み本文 -->
<div class="mc">
  <article class="mc__paper">
    <header class="mc__masthead">
      <span class="mc__edition">THE GRID TIMES</span>
      <h1 class="mc__title">段組みで読みやすく</h1>
      <p class="mc__sub">column-count と column-rule で新聞のような流し込みを実現する</p>
      <div class="mc__tools" id="mcTools" role="group" aria-label="段数切替">
        <button class="mc__chip" data-cols="auto">自動</button>
        <button class="mc__chip is-active" data-cols="2">2段</button>
        <button class="mc__chip" data-cols="3">3段</button>
      </div>
    </header>

    <div class="mc__cols">
      <p class="mc__drop">
        <span class="mc__cap">C</span>SS の multi-column は、長い本文を自動で複数段に
        流し込むためのレイアウト機能です。column-count で段数を、
        column-gap で段間の余白を指定するだけで、テキストが上から下、
        そして次の段へと自然に折り返します。
      </p>
      <p>
        column-rule を使えば段と段の境界に区切り線を引け、紙面のような
        引き締まった見た目になります。見出しを段幅いっぱいに広げたいときは
        column-span: all を指定します。
      </p>
      <h2 class="mc__h2">読み心地を整える</h2>
      <p>
        段が細すぎると視線移動が増え、太すぎると行を見失います。
        1段あたり 30〜40 文字程度を目安に、column-width で柔軟に
        段数を決めると端末幅に強いレイアウトになります。
      </p>
      <p>
        widows / orphans を併用すれば、段の切れ目で1行だけ取り残される
        “みなしご行”を防げます。印刷物の組版ノウハウが、そのまま Web に
        持ち込めるのが魅力です。
      </p>
    </div>
  </article>
</div>

/* 全体：紙の質感を持つ新聞風 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,0,0,.015) 26px 27px),
    linear-gradient(160deg, #f6f1e7, #efe7d6);
  color: #2a241c; min-height: 100vh; padding: 16px;
  display: grid; place-items: center;
}

.mc__paper {
  width: min(860px, 100%);
  background: #fbf7ee;
  border: 1px solid #d9cdb4;
  border-radius: 8px;
  padding: 22px clamp(16px, 4vw, 34px);
  box-shadow: 0 20px 44px -26px rgba(70,50,20,.5);
}

/* 題字 */
.mc__masthead { text-align: center; border-bottom: 3px double #2a241c; padding-bottom: 12px; margin-bottom: 16px; }
.mc__edition { font-size: 11px; letter-spacing: .4em; font-weight: 700; color: #8a6d3b; }
.mc__title { font-size: clamp(24px, 5vw, 38px); font-weight: 800; letter-spacing: .04em; margin: 4px 0; }
.mc__sub { font-size: 13px; color: #6b5d44; font-style: italic; }

/* 段数切替ツールバー */
.mc__tools { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.mc__chip {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: #6b5d44; background: #f1e7d2; border: 1px solid #d9cdb4;
  padding: 5px 12px; border-radius: 20px; transition: background .2s, color .2s;
}
.mc__chip:hover { background: #e8dcc2; }
.mc__chip.is-active { color: #fbf7ee; background: #b4541f; border-color: transparent; }

/* 段組み本体 */
.mc__cols {
  column-width: 15rem;     /* 幅基準で段数が自動調整 */
  column-gap: 26px;
  column-rule: 1px solid #d3c4a4; /* 段間の区切り線 */
  orphans: 2; widows: 2;
  text-align: justify;
  line-height: 1.85;
  font-size: 14px;
}
.mc__cols p { margin-bottom: 12px; text-indent: 1em; }

/* 見出しは全段ぶち抜き */
.mc__h2 {
  column-span: all;
  font-size: 18px; font-weight: 800; letter-spacing: .03em;
  margin: 6px 0 12px; padding-top: 10px;
  border-top: 1px solid #d3c4a4; text-align: left;
}

/* ドロップキャップ */
.mc__drop { text-indent: 0; }
.mc__cap {
  float: left; font-size: 54px; line-height: .82; font-weight: 800;
  padding: 4px 8px 0 0; color: #b4541f;
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

// 段数チップで multi-column の段数を切り替えて挙動を体感させる（null安全）
(() => {
  const tools = document.getElementById('mcTools');
  const cols = document.querySelector('.mc__cols');
  if (!tools || !cols) return;

  const apply = (mode) => {
    if (mode === 'auto') {
      // CSSのcolumn-width基準（幅で段数が自動調整）に戻す
      cols.style.removeProperty('column-count');
      cols.style.columnWidth = '15rem';
    } else {
      // 固定段数：column-width を解除して column-count を優先
      cols.style.columnWidth = 'auto';
      cols.style.columnCount = mode;
    }
  };

  tools.addEventListener('click', (e) => {
    const btn = e.target.closest('.mc__chip');
    if (!btn) return;
    tools.querySelectorAll('.mc__chip').forEach((b) => b.classList.remove('is-active'));
    btn.classList.add('is-active');
    apply(btn.dataset.cols);
  });

  apply('2'); // 初期は2段
})();