Cloudensis Design System

prose

記事本文を囲む要素に .prose を付与すると、本文向けのスタイルが適用されます。見出し・段落・リスト・定義リスト・引用・コード・表・図版など、記事に現れる HTML タグを一通りカバーしています。

<article class="prose">...</article>
クリックで全選択

セレクタはすべて :where() で包んで詳細度を 0 にしたうえで @layer components に置いているため、本文中の要素に Tailwind のユーティリティクラスを指定すればいつでも上書きできます。 配色は トークンを参照しているので、@theme でトークンを差し替えると本文の見た目にもそのまま反映されます。

ブロック間の余白

ブロックの余白は下方向にだけ持たせています。隣接する margin の相殺に頼らないため、.prose を flex や grid の中に置いても、ブロック同士の間隔は変わりません。

見出しと hr の手前だけは例外で、直前のブロックの下余白を :has() で広げて距離を取ります。見出し側に上余白を持たせないので、 余白が二重になることがありません。

/* ブロックの余白は下方向にだけ持たせる */
.prose :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, figure, table, details, hr) {
	margin-block: 0 1.25em;
}

/* 見出しは続く本文と近づける */
.prose :where(h1, h2, h3, h4, h5, h6) {
	margin-block-end: 0.75em;
}

/* 見出しと hr の手前は、直前のブロックの下余白を広げて距離を取る */
.prose :where(:has(+ :is(h1, h2, h3, h4, h5, h6, hr))) {
	margin-block-end: 2.5em;
}
クリックで全選択

コンテナの先頭と末尾の余白は打ち消しているため、.prose を付けた要素に padding を与えても上下だけ広く見えることはありません。このページのサンプルも、枠線と padding を付けた要素に .prose を付けています。

対応している要素

prose.css がスタイルを当てている HTML タグの一覧です。

分類タグ
見出しh1 / h2 / h3 / h4 / h5 / h6
段落・区切りp / br / hr
リストul / ol / li
定義リストdl / dt / dd
引用blockquote / q / cite
コードpre / code / samp / kbd / var
表table / caption / thead / tbody / tfoot / tr / th / td
図版figure / figcaption / img / picture / video / svg
テキストレベルa / strong / b / em / i / mark / small / del / ins / s / u / sub / sup / abbr / dfn
開閉details / summary

サンプル

上の表に挙げたタグを実際に並べた記事です。余白・行間・配色の確認に使えます。

記事スタイルのサンプル

この記事は .prose が扱う HTML タグを一通り並べたものです。本文の中では strong による強い強調やem による強調、a によるリンク、mark によるハイライト、small による注記、del で消した文、ins で足した文、s で無効になった文をそのまま使えます。

略語は CSS のように書けます。化学式は H2O、指数は E = mc2。 キー操作は Ctrl + C のように示します。prose は記事本文に付けるクラスの名前です。
br で改行した行です。

見出し

h1 から h6 まで、サイズと余白が段階的に変わります。見出しは直前のブロックから離れ、 続く本文とは近づきます。

h3 の見出し

h3 に続く本文です。

h4 の見出し

h4 に続く本文です。

h5 の見出し

h5 に続く本文です。

h6 の見出し

h6 に続く本文です。

リスト

  • ul の項目です。
  • 入れ子にするとマーカーが disc → circle → square と変わります。
    • 2 階層目の項目
      • 3 階層目の項目
  • 項目の中には段落やコードも置けます。
  1. ol の項目です。
  2. 入れ子にすると decimal → lower-alpha → lower-roman と変わります。
    1. 2 階層目の項目
      1. 3 階層目の項目
  3. 3 つ目の項目

定義リスト

トークン
配色やタイポグラフィの値に名前を付けたものです。tokens.css の @theme で定義しています。
prose
記事本文に付けるクラスの名前です。

引用

よいデザインは、できるだけ少ないデザインで成り立っている。 本質的でないものをすべて取り除けば、本質が際立つ。

— Dieter Rams

文中の短い引用は このように 書きます。

コード

インラインのコードは --color-fg のように表示されます。 コマンドの出力は done のように示します。

pre と code を直に書いた場合は、ハイライトなしのコードブロックです。

npm install @cloudensis/design-system
npm run dev

CodeBlock コンポーネントを使うと、同じ見た目のままハイライトと クリックでの全選択が付きます。

@import "tailwindcss";
@import "@cloudensis/design-system/index.css";

.prose {
	max-width: 42rem;
}
クリックで全選択

表

エントリごとの内容
import内容
tokens.css@theme によるトークン定義
base.cssbody の既定のスタイル
prose.css記事本文用のスタイル
index.css上記をまとめたエントリ

図版

cloudensis のロゴ
figure と figcaption。画像は max-width: 100% で枠に収まります。

開閉

details と summary

開いたときだけ表示される本文です。中のブロックにも同じ余白が 適用されます。

hr の下の段落です。区切り線の手前も、見出しと同じだけ余白を広げています。