このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてをこのページで解説しています。それぞれに例も用意してあるので、挙動も確認できます。おおむね挙動の確認を優先しているため、言葉が足らなかったり、更新されていなかったりするため、詳細は開発者ツールなどを駆使してください。

このページのマークアップやスタイル、スクリプトには、おかしいところが多くあります。その多くは、解説や例を作る上でのやむを得ない事情によるもので、他のページではちゃんとしています。

また、このウェブサイトの完全なソース・コードをGitHubで公開しています。どのように生成されているかや、どのようなツールを利用しているかなどは、そちらを参照してください。

アイコン

primaryカラーで塗りつぶしたSVGフォーマットの画像です。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものが、ブラウザーによって使い分けられるでしょう。

サイズ

あらゆるサイズ（枠線の幅、フォント・サイズ、行送りの高さ、余白、コンテンツの幅）は、基本の比率である1.272で乗除することで決定しています。この数字は、2乗するとおよそ1.618と、黄金比に近い値になります。

枠線

サンプル 比率 キーワード 使用箇所
0.236 large 引用の左、表ヘッダーの下
0.056 default 表の上、表のセルの下

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

フォント

比率 キーワード 使用箇所
1.272 large 章見出し、説見出し、前の記事
1 default 本文
0.786 small ボタン、メタデータ表記、ページ一覧、前の記事のラベル

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

行送り

  • Nisi do anim veniam aute. Occaecat aute quis velit eiusmod deserunt quis. Fugiat laborum ex enim aute dolore aliqua anim amet est consectetur. Eiusmod proident voluptate laborum anim pariatur et ex sint tempor ea in eu dolore in. Non ut mollit ipsum tempor nostrud quis: default: 本文
  • Mollit culpa in ad labore. Magna cupidatat anim deserunt veniam culpa consectetur. Excepteur ex fugiat nisi voluptate in sunt reprehenderit tempor Lorem qui culpa consectetur consequat magna: small: 章見出し、説見出し、整形済みテキスト

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

余白

  • huge: 章見出しの上、説見出しの上、コンテンツの下、雑記記事でのメタデータ表記の上、前の記事の上
  • large: 項見出しの上、水平線の上下
  • default: 段落など多くのグルーピング要素の上、整形済みテキストの左右内余白、引用の左内余白、リストの左内余白、表のセルの左右内余白、ボタンの左右内余白、サムネイル一覧の項目の縦余白
  • small: 整形済みテキストの上下内余白、引用の上下内余白、表のセルの上下内余白、ボタンの上下内余白、ページの項目の右
  • tiny: アフィリエイトの画像の内余白

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

レイアウト

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

カラムの最大幅は、以下のような計算式で決められており、およそ37remです。

1 / 1.272 * 1.272^16 = 36.9238237858

大きい画面における左の余白は、以下のような計算式で決められており、およそ9remです。

1 / 1.272 * 1.272^10 = 8.7173403377

色

サンプル コントラスト比 キーワード 使用箇所
- - primary ハイパーリンク、ボタンの背景、アイコン
- -
- - background ルート要素の背景、ボタン
- - surface 整形済みテキストの背景、引用の背景、画像の背景、表の背景、アフィリエイトの背景
- - on-background ルート要素

primaryはコントラスト比を、backgroundと4.5以上、on-backgroundと3以上確保しています。他の色はそれぞれ対応する色と7以上確保しています。

フォント

ルート要素にサン・セリフ、コード部分に等幅が使っています。特定のフォントは指定していないので、システム、ブラウザー、またはユーザーの設定がそのまま利用されるでしょう。

文書要素

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

文字サイズは、描画領域の幅に応じて、徐々に大きくなります。最低でもユーザーの指定した標準サイズ（デフォルトでは16px）が確保され、最大で135%です。

セクション

セクションを構成する要素についてです。

body要素

レイアウトはこの要素へのスタイルで実現しています。

章見出し

h1要素は、章見出しとみなし、文字を大きくし、上下にかなり大きく余白をとります。最重要な見出しで、title要素の中身と同じになるでしょう。

Labore Incididunt Do

data-description属性を持つ場合は、疑似要素を使って、その値が追加します。見出しとの間にはEm Dash（U+2014）が挿入されます。

節見出し

h2要素は、節見出しとみなし、文字を大きくし、上にかなり大きく余白をとります。サブ・セクションの見出しに使われるでしょう。

項見出し

h3要素は、項見出しとみなし、上に大きく余白をとります。

コンテンツのグループ化

コンテンツで使われる基本的な要素についてです。

水平線

線の代わりに、Asterhythm（U+2042）を疑似要素で挿入します。主に暗黙のセクションの区切りが挿入される所に恣意的に使用しています。

整形済みテキスト

$ mkdir example

主に英文になることから、行送りを一段階落とします。コード例やコマンドラインでの操作例に使用しています。

Nulla non diam interdum nulla pretium tempus. Vivamus fermentum dui ultricies libero lobortis, nec euismod justo molestie. Sed eget lacinia magna. In hac habitasse platea dictumst. Nulla non leo elit. Mauris ornare condimentum odio. Aenean vel commodo diam. Proin tempor vehicula malesuada.

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/

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

<br>

コード例の場合は、入れ子にされたcode要素のclass属性で、そのコードの言語が明示します。

<pre><code class="language-...">...</code></pre>

引用

Id aliquip consectetur dolor officia aliqua nisi culpa. Eiusmod voluptate nisi fugiat duis adipisicing. Sunt magna magna sunt deserunt. Aliqua consectetur consectetur aliqua ullamco fugiat consectetur tempor sit aute do est ad exercitation. Id fugiat fugiat pariatur anim proident quis.

左にのみ枠線を引きます。

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

  1. Suspendisse adipiscing viverra augue, nec viverra erat interdum nec.
  2. Pellentesque in magna ac massa lobortis pretium sit amet fringilla justo, ut pariatur quis consequat non minim sit quis.
    1. Praesent non est odio, ac ultricies tortor.
    2. Non voluptate nisi mollit nisi consectetur Lorem esse dolor, consequat sit culpa consequat sint est laboris aliqua.

余白以外のスタイルは指定しません。入れ子にした時に、余白が空きすぎないようにします。

  • Sed id purus eu nisi blandit condimentum.
  • Pellentesque sit amet mi ipsum, non scelerisque odio, officia adipisicing cupidatat esse non anim aute.
    • Vestibulum eget nisi ut nulla ultricies mollis.
    • Esse nostrud minim sint ipsum veniam voluptate eiusmod consequat et mollit sit consectetur eiusmod do.

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

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

組み込みスタイルシートを変更しているものは、ハイパーリンクや、強調と、引用元の表記（斜体がないこともあるため）、code fragmentとsample outputとuser input（フォント変更と文字サイズ修正のため）くらいです。

編集

In nisi pariatur ex dolore laborum exercitation tempor lorem aliquip amet consectetur anim labore. Aliquip sunt commodo tempor et dolor nisi sit non esse cupidatat laborum dolor. Sit id reprehenderit tempor proident incididunt sit. Adipisicing et ex quis proident consequat laboris ex ipsum ipsum.

追加した部分が目立ち過ぎないよう、下線を削除します。

埋め込みコンテンツ

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

表

Proin Sed
Erat Eget
Incididunt Proident

背景を塗り、セルの上下に枠線を付けます。ヘッダーのみ下線が太くなります。

Lorem ipsum dolor sit amet, consectetur adipiscing elit Nunc adipiscing massa non urna tincidunt egestas
Donec sollicitudin purus quis vulputate euismod fusce imperdiet justo eget dignissim sodales Aliquam non enim sollicitudin, rhoncus sapien ac, luctus nisl quisque feugiat neque suscipit nisi dictum pretium
Aliqua sint enim duis sint nostrud Ut nostrud aute dolor Lorem ea irure deserunt velit anim eu consectetur

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

Sunt nisi eu Laborum ad proident Enim reprehenderit ad

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

フォーム

ボタン

角を直角にし、文字を小さく、太くします。

ラベルが長い場合は、折り返されるでしょう。

アフィリエイト

itemprop属性の値としてarticleBodyを持つ要素の先頭にあるaside要素は、アフィリエイト画像とみなし、常に幅いっぱいに表示します。要素の縦幅は10行分になります。画像そのものは縦横比を維持して拡大・縮小され、中央に寄せて表示されます。

アフィリエイト画像の多くは背景色が白のため、背景色（surface）と乗算して溶け込ませます。そのためかなり画像が暗くなるでしょう。

<div itemprop="articleBody">
	<aside>
		<figure>
			<a href="...">
				<img alt="..." height="..." src="..." width="...">
			</a>
		</figure>
	</aside>

	...
</div>

横長の画像でも、中央に寄せられるでしょう。

署名欄

John Doe

クラス名としてbylineを持つ要素は、署名欄とみなし、文字を太くします。

コード・ハ⁠イ⁠ラ⁠イ⁠ト

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

そのコンテンツの言語が明示されているcode要素は、コードとみなされ、HTMLファイルを作成する時にhighlight.jsを使って構文強調されます。動的に構文強調されることはありません。

ハイライトのカラー・スキームはSolarizedから借用しています。背景色が違うので、読みやすさは劣ります。

メタデータ表記

クラス名としてmetalineを持つ要素は、メタデータ表記とみなし、文字を小さくし、行送りが詰められます。説見出しに続く場合は、上の余白を詰めます。雑記記事や投稿一覧の日付表記などで使われます。

<p class="metaline">
	<time datetime="...">...</time>
</p>

Enim Qui Eu Ipsum Minim

雑記記事で使われる場合は、上にかなり大きく余白をとり、続く見出しとの間の余白を詰めます。

ページ一覧

例はヘッダーを参照してください。

クラス名としてpagesを持つ要素は、ページ一覧とみなし、文字を小さくし、項目を横並びに配置します。カラム幅におさまらない場合は、折り返されるでしょう。

<ul class="pages">
	<li>
		<a href="...">...</a>
	</li>

	...
</ul>

投稿一覧

  1. Curabitur pellentesque dolor eu fringilla eleifend

  2. Aliquam erat volutpat. In nulla leo, porta vel ornare ac, aliquet eu neque malesuada fames ac ante

クラス名としてpostsを持つ要素は、投稿の一覧とみなし、リストのブレットやインデントを削除します。またメタデータ表記と文の間の余白を詰めます。

<ol class="posts">
	<li>
		<p class="metaline">
			<time datetime="...">...</time>
		</p>

		<p>
			<a href="...">...</a>
		</p>
	</li>

	...
</ol>

前の記事

クラス名としてprevを持つ要素は、前の記事へのナビゲーションとみなし、上にかなり大きく余白を確保し、小さい文字でラベルを挿入します。ラベルは疑似要素で挿入されます。

<p class="prev">
	<a href="..." rel="prev">...</a>
</p>

陳列棚

クラス名としてshowcaseを持つ要素は、陳列棚とみなし、グリッドに沿って画像が並べます。描画領域に応じて、1行につき1つから4つ、下端をそろえて表示されるでしょう。

<ol class="showcase">
	<li>
		<a href="...">
			<img alt="..." height="..." src="..." width="...">
		</a>
	</li>

	...
</ol>

さらにクラス名としてonelineを持つ場合は、常に1行につき3つだけ並べます。

<ol class="showcase oneline">
	<li>
		<a href="...">
			<img alt="..." height="..." src="..." width="...">
		</a>
	</li>

	...
</ol>

append-next

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