このスタイル・ガイドは、このウェブサイトのコンテンツが、どうマークアップされるべきかの解説と、どうスタイルが当たるのかの確認のためにあります。
マークアップはHTMLのソースを、スタイルについてはこのページで参照されている非圧縮のCSSファイルを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはプレビューを作る上でのやむを得ない事情によるものです。
レイアウトの位置確認のために、空いているところをダブルクリックするとグリッドと要素のアウトラインをトグルすることができます。グリッドはCSSグラデーションを利用した簡単なもののため、描画領域の幅によっては数ピクセル程ずれることがあります。
また、日付をクリックすることでアイキャッチ画像の切り替えを、見出しをクリックすることでタグラインの切り替えを、タグラインをクリックすることでその長さの切り替えを、それぞれ行うことができます。
ロゴとほぼ同じ画像を正方形にしたSVGフォーマットの画像から生成されています。PNGフォーマットへ変換したものや、更にそのPNGフォーマットの画像をアイコン形式にまとめたものがブラウザーによって適宜使われます。
Noto Sans Japaneseとシステムでよく使われる等幅フォントを指定しています。また、ほぼすべてが日本語であることも踏まえ、斜体は使いません。
| 本文 | Noto Sans Japanese |
|---|---|
| The quick brown fox jumps over the lazy dog. | |
| The quick brown fox jumps over the lazy dog. | |
| コード | MenloまたはConsolas |
| 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になっています。
以下の段落のアスタリスクは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段階落としてあります。また、本文2行分に3行収まるように行間を調節しています。
$ mkdir example
<pre>...</pre>
コード例の場合は、ネストされた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> <p>[Jane] then said she liked [...] fish.</p> </blockquote>
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（コード断片）、variables（変数）、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>
トップレベル・セクションの見出しに続くaside要素に、figure要素があると、サブ・カラムに配置されます。主にアフィリエイト画像に使用します。
<h1>...</h1>
<aside>
<figure>
<img alt="..." src="...">
</figure>
</aside>
トップレベル・セクションの見出しに隣接する画像は、幅いっぱいに大きく広がって表示されます。主に記事の画像に利用されます。
<h1>...</h1>
<figure>
<img alt="..." src="...">
</figure>
トップレベル・セクションの見出しに続くol要素は、平板な一覧として表示されます。li要素がtimeとa要素で構成されている場合は、日付が右寄せで表示されます。日付けは広い画面では左に表示されます。この日付も相対日時にしたい場合はjs-reldateというクラス名が必要です。
<section>
<h1>...</h1>
<ol>
<li>
<time class="js-reldate" datetime="...">...</time>
<a href="...">...</a>
</li>
</ol>
<section>