アイコン

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

サイズ

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

1 / 1.272 * 1.272^16 = 36.9238237858

1 / 1.272 * 1.272^10 = 8.7173403377

色

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

フォント

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

文書要素

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

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

セクション

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

コンテンツのグループ化

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

$ 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/

<br>

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

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

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

編集

デメリットをまったく説明されなかったので華麗にスルーした。残りの40%は、。けどなんかしっくり来なかった……。とresultsがqueryの子になっているが、JSONP-Xでは、。広告ドリブン・ウェブデザイン。その変更とはエラーの検知後は巡回頻度を徐々に下げていくと言うもので、正常に取得できた場合は一時間に一回というデフォルトの巡回頻度に戻ります。冗談ですが（5%くらいは本気かも）。いろいろ出来そうな。大山でも活躍してくれた。こうするとコールバック関数内でurls[0]を参照すれば、どのURLへのリクエストした結果として呼び出されたコールバック関数なのかすぐにわかる。

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

埋め込みコンテンツ

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

表

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

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

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

フォーム

アフィリエイト

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から借用しています。背景色が違うので、読みやすさは劣ります。

ロゴ

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

クラス名としてlogoを持つ要素は、ロゴとみなし、文字を太く、大文字にします。使われるフォントは環境に依存するでしょう。ホームにはありません。

<p class="logo">
	<a href="...">...</a>
</p>

メタデータ表記

2005年8月14日

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

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

ページ一覧

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

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

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

	...
</ul>

投稿一覧

1. 2012年2月25日

   残念ながらツールの助けは必要になるだろうが、特にHTMLやJavaScriptの助けは必要としない

2. 2011年9月12日

   モニター名をクリックすると各モニターの詳細ページへ飛ぶ

クラス名として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に非対応の場合は、残りのコンテンツを含むウェブページへのリンクを表示します。