パーツ番号 02-03-04 ・ CSSのみ

行間・字間比較

詰まった行間と広い行間の段落を並べて比較できる見本です。WordPressの本文スタイルを決める際の比較検討に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-03-04-wrap">
          <div class="d02-03-04-col">
            <span class="d02-03-04-label">行間 1.3</span>
            <p class="d02-03-04-tight">情報を密に伝えたいときに使う詰まった行間の段落見本です。一覧性が求められる場面に向きます。</p>
          </div>
          <div class="d02-03-04-col">
            <span class="d02-03-04-label">行間 2.0</span>
            <p class="d02-03-04-loose">ゆったりと読ませたいときに使う広い行間の段落見本です。読み物やコラムに向きます。</p>
          </div>
        </div>

CSS

.d02-03-04{background:#f8fafc;text-align:left}
        .d02-03-04-wrap{display:flex;gap:16px}
        .d02-03-04-col{flex:1;font-family:"游ゴシック","Yu Gothic",-apple-system,"Hiragino Sans",sans-serif}
        .d02-03-04-label{display:block;font-size:10.5px;font-weight:700;color:#94a3b8;margin-bottom:6px}
        .d02-03-04-tight{font-size:12px;line-height:1.3;color:#334155;margin:0}
        .d02-03-04-loose{font-size:12px;line-height:2;color:#334155;margin:0}

クラス名 .d02-03-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。