スタイル見本

3行まとめ

• 面（パネル）として見せる箇条書き。3点に固定している
• 各項目は45字以内。長いと「まとめ」に見えなくなる
• モバイルでは画面端まで広げて実効行長を稼ぐ

何が起きたか

段落の見本です。本文は17px、行間1.9で組み、1行あたり約37文字になるよう幅を42remに抑えています。日本語の長文で読み疲れが出にくい範囲に収めるためです。

太字はマーカー風に沈めます。ここがいちばん伝えたい核という扱いです。インラインの code は面を敷いて示します。リンクは柿色の下線だけで示し、他の装飾は足しません。

小見出し（h3）の見本

h3 は罫線を持たず、字の大きさと余白だけで一段下がります。h2 との差はここで確かめられます。

なぜ難しい・何がすごいか

箇条書きと番号付きリストの見本です。表は変換できないので、比較は項目名を立てた箇条書きで書きます。

• 通常の箇条書き
• 項目名: ラベル付きの書き方。表の代わりに使う
• 3つ目の項目

1. 番号付きの手順1
2. 番号付きの手順2
3. 番号付きの手順3

たとえ話

引用の見本です。左に罫線を立て、文字は薄墨にします。

引用はこう見えます。「〜と述べています」の形で、記事全体で1〜2箇所まで。

用語ミニ辞典

• 辞書風リスト: 横罫線で項目を区切る。番号も点も付けない
• 見出し語: 太字だが、太字の数え上げからは除く扱い
• 語数: 3〜5語に収める

技術者向けの深掘り

コードブロックは墨色の地に沈めます。色付けはサーバー側で行うので、JavaScript は配信しません。地色はサイトに合わせて置き換え、コントラストが4.5:1を割る色は持ち上げています。

// TypeScript
export function highlight(code: string, lang?: string): string | null {
	return lang ? render(code, lang) : null;
}

# シェル。長い行は横スクロールになる
node scripts/lint-article.mjs /tmp/kamikudaki-article.json --strict

{ "title": "見本", "slug": "style-demo", "publish": false }

- 変更前の行
+ 変更後の行

言語を指定しなかったコードブロックは色が付かず、素の面になります。

言語指定なし（フォールバックの見本）

これは自分に関係ある？

• CSSを触る人: 記事に出る要素をこの1ページで確認できます
• 記事を書く人: 使える記法はここに出ているものだけです
• それ以外の人: 見本なので読み物ではありません