文字サイズ

単位にremを使います。そのため、文書要素での文字サイズの変化に応じ、実際の大きさは変わるでしょう。また、必ず整数サイズになるようにもしています。以下、この文書ではdefaultの文字サイズにおける全角1文字の幅を「1文字」として数えます。

行送り

文字にx-heightという概念のない日本語で主に書かれているので、defaultの行送りは少し高めにしています。以下、この文書ではdefaultの行送りと同じ高さを「1行」として数えます。

文書要素

背景色をbgにし、前景色をfgにし、フォントをサン・セリフにし、文字サイズを画面に合わせた大きさにし、行送りをdefaultにし、スクロールバーの幅を常に確保し、自動空白を全て挿入にし、約物に含まれる空白を行頭と連続する場合にのみ縮小します。

文字サイズは、縦に26行くらい、または横に36文字くらい入るよう、150%を最大として決まります。26行という数字は、手元にあった横書きの本が30行で、このウェブサイトがそれより少し行送りが大きいことから採用しています。36文字もその本から借用しています。ただし、最小サイズが100%になっているので、ユーザーがOSやブラウザーで設定したフォント・サイズを下回ることはありません。また、必ず整数サイズになるようにもしています。

本文要素

上の余白を5svhにし、右の余白を自動にし、下の余白を30svhにし、左の余白を描画領域の幅に応じて徐々に大きくし、最大幅を制限し、右と左の内側の余白を5lvwにします。

左の余白は、最大で10lvwです。

最大幅は36icです。日本語のウェブサイトなのでic単位を使っています。描画領域が十分に広い場合、1行に36文字前後になります（印が付いている文字は30と、40、50文字目です）。36文字は文書要素と同じく、手元の本から借用しています。

レイアウトのデバッグを切り替え

見出しレベル1

文字サイズをhugeにし、太字を解除し、行送りをsmallにし、上と下の余白をv-hugeにします。

見出しレベル2

文字サイズをlargeにし、行送りをsmallにし、下の余白を0にし、上の余白をv-largeにします。

見出しレベル3

文字サイズをdefaultにし、下の余白を0にし、上の余白をv-largeにします。

段落

下の余白を0にし、上の余白をv-defaultにします。

また、h2や、h3、header要素に続く場合は、上の空白をv-tinyにします。

水平線

枠線を削除し、前景色を継承し、上と下の余白をv-largeにし、寄せ方向を中央寄せにします。

また、先頭に疑似要素を作成し、中身を⁂にします。

整形済みテキスト

ウェブでの文章は
流し読みされるのが普通で、
行間に意味を込める前提で書くと
「空虚に感じられる文章になりやすい」。

買おうと決めたあたりで黒アッパーで白ソールのレザー・スニーカーにすることは決めていた。ついでに古くてやばそうなので、マザーの電池も購入。今までその値にvar()を使われることを想定していなかったため、var()が引用符で括られてしまうというバグがあったようだ。

背景色をbg-rectにし、上と下の余白をv-rectにし、カラム幅からはみ出さないようにし、上と下の内側の余白をv-smallにし、右と左の内側の余白をh-defaultにし、タブを半角4文字にし、約物に含まれる空白をそのままにします。

引用

上の余白をv-defaultにし、右と下の余白を0にし、左の余白をh-largeにします。

リスト

下の余白を0にし、上の余白をv-defaultにし、左の内側の余白をh-largeにします。

入れ子にした時に、上の余白を0にします。

項目の上の余白をv-tinyにします。

序列なしリストも同じです。

図

上と下の余白をv-rectにします。

図のキャプション

文字サイズをsmallにします。

ハイパーリンク

前景色をlinkにし、下線色をlightenにし、下線の位置をhalf-leadingの半分にします。

また、子孫にimg要素を持つ場合は、表示をinline-blockにします。

強調

斜体を解除し、太字にします。

コード、出力、キー入力

フォントを等幅にし、文字サイズを継承します。

印

背景色をHSL色空間でbgにorangeを50%混ぜた色にし、前景色を継承します。

追加

下線を削除します。

画像

背景色をbg-rectにし、高さを自動で決定し、縦横サイズに枠線が含まれるようにし、表示をinline-blockにし、最大の高さを100%にし、最大の幅を100%にし、行ボックスの下端に整列します。

svg要素の場合は、前景色と同じ色で塗られるようにします。

表

枠線の間を0にし、背景色をbg-rectにし、上と下の余白をv-rectにし、最大幅を100%にし、カラムの最大幅から飛び出さないようにします。

描画領域を横にはみ出す場合は、スクロールバーが表示されます。

セル

セルと見出しセルは、上と下の内側の余白をv-smallにし、右と左の内側の余白をh-defaultにし、折り返しを禁止し、行ボックスの上端に整列し、空白文字の統合を空白文字のみにします。

セルの場合は、上の枠線種をsolidにし、上の枠線幅をthinにします。

見出しセルの場合は、下の枠線種をsolidにし、下の枠線幅をthinにし、寄せ方向を継承します。

ページ内アンカー

ページ内アンカーで、ページ内のどこかへ進む場合は、上の余白をv-largeにするようにスクロールします。

矩形と矩形

少し前に記事のファイル名を日付にした。

矩形の要素に矩形の要素が続く場合は、上の余白をv-rectにhalf-leadingを足した大きさにします。

アフィリエイト

クラス名としてaffiliateを持つ要素は、特に何もしません。

また、その子孫のimg要素は、アスペクト比を16:9にし、背景を白にし、高さを自動で決定し、縦横比を維持して拡大・縮小し、上と下の内側の余白をv-defaultにhalf-leadingを足した大きさにし、右と左の内側の余白を上と下の内側の余白に16 / 9を掛けた大きさにし、幅を100%にします。

画像の拡大・縮小は、縦長と横長のどちらでもうまく調整されます。

過去ログ

クラス名としてarchivesを持つ要素は、項目間の上と下の余白をv-tinyにし、項目間の左と右の余白をh-defaultにし、表示をflexにし、flexの折り返しを有効にし、ビュレットを削除し、左の内側の余白を0にします。

また、その子孫のli要素は、上の余白を0にします。

戻る

クラス名としてbackを持つ要素は、上の余白を0にします。

また、その子孫のa要素は、前景色を継承し、下線を削除します。

日付

クラス名としてdateを持つ要素は、文字サイズをsmallにします。

また、h1要素が続く場合は、上の余白をv-hugeにします

また、続く要素は、上の余白をv-tinyにします。

要約

クラス名としてexcerptを持つ要素は、何もしません。

また、その祖先のa要素は、下線を消します。

また、その子孫のp要素は、祖先にa要素を持つ場合、色をfgにします。

また、その子孫のh3要素は、祖先にa要素を持つ場合、下線を表示し、下線色をlightenにします。

ロゴ

クラス名としてlogoを持つ要素は、行送りを1にし、上と下の余白を0にします。

また、その子孫のsvg要素は、前景色をfgにし、幅を1emにし、最大幅を無制限にします。

ページ・フッター

クラス名としてpage-footerを持つ要素は、文字サイズをsmallにします。

また、先頭の疑似要素は、中身を⋆ ⋆ ⋆にし、表示をblockにし、上の余白をv-hugeにします。

ページ・ヘッダー

クラス名としてpage-headerを持つ要素は、何もしません。

陳列棚

クラス名としてshowcaseを持つ要素は、項目の並びを下端揃えにし、表示をgridにし、項目間の上と下の余白をv-rectにし、項目間の左と右の余白をh-defaultにし、1行につき2つ、3つ、または4つ並びにし、リストのブレットを削除し、上の余白をv-rectにし、左の内側の余白を0にします。

また、その子孫のli要素は、上の余白を0にします。

また、その子孫のp要素は、文字サイズをsmallにし、横方向へはみ出したものを削除し、折り返しを禁止します。

また、その子孫のp要素は、最初のp要素である場合、上の余白をv-tinyにします。

また、その子孫のp要素は、p要素に続く場合、上の余白を0にします。

また、クラス名として更にonelineを持つ場合、表示をflexにし、はみ出たものをスクロールさせます。以下のボタンで挙動を確認できます。

また、その子孫のli要素は、最小幅を親要素の幅の1/3にします。

2行目以降の表示を切り替え

サイト・メニュー

クラス名としてsite-menuを持つ要素は、何もしません。

また、その子孫のul要素は、ビュレットを削除し、上と下の余白をv-hugeにし、左の内側の余白を0にします。

ページ内スムース・スクロール

ページ内リンクを使ってジャンプする場合、スムース・スクロールするようにします。