スタイル・ガイド

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

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

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

ベースライン

古いブラウザーでは、ベースラインとして確保されたスタイルと、不完全に模倣されたスタイルが適用されるでしょう。そのようなブラウザーでは、このページでのみ使われているテスト用のスタイルやスクリプトは動かないかもしれません。

このベースラインのスタイルは特集ページの文書にも流用されます。

アイコン

Noto Sans CJK JPを使ってウェブサイト名を打ち出したSVGフォーマットの画像です。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものが、ブラウザーによって使い分けられるでしょう。

ロゴ

アイコンと同じ色合いのロゴが、ヘッダーに表示されます。ただし、ホーム・ページでは表示されず、ロゴ相当のテキストがタグラインに表示されます。使われるフォントは環境に依存するので、アイコンとは違う場合があります。

サイズ

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

枠線

サンプル 比率 キーワード 使用箇所
0.236 huge 引用の左
0.146 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.
  • 大見出し、小見出し、整形済みテキスト、検索入力ボックス、ボタン、タグライン、メタデータ表記: 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.

文字サイズが大きかったり、伝統的に低めに設定されていたりする要素で調節しています。

余白

  • huge: 大見出しの上、タグラインの上、コンテンツの上下、雑記記事でのメタデータ表記の上、補助ナビゲーションの上
  • large: 小見出しの上、水平線の上下左
  • default: 段落など多くのグルーピング要素の上、投稿一覧の項目の上
  • small: 整形済みテキストの内余白、表のセルの左右内余白、ボタンの上下内余白、検索ボックスの検索入力ボックスの右、サムネイル一覧の項目の間
  • tiny: 表のセルの上下内余白、検索入力ボックスの内余白、ページの項目の右、アフィリエイトの画像の内余白、フットリンクの項目の右

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

レイアウト

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

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

1.272^15 = 36.9238237858

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

1.272^10 = 11.0884569097

色

色 色コード コントラスト比 使用箇所
前景色 - - ルート要素
前景色・低差 - - 水平線、整形済みテキスト、引用、日時、検索入力ボックスの枠線（フォーカス）、ボタンの背景
中間色 - - 引用の左枠線、表のセルの枠線、検索入力ボックスの枠線
背景色 - - ルート要素の背景、ボタン
背景色・低差 - - 整形済みテキストの背景、画像の背景、表ヘッダーの背景

白に近い背景と黒に近い文字、それぞれのコントラストを少し落とした色、それらの中間色の計5色を利用しています。対応する色とのコントラスト比を7以上確保しています。

フォント

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

文書要素

rem単位を利用するため、文字サイズはこの要素で指定しています。他に背景色や文字色、フォント、行間もこの要素で指定しています。文字にx-heightという概念のない日本語で主に書かれているので、行間は少し多めに1.618にしています。

文字サイズは、描画領域の幅に応じて、段階的に大きくなります。最低でもユーザーの指定した標準サイズ（デフォルトでは16px）が確保され、大きい画面ではその112.5%、さらに大きい画面では125%になるでしょう。

セクション

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

body要素

上記レイアウトはこの要素へのスタイルで実現しています。余白やレイアウト以外のスタイルは指定していません。

セクション構成物

他、セクションを作成する、section、nav、articleとaside要素では、特に何もスタイルを指定していません。つまり、透過的な挙動をします。

セクション見出し

複数行の見出し向けに行間を少し落としています。また、上部の余白を、組み込みスタイルシートより多めに確保しています。

大見出し

h2要素は、大見出しとみなし、大きい文字になり、上にかなり大きく余白を確保します。

小見出し

h3要素は、小見出しとみなし、上に大きく余白を確保します。続く要素がp要素の場合、間の余白が詰められます。

連絡先

Contact: E-mail

よく使われるフォントに斜体を持たないものがあるため、斜体が使われないようにしています。他は指定していないので、これも透過的な挙動をするでしょう。

コンテンツのグ⁠ル⁠ー⁠プ⁠化

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

段落

余白以外のスタイルは指定していません。様々な所で使用されることから、他と競合しないようにするためです。

水平線

主に暗黙のセクションの区切りが挿入される所に恣意的に使用しています。罫線の代わりに表示されるMedium Six Spoked Asterisk（U+1F7B6）は、疑似要素で挿入されています。

整形済みテキスト

$ 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.
    1. Praesent non est odio, ac ultricies tortor.

組み込みスタイルシートとあまり違わない見た目になるように、双方共にスタイルは最小限にとどめています。序列付きリストではアラビア数字をそのマークに使用されるでしょう。

  • Sed id purus eu nisi blandit condimentum.
  • Pellentesque sit amet mi ipsum, non scelerisque odio.
    • Vestibulum eget nisi ut nulla ultricies mollis.

序列なしリストではビュレット（U+2022）がそのマークに使われます。組み込みスタイルシートと同じく、入れ子にされるにつれマークが変化するでしょう。

図

通常はfigure要素を使っています。主に画像の参照に使います。

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

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

ハイパーリンクの色

色 色コード コントラスト比
未訪問 - -
未訪問 - -
訪問済み - -
訪問済み - -

ハイパーリンクの色は、背景色とコントラスト比を4.5以上確保しています。文字色とは3です。

編集

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.

より良い編集履歴を残すため、追加した部分は特に何もせず、削除した部分の文字はコントラスト比が大きく下がります。単なる追記等の場合はそのことを明示するだけに留め、ins要素でマークアップはしていません。

埋め込みコ⁠ン⁠テ⁠ン⁠ツ

画像や動画はfigure要素を使って参照します。再描画や再配置が極力起こらないように、幅や高さを指定します。このカラムの幅から飛び出さないよう、スタイルシートで幅を制限しています。

表

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

セル内で改行したい場合は、改行文字を挿入します。

フォーム

静的なウェブサイトのため、フォーム関連要素はあまり使用しません。

フォーム

特別なスタイルは何も当たりません。

検索入力ボックス

背景色はこのウェブサイトのカラー・パレットにはない完全な白（white）です。

ボタン

小さい文字ですが太字になります。

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

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

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

投稿一覧

  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
  3. Nullam in ligula luctus, blandit risus eget, mattis enim
  4. Ad duis aute reprehenderit duis Lorem reprehenderit eu deserunt exercitation in dolore voluptate ea ad anim sint est occaecat exercitation elit aliquip
  5. Lorem aute elit veniam esse magna veniam amet est laboris aute exercitation duis cillum elit incididunt incididunt consectetur
  6. Laboris laboris eu aute veniam proident ex amet quis pariatur aliquip consectetur sit qui cupidatat excepteur irure

クラス名としてpostsを持つ要素は、リンクや短文、画像などの平板な一覧として表示されます。

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

矩形フォーム

クラス名としてrectformを持つ要素は、矩形のフォームとみなし、前の要素や続く段落との間の余白を調整します。主にform要素や、スクリプトの実行に使われるbutton要素を括るp要素に使われます。

<p class="rectform">
	<button>...</button>
</p>

雑記記事の最後にある場合は、前の記事へのリンクとみなされます。疑似要素でラベルが小さい文字で挿入されるでしょう。

サムネイル一覧

クラス名としてthumbsを持つ要素は、サムネイルとみなされます。描画領域に応じて、1行につき1つから4つ表示されます。

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

アフィリエイト

Culpa commodo esse exercitation incididunt occaecat. In Lorem ex veniam mollit consequat aliqua anim laboris laboris duis culpa minim.

Minim est non sint ex ea consequat voluptate veniam. Aliquip tempor elit sint sint nisi. Minim qui laboris quis sit tempor sunt labore sit ut sint qui irure sit. Eu excepteur consectetur tempor dolor et anim aute sunt culpa ea pariatur commodo. Duis laborum duis enim ad est cupidatat lorem.

imteprop属性の値としてarticleBodyを持つ要素の直後にあるaside要素は、アフィリエイト画像を格納するものとみなし、右にぶら下げて配置されます。続く文章は画像を回り込むように流れます。アフィリエイト画像の多くは、透過ではなく白を背景を持つため、余白にはこのウェブサイトのカラー・パレットにはない白（white）を指定しています。

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

	...
</main>

画像の最大幅は以下のような計算式で決められており、およそ38%です。

1 / 1.272^4 * 100% = 0.38198961383%

雑記記事のヒーロー画像

imteprop属性の値としてarticleBodyを持つ要素の直後にあるfigure要素は、ヒーロー画像とみなし、コンテンツ幅より大きく表示し、記事タイトルとの間を詰め、下に大きく余白が確保されます。小さい画面では幅いっぱいに表示されますが、大きくなるにつれて右に余白ができます。画像は、常にアスペクト比を維持して拡大または縮小されます。

<main class="content" itemprop="articleBody">
	<figure>
		<a href="...">
			<img alt="..." height="..." src="..." width="...">
		</a>
	</figure>

	...
</main>

append-next

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

relative-time

クラス名としてjs-relative-timeを持ち、かつ正しいdatetime属性を持つtime要素は、相対日時に変換されます。

unutm

Test unutm.js

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