このスタイル・ガイドは、このウェブサイトのコンテンツが、どうマークアップされるべきかの解説と、どうスタイルが当たるのかの確認のためにあります。
マークアップはHTMLのソースを、スタイルについてはこのページで参照されている非圧縮のCSSファイルを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはプレビューを作る上でのやむを得ない事情によるものです。
レイアウトの位置確認のために表示されている、グリッドと要素のアウトラインは、空いているところをダブルクリックすると切り替えられます。グリッドはCSSグラデーションを利用した簡単なもののため、描画領域の幅によっては数ピクセル程ずれるかもしれません。
タグラインは、タグラインをクリックすることでその長さを切り替えられます。また、最初の見出しをクリックすることで、その表示自体を切り替えられます。
日付をクリックすることで、夜間モードの有効・無効を切り替えられます。ユーザーには明示的に切り替える手段を提供していません。
ロゴとほぼ同じ画像を正方形にしたSVGフォーマットの画像から生成されています。PNGフォーマットへ変換したものや、更にそのPNGフォーマットの画像をアイコン形式にまとめたものがブラウザーによって適宜使われます。
白い背景と黒に近い文字に、青い強調色とその彩度を落とした色をアクセントに使っています。夜間には自動で背景が黒になりますが、ユーザーには制御できません。
Noto Sans JPを本文に、そして等幅をコードに指定しています。コードの英字部分には様々なローカル・フォントが使われます。また、ほぼすべてが日本語であることも踏まえ、斜体は使いません。
| 本文 | The quick brown fox jumps over the lazy dog. |
|---|---|
| The quick brown fox jumps over the lazy dog. | |
| コード | The quick brown fox jumps over the lazy dog. |
| The quick brown fox jumps over the lazy dog. |
コンテンツのおさまり具合によってレイアウトが切り替わります。ブラウザーの大きさを変更したりすると、その様子が確認できるでしょう。しかし、疑似的な3カラムのため、左右のカラムが使われることはあまりなく、1カラムとほぼ同じです。
広い画面でのカラム比は1.7:4.913:1になっています。4.914は1.7^3で導き出されます。
以下の段落のアスタリスクは45文字目と75文字目に打ってあります。一行の文字数は45–75文字（line-height: 1.5の場合）が適切と言われているので、このアスタリスクが行をまたいでいることで確認できるでしょう。
Lorem ipsum dolor sit amet, consectetur adip*iscing elit. Suspendisse moll*is elementum leo sed feugiat.
このメイン・カラムの幅は以下のような計算式で決められており、およそ30remです。
1.25 * 1.7^6 = 30.17196125
HTML文書のルート要素であるhtml要素についてです。
文字はブラウザーの画面幅に応じて徐々に大きくなります。例えば720pxなら18px、1920pxなら24px、3200pxでは40pxになるでしょう。このサイズはユーザーの設定に依存して前後します。
行間は、x-heightという概念のない日本語がメインなので、少し多めに1.7としています。
HTML仕様が定義するところのセクションを構成する要素についてです。
セクションを作成する、section、nav、articleとaside要素では、特に何もスタイルを指定していません。
セクションの見出しはh1要素でマークアップされます。
<h1>...</h1>
コンテンツで使われる基本的な要素についてです。
様々な所で使用されるので、他とバッティングしないように相殺可能なマージン以外のスタイルは指定していません。
<p>...</p>
主に暗黙のセクションの区切りが挿入される所に恣意的に使用しています。線の代わりに表示されるアスタリスクはテキストです。
<hr>
主にコード例やコマンドラインでの操作例に使用しています。主に英文になることから、ブラウザーの慣習に従ってフォント・サイズを1段階落としてあります。同時に行間も一段階落とし、空きすぎないようにしています。
$ mkdir example
<pre>...</pre>
折り返せるなら折り返し、折り返せない場合は横スクロールで閲覧する必要があるでしょう。特別なマークアップやクラス名を振る必要はありません。
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/this/is/a/long/url/example/It/can/not/be/wrapped/automatically/with/word/break/or/pre/wrap/property/So/overflow/property/should/be/auto/
コード例の場合は、ネストされたcode要素のclass属性で、そのコードの言語を明記します。
<DOCTYPE html><pre><code class="language-...">...</code></pre>
内部で様々なスタイルが使用されるので、レイアウト以外のスタイルは指定しません。字体に斜体を採用すべきところですが、メイリオなどが和文部分に斜体を持っていないのでそれを考慮して無指定にしています。マークアップは、通常、全体をfigure要素で括り、引用元の表記はfigcaptionとcite要素を組み合わせて行います。
The blockquote element represents a section that is quoted from another source.
blockquote element<figure>
<blockquote>
<p>...</p>
</blockquote>
<figcaption>— <cite>...</cite></figcaption>
</figure>
双方共にデフォルトとあまり違わない形になるようにスタイルは最小限にとどめています。序列付きリストではアラビア数字をそのマークに使用します。
<ol>
<li>...
<ol>
<li>...</li>
</ol>
</li>
</ol>
序列なしリストではデフォルトと同じくネストされるにつれそのマークが変化します。
<ul>
<li>...
<ul>
<li>...</li>
</ul>
</li>
</ul>
内部、特にdd要素内で様々な要素が使われたり使われなかったりすることから、スタイルは最小限にとどめています。
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
通常はfigure要素を使っています。既にblockquote要素で使われているように、内容は画像とは限らないので、強いスタイルは指定していません。figcaption要素は必須ではありませんが、使う場合はfigure要素の最後に置きます。
<figure>
<img alt="..." src="...">
<figcaption>...</figcaption>
</figure>
段落内では様々な意味づけを行うマークアップを使用しています。主に使うものはハイパーリンクを始め、強調や重要性、出典元、インラインでの引用
、code fragments（コード断片）、output（出力）、Enter（キー入力）などでしょう。これらはあまり逸脱しない形でスタイルしています。
より良い編集履歴を残すため、インラインで追加した部分は特に何もせず、削除した部分は完全に隠し見せません。単なる追記等の場合はそのことを明示するだけに留め、ins要素でマークアップはしていません。
画像や動画はfigure要素を使って参照します。
<figure>
<img alt="..." src="...">
</figure>
本文と明確に区別ができるように、下線を付けるようにしています。ヘッダーのみ下線は少し太くなります。
| Proin | Sed |
|---|---|
| Erat | Eget |
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
横に長くはみ出す場合は、横スクロールバーが自動的に表示されます。特別なマークアップやクラス名を振る必要はありません。
| 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 |
トップレベル・セクション直下のh1要素は、最重要な見出しとして、大きく余白をとります。広い画面では、必要ならば右カラムも利用します。
トップレベル・セクションのfooter要素は、狭い画面では見出しの上に、広い画面では見出しの左に小さく表示されます。主に記事日時に使われます。相対日時にしたい場合はjs-reldateというクラス名が必要です。
<article>
<footer>
<p>
<time class="js-reldate" datetime="...">...</time>
</p>
</footer>
<h1>...</h1>
...
</article>
子セクション内の小見出しでもh1要素を使います。必ずsection要素を組み合わせることで、CSSでスタイリングできるようにしています。
<section>
<h1>...</h1>
</section>
トップレベル・セクションの見出しに続くul要素は、本のサムネイルとみなし、その表紙が1行で並べられます。狭い画面では3冊、中くらいの画面では4冊、広い画面では5冊表示されます。6冊目以降は表示されません。
<section>
<ul>
<li>
<a href="...">
<img alt="..." src="...">
</a>
</li>
</ul>
</section>
トップレベル・セクションの直下がol要素のみの場合は、写真のサムネイルとみなし、縦横に並べて表示されます。狭い画面では1行に3枚、中くらいの画面では4枚、広い画面では5枚表示されます。
<section>
<ol>
<li>
<a href="...">
<img alt="..." src="...">
</a>
</li>
</ol>
<section>
トップレベル・セクションの見出しに続くol要素は、平板な一覧として表示されます。li要素がtimeとa要素で構成されている場合は、日付が右寄せで表示されます。日付けは広い画面では左に表示されます。この日付も相対日時にしたい場合はjs-reldateというクラス名が必要です。
<section>
<h1>...</h1>
<ol>
<li>
<time class="js-reldate" datetime="...">...</time>
<a href="...">...</a>
</li>
</ol>
<section>
Proin dolor risus, sagittis nec velit nec, vel dignissim tempus mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tincidunt tempus erat id aliquet. Etiam vehicula orci. Donec malesuada vitae nisi quis commodo. Integer ac purus nulla. Donec suscipit enim a ex dapibus, sit amet consequat augue porttitor. Sed mattis fermentum dapibus. Integer at odio sodales, fermentum augue ut, suscipit augue.
トップレベル・セクションの見出しに続くaside要素に、figure要素があると、アフィリエイト画像とみなし、右にぶら下げて配置されます。続く段落の文章は画像を回り込むように流れます。広い画面では右のサブ・カラムも利用するので、画像が大きくなるでしょう。
<h1>...</h1>
<aside>
<figure>
<img alt="..." src="...">
</figure>
</aside>
トップレベル・セクションがnav要素の場合、補助ナビゲーションとみなし、最重要な見出しと同じ量だけ上の余白を確保します。ナビゲーション項目が複数ある場合はリストを利用します。
<nav>
<p>
<a href="...">...</a>
</p>
</nav>