目次

1. このスタイル・ガイドについて
2. アイコン
3. カラーパレット
4. フォント
5. レイアウト
   1. 行あたりの文字数
6. コア
   1. セクション
   2. コンテンツのグループ化
   3. 語・句・文単位での意味付け
   4. 編集
   5. 埋め込みコンテンツ
   6. 表
7. ずらし
8. 幅いっぱい
9. 横並び
10. はみ出し
11. 投稿一覧
12. コーディング上の決め事

アイコン

ロゴとほぼ同じ画像を正方形にしたSVGフォーマットの画像から生成されています。PNGフォーマットへ変換したものや、更にそのPNGフォーマットの画像をアイコン形式にまとめたものがブラウザーによって適宜使われます。

カラーパレット

• 前景色
• 前景色・近
• 前景色・遠
• 背景色
• 背景色・近
• 背景色・遠
• 強調色
• 補色
• 類似色・負
• 類似色・正
• 分裂補色・負
• 分裂補色・正

フォント

レイアウト

コンテンツのおさまり具合によってレイアウトが切り替わります。ブラウザーの大きさを変更したりすると、その様子が確認できるでしょう。

広い画面でのカラム比は1:1.7になっています。この比率は広い画面での行間と同じです。

また、レイアウトが変わるタイミングで適切に文字サイズも変わります。ただしフルHD以上で表示された場合には適切な文字サイズを選定するのが難しい（または面倒くさい）ため、描画領域の横幅から自動生成しています。

セクション

HTML5が定義するところのセクションを構成する要素についてです。

<h1>...</h1>

<section>
  <h1>...</h1>
</section>

コンテンツのグループ化

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

<p>...</p>

<hr>

$ mkdir example
$ cd example/
$ git init
$ touch README.md
$ git add README.md
$ git commit -m 'Initial commit'
$ git remote add origin https://github.com/hail2u/example.git
$ git push -u origin master

<pre><samp>$ <kbd>mkdir example</kbd>
$ <kbd>cd example/</kbd>
$ <kbd>git init</kbd>
$ <kbd>touch README.md</kbd>
$ <kbd>git add README.md</kbd>
$ <kbd>git commit -m 'Initial commit'</kbd>
$ <kbd>git remote add origin https://github.com/hail2u/example.git</kbd>
$ <kbd>git push -u origin master</kbd>
</samp></pre>

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

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

図

通常はfigure要素を使っています。既にblockquote要素で使われているように内容は画像とは限らないので、強いスタイルは指定していません。figcaption要素は必須ではありませんが、使う場合はfigure要素の最後に置きます。

<figure>
  <img alt="..." height="..." src="..." width="...">
  <figcaption>...</figcaption>
</figure>

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

段落内では様々な意味づけを行うマークアップを使用しています。主に使うものはExample.comなどのハイパーリンクを始め、痛いなどの強調やとても痛い！などのより強い強調、Wikipediaなどの出典元の明示、"HTML5" is widely used as a buzzwordなどのインラインでの引用、WWWなどの略語、<code>などのコード断片、fooなどの変数、Hello World!などのプログラム出力、Enterなどのキー入力、注意を向けさせたいなどの単なるマーク、これらをあまり逸脱しない形でスタイルしています。

ただし、ハイパーリンクは多くの場合本文以外では下線を消しています。また、強調においては日本には斜体の文化は無いので太字としています。

編集

より良い編集履歴を残すため、インラインで追加した部分は特に何もせず、削除した部分は取り消し線を加えています。単なる追記等の場合はそのことを明示するだけに留め、ins要素でマークアップはしていません。

埋め込みコンテンツ

画像や動画はfigure要素を使って参照します。

<figure>
  <img alt="..." height="..." src="..." width="...">
</figure>

表

図と同じように本文と明確に区別ができるように、下線を付けるようにしています。ヘッダーのみ下線は少し太くなります。

<table>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

横に長くはみ出す場合は、横スクロールバーが自動的に表示されます。

特別なマークアップの必要はありません。

ずらし

Phasellus erat libero, vestibulum nec efficitur in, blandit sit amet magna. Aliquam eros arcu, mattis id augue nec, fermentum sollicitudin mauris. Cras blandit massa nisl, id consequat massa aliquam a. Etiam erat turpis, laoreet pulvinar elementum vitae, dictum a ligula. Vestibulum egestas neque quis velit consequat, a sodales urna scelerisque. Phasellus tempus tortor at fringilla tincidunt. Vestibulum sed libero elit.

Duis augue nunc, facilisis at diam eget, laoreet blandit eros. Nulla varius auctor metus, id mattis ante efficitur in. Nullam nec eros eu est maximus iaculis. Aliquam ac blandit felis. Suspendisse bibendum nisi a nisi congue, id pellentesque dolor placerat. Fusce eu eros mi. Suspendisse potenti. Duis ex mi, dictum vitae lectus et, porta vehicula sem.

<figure class="displace">
  <img alt="..." height="..." src="..." width="...">
  <figcaption>...</figcaption>
</figure>

幅いっぱい

Ut at sapien id tortor mattis pharetra in nec felis. In dapibus gravida eleifend. Vestibulum viverra vulputate molestie. Nullam auctor hendrerit rhoncus. Nulla rutrum, arcu eget hendrerit dignissim. Donec scelerisque lacus eu dui posuere gravida. Nulla venenatis bibendum risus et fringilla. Vivamus sed arcu a lacus iaculis efficitur. Curabitur pellentesque pellentesque tempus. Maecenas consectetur commodo leo ut sagittis.

<figure class="fill">
  <img alt="..." height="..." src="..." width="...">
  <figcaption>...</figcaption>
</figure>

フラットなリスト

• Lorem
• Aliquam
• Proin
• Donec
• Phasellus

<ul class="flat">
  <li>...</li>
</ul>

飛び出し

Vestibulum ultricies urna risus. Duis vitae fringilla velit. Etiam vestibulum, tortor nec vehicula mattis, magna ligula scelerisque risus, sed viverra orci ligula nec purus. Vivamus eleifend, magna id fermentum malesuada, orci lorem tincidunt ipsum, ut elementum purus mauris at est.

Mauris sagittis tellus magna, sit amet sodales sem bibendum sit amet. Nam pharetra vulputate leo vitae faucibus. Praesent ac semper augue, ut dignissim dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean fermentum dui sit amet leo auctor suscipit. Nulla nulla lacus, elementum convallis aliquet eget, tincidunt quis diam. Donec id dictum justo, at blandit ex.

<figure class="hang">
  <img alt="..." height="..." src="..." width="...">
</figure>

Pellentesque Habitant Morbi Tristique Senectus

Praesent quis erat sed ex dictum elementum ac vitae magna. Morbi tempus est vitae enim rutrum, vel volutpat nisi rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vestibulum nisi mi, accumsan bibendum dui condimentum ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

見出しに使うこともできます。

<h1 class="hang">...</h1>

Dolor proident pariatur incididunt voluptate laborum reprehenderit consectetur et id incididunt. Reprehenderit aliquip ullamco cillum ipsum eiusmod proident sunt ex in elit velit magna. Occaecat velit nulla occaecat elit in occaecat consequat deserunt quis. Velit est proident anim pariatur consequat. Exercitation veniam non voluptate ipsum fugiat adipisicing.

aside要素に使うと傍注のような体裁になります。

<aside class="hang">
  <p>...</p>
</aside>

投稿一覧

1. 2012/02/25 Curabitur pellentesque dolor eu fringilla eleifend
2. 2010/04/07 Nullam in ligula luctus, blandit risus eget, mattis enim
3. 2011/09/12 Aliquam erat volutpat. In nulla leo, porta vel ornare ac, aliquet eu neque malesuada fames ac ante
4. 2009/11/17 Nulla sit amet diam non leo commodo imperdiet sed id neque
5. Duis tincidunt justo id fringilla commodo
6. Phasellus a nibh vitae ipsum ultricies elementum

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

コーディング上の決め事

以下はマークアップやスタイル、スクリプトにおけるコーディング規約もどきです。