枠線

標準の枠線は、コンテンツで明示的に周囲と切り分けたいものに使っています。

文字

重要なものを大きくし、補助的なものを小さくしています。

行送り

文字にx-heightという概念のない日本語で主に書かれているので、標準の行送りは少し高めにしています。文字の大きさが大きかったり、伝統的に低めに設定されていたりする要素で、低くしています。

余白

隣接する要素との関連性を考慮して、決定しています。標準の大きさは、標準の行送りと同じです。

レイアウト

幅に制限を加えた、中央寄せの1カラムです。左の余白はその最大値を制限しているため、大きい画面では左寄せになります。

カラムと要素のデバッグを切り替え

カラムの最大幅は、65chです。Noto Sans CJK JPで、ひらがなが1行に36文字入るように決めています。

文書要素

rem単位を利用するため、文字の大きさはこの要素で指定しています。他に背景色や、前景色、フォント、行間もこの要素で指定しています。

文字の大きさは、描画領域の幅に応じて、徐々に大きくなります。最低でもユーザーの指定した標準の大きさ（既定では16px）が確保され、最大で156.25%（既定では25px）です。

body要素

レイアウトともっとも外側の余白はこの要素へのスタイルで実現しています。

左の余白は、描画領域に応じて少しづつ広がっていきます。最大で9vwくらいです。この値は以下のように計算されています。

1.25^10 = 9.313

上下の余白は、左の余白より少し小さくなるように計算されています。そのため同じように少しづつ広がっていきます。こちらは最大で7vw + 0.8remくらいです。

見出しレベル1

h1要素は、文字をかなり大きくし、上にとても大きく余白をとり、下に大きく余白をとります。

data-description属性を持つ場合は、その値が追加され、文字を大きくし、太字を解除し、下にとても大きく余白をとります。

見出しレベル2

h2要素は、文字を大きくし、上にかなり大きく余白をとります。

見出しレベル3

h3要素は、本文と同じ文字サイズにし、上に大きく余白をとります。

段落

特に強いスタイルは当てません。

水平線

線の代わりに、3つのAsterisk Operator（U+2217）を疑似要素で挿入し、上下にかなり大きく余白をとり、インデントします。

整形済みテキスト

$ mkdir example

主に英文になることから、行送りを一段階落とし、上下に大きく余白をとります。

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

https://www.example.com/ad/laborum/ullamco/mollit/elit/do/ut/dolor/eu/duis/sunt/irure/aute/deserunt/ullamco/eu/sunt/do/ad/dolore/aute/nulla/

長い行は、折り返せるなら折り返します。折り返せない場合は、カラム幅からはみ出さないようにします。

引用

右の余白を削除します。

序列付きリストと序列なしリスト

入れ子にした時に、余白が空きすぎないようにします。項目の上にかなり小さく余白をとります。

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

図とキャプション

上下に大きく余白をとります。

キャプションは文字を小さくし、少し透過させます。

語・句・文単位での意味付け

ハイパーリンクはlink色にし、surface色と60以上になるようにします。強調は斜体を解除し、太字にします。

編集

追加した部分の下線を削除します。

埋め込みコンテンツ

枠線を消し、カラムの幅から飛び出さないようにします。SVG画像では、既定で前景色と同じ色で塗られるようにします。

表

surface色で背景を塗り、上下に大きく余白をとり、セルの上とヘッダー・セルの下に枠線を付けます。

カラムの幅から飛び出さないようにします。

セル内で改行文字を使うと、改行できるようにします。

ボタン

on-background色で背景を塗り、文字を小さく、太くし、background色にします。

ラベルが長い場合は、折り返されます。

アフィリエイト

クラス名としてaffiliateを持つ要素は、画像を常に幅いっぱいに表示します。要素の縦幅は13行分になります。画像そのものは縦横比を維持して拡大・縮小され、中央に寄せて表示されます。

アフィリエイト画像の多くは背景色が白のため、背景を白（white）で埋めます。

横長の画像でも、縦方向の中央に寄せられます。

構文強調

// Keyword, HTML tag and element name, CSS type selector
function test() {
	// Literal, HTML attribute name, CSS property and pseudo selector
	const baz = false;
	// Number, CSS ID selector
	const foo = 1;
	// String, HTML attribute value, CSS class selector
	const bar = "bar";
	// Comment, HTML doctype
}

そのコンテンツの言語が明示されているcode要素は、HTMLファイルを作成する時にhighlight.jsを使って構文強調されます。動的に構文強調されることはありません。使う色は、surface色とコントラストが60以上になるよう、調節しています。

ロゴ

クラス名としてlogoを持つ要素は、太字にし、大文字にします。

メタデータ表記

クラス名としてmetalineを持つ要素は、文字を小さくします。

article要素直下のheader要素の直下での最初で使われる場合は、上にとても大きく余白をとります。

section要素直下のheader要素の直下での最初で使われる場合は、上にかなり大きく余白をとります。

また、続く要素との間を詰めます。

ページ一覧

クラス名としてpagesを持つ要素は、項目を横並びに配置し、文字を小さくします。カラム幅におさまらない場合は、折り返されるでしょう。また、最後以外の項目の右に余白をとります。

footer要素直下での最初で使われる場合は、上にとても大きく余白をとります。

クラス名としてsepを持つ子要素は、その後ろに疑似要素で区切り線を挿入します。

投稿一覧

クラス名としてpostsを持つ要素は、リストのブレットやインデントを削除します。項目の日時は、文字を小さくし、行間を落とし、上に余白をとります。

陳列棚

クラス名としてshowcaseを持つ要素は、グリッドに沿って、1行につき3つ、下端を揃えて画像を並べ、上下に大きく余白をとります。

本文へ飛ぶ

クラス名としてskip-to-main-contentを持つ要素は、文字を小さくし、画面上端のすぐ外に配置します。キーボードなどでフォーカスが当たると、画面上端に移動するでしょう。

append-next

画像が多いページでは、ユーザーの明示的な操作による多段階読み込みを採用します。JavaScriptが無効だったり、利用しているAPIに非対応の場合は、残りのコンテンツを含むウェブページへのリンクを表示します。

back-to-top

Test back-to-top.js

先頭へ戻るリンクを使用して、先頭へ戻った時、アドレスバーの値を書き換え、#topを消します。

unutm

Test unutm.js

ユーザーが訪問した時、何らかの理由でutm_で始まるパラメーターが付いていた場合、削除します。