このページの中身

和文本文段

タイポ ／ パターン集トップ

長文記事の基本組版。見出し余白と行送りを starter に合わせる

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<!-- 記事ページの h1 は記事ヘッダーが持つ。本文は h2 から始める。
     h2 の id は記事内目次のリンク先になるので、見出しと対で決める -->
<article class="prose">
  <h2 id="mame">豆を選ぶ</h2>
  <p>深煎りに向くのは、粒の大きさがそろっていて、水分の抜けきった豆です。焙煎の途中で色の差が出たものは、袋に入れる前によけています。</p>
  <h2 id="hikime">挽き目を合わせる</h2>
  <p>器具が変われば挽き目も変わります。同じ豆でも、紙のドリッパーなら中細、金属のフィルターならひと目盛り粗くしてください。</p>
  <ul><li>紙のドリッパーは中細</li><li>金属のフィルターは中粗</li></ul>
  <h2 id="yuon">湯温と蒸らし</h2>
  <p>湯は沸かしてから30秒ほど置き、92度前後で落とします。最初の湯は粉全体を濡らすだけにとどめ、30秒待ってから本流に移ります。</p>
  <h2 id="hozon">保存のしかた</h2>
  <p>豆をいためるのは、光・空気・温度の順です。袋の口を巻いて留め、戸棚の奥に置くだけで、2週間はこの味が続きます。</p>
</article>
/* 記事ページでは h1 を記事ヘッダーが持つので、prose の中は h2 から始まる。
   この h1 の規則は、本文が h1 ごと prose に入るページのためのもの */
:where(.prose) h1 {
  font-size: var(--text-2xl);
  margin-block: 0 var(--space-4);
  line-height: var(--leading-heading);
}
:where(.prose) h2 {
  font-size: var(--text-lg);
  margin-block: var(--space-8) var(--space-3);
  line-height: var(--leading-heading);
}
:where(.prose) h2:first-child {
  margin-block-start: 0;
}
:where(.prose) p {
  margin-block: var(--space-3);
  line-height: var(--leading-body);
}
:where(.prose) ul {
  margin-block: var(--space-4);
  padding-inline-start: 1.25em;
}
:where(.prose) li + li {
  margin-block-start: var(--space-2);
}

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。