スタイル・ガイド - いろいろ

How I Markup & Style This Website

マークアップはHTMLのソースを、スタイルについてはこのページで参照されている非圧縮のCSSファイルを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはプレビューを作る上でのやむを得ない事情によるものです。

デバッグ

レイアウトの位置確認のために、空いているところをダブルクリックするとグリッドと要素のアウトラインをトグルすることができます。グリッドはCSSグラデーションを利用した簡単なもののため、描画領域の幅によっては数ピクセル程ずれることがあります。

また、最初の見出しをクリックすることでホームでのスタイルへの切り替えを、日付をクリックすることでアイキャッチ画像の切り替えを、それぞれ行うことができます。

印刷向けスタイルシート

必要のないものを隠し、適切な位置で改行されるように調節しています。

アイコン

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

Uppercase H

カラーパレット

フォント

本文 San FranciscoまたはSegoe UI
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.

レイアウト

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

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

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

行あたりの文字数

Lorem ipsum dolor sit amet, consectetur adip*iscing elit. Suspendisse moll*is elementum leo sed feugiat.

直前の段落のアスタリスクは45文字目と75文字目に打ってあります。一行の文字数は45–75文字(line-height: 1.5の場合)と言われているので、このアスタリスクが行をまたいでいると適切な文字数で折り返されているということになります。

セクション

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

body

文字はブラウザーの初期設定のまま(通常は16px)で表示されます。行間はx-heightという概念のない日本語がメインなので少し多めに1.7としています。

セクション構成物

セクションを作成する、sectionnavarticleaside要素では、特に何もスタイルを指定していません。

見出し

セクションの見出しはh1要素でマークアップされます。

<h1>...</h1>

小見出し

セクション内の小見出しでもh1要素を使います。必ずsection要素を組み合わせることで、CSSでスタイリングできるようにしています。

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

コンテンツのグループ化

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

段落

様々な所で使用されるので、他とバッティングしないように相殺可能なマージン以外のスタイルは指定していません。

<p>...</p>

水平線

主に暗黙のセクションの区切りが挿入される所に恣意的に使用しています。線の代わりに表示されるアステリズムはSVGです。


<hr>

整形済みテキスト

主にコードの表示やコマンドラインでの操作例に使用しています。主に英文になることから、ブラウザーの慣習に従ってフォントサイズを1段階落としてあります。また、本文とのバランスをとるため、pre要素の3行が本文の2行に相当するようにしてあります。

$ 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要素で括り、引用元の表記はfigcaptioncite要素を組み合わせて行います。

The blockquote element represents a section that is quoted from another source.

Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g. by server-side scripts collecting statistics about a site's use of quotations), not for readers.

4.5.4 The blockquote element
<figure>
  <blockquote>
    <p>...</p>
  </blockquote>

  <figcaption>— <cite>...</cite></figcaption>
</figure>

序列付きリストと序列なしリスト

双方共にデフォルトとあまり違わない形になるようにスタイルは最小限にとどめています。序列付きリストではアラビア数字をそのマークに使用します。

  1. Suspendisse adipiscing viverra augue, nec viverra erat interdum nec.
  2. Pellentesque in magna ac massa lobortis pretium sit amet fringilla justo.
    1. Nulla blandit porta arcu, at sagittis leo ullamcorper vel.
    2. Praesent non est odio, ac ultricies tortor.
  3. Nulla iaculis leo a nulla facilisis congue.
  4. Vestibulum in ante et nibh porttitor pharetra.
<ol>
  <li>...
    <ol>
      <li>...</li>
    </ol>
  </li>
</ol>

序列なしリストではデフォルトと同じくネストされるにつれそのマークが変化します。

  • Sed id purus eu nisi blandit condimentum.
  • Pellentesque sit amet mi ipsum, non scelerisque odio.
    • Vestibulum eget nisi ut nulla ultricies mollis.
    • Sed vel eros a diam tincidunt sodales consectetur eu nisi.
  • Etiam at lorem id sapien blandit faucibus.
  • Quisque et metus non dui aliquam auctor sit amet non orci.
<ul>
  <li>...
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

関連リスト

内部、特にdd要素内で様々な要素が使われたり使われなかったりすることから、スタイルは最小限にとどめています。

Proin gravida sodales lectus, sed placerat urna posuere sit amet.
Nam semper blandit mi, sed pulvinar tellus posuere eu. Phasellus vitae ipsum lacus. Fusce viverra odio in augue vestibulum et fermentum nisi consectetur. Aenean a velit enim.
Mauris sed urna a odio condimentum elementum.
Vivamus congue laoreet augue, quis euismod urna placerat a. Duis nulla lacus, laoreet commodo consequat vel, convallis at risus.
Etiam congue porta ligula, quis interdum justo tincidunt ac. Quisque ac gravida arcu. Curabitur blandit tortor quis velit porta quis euismod arcu posuere. Suspendisse potenti.
Quisque at sem at justo eleifend aliquet ac quis quam.
Praesent interdum ullamcorper volutpat. Maecenas nec lectus risus. Mauris sit amet orci metus. Duis tincidunt, tortor in laoreet rutrum, libero tellus ornare nibh, a accumsan quam massa vel lorem.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Placeholder Image
Random PlaceHolder Image
<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要素を使って参照します。

How I Markup & Style This Website
<figure>
  <img alt="..." height="..." src="..." width="...">
</figure>

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

Proin Nunc Sed
Erat Eget Quis
Moi Donec Ante
<table>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit Nulla interdum nibh a pretium gravida Nullam id justo ultricies lectus aliquam molestie nec non turpis Nunc adipiscing massa non urna tincidunt egestas
Donec sollicitudin purus quis vulputate euismod Sed non ligula eu eros venenatis varius a sit amet risus Mauris a purus varius, aliquet elit quis, blandit nisi Fusce imperdiet justo eget dignissim sodales
Aliquam non enim sollicitudin, rhoncus sapien ac, luctus nisl Fusce accumsan risus id turpis congue luctus Quisque feugiat neque suscipit nisi dictum pretium Donec id quam nec turpis pharetra viverra.

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

ずらし

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.

Placeholder Image
Random Placeholder Image

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="..." src="...">
  <figcaption>...</figcaption>
</figure>

幅いっぱい

Placeholder Image
Random Placeholder Image

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="..." src="...">
  <figcaption>...</figcaption>
</figure>

フラットなリスト

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

寄せ

Placeholder Image

Nam sapien lacus, suscipit in convallis at, eleifend non orci. Fusce nunc dolor, dictum in mi ut, tempus rutrum metus. Vivamus porttitor ac diam sit amet vulputate. Vestibulum pellentesque lacus varius ligula scelerisque tincidunt. Quisque aliquam orci sed sem consectetur, eu pharetra nisl tempus. Donec in eros consequat, porta nisi vel, porta urna. Aliquam in nunc venenatis, ultricies ipsum ultricies, aliquet urna.

<figure class="move">
  <img alt="..." src="...">
</figure>

画像を寄せた場合、幅はおよそ1/3ほどまでに制限されます。

Placeholder Image

Suspendisse cursus massa ut erat varius, a tempus mi venenatis. Vivamus molestie nibh nec rutrum finibus. Duis egestas hendrerit ultricies. In rutrum lacus at mattis blandit.

Quisque in diam eu odio accumsan sodales sit amet in velit. Vestibulum tellus enim, eleifend sit amet commodo id, aliquam et libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ipsum arcu, gravida vitae rutrum nec, lacinia eget lorem. Duis ultrices est odio, vitae dictum lorem rhoncus at. Vivamus vehicula consectetur quam vel placerat. Nunc orci eros, sagittis ut velit lacinia, fringilla blandit libero.

高さも8行分ほどまでに制限されます。

飛び出し

Placeholder Image

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="..." src="...">
</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.

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

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 class="note">
  <p>...</p>
</aside>

広い画面では傍注のような体裁になります。

おすすめ

Sit eu Cillum Dolor Commodo Ea Nostrud

<section class="pick">
  <a href="#">
    <h1>...</h1>

    <footer>
      <p><time datetime="...">...</time></p>
    </footer>
  </a>
</section>

広い画面では幅いっぱいに広がり、より目立つようにできます。

投稿一覧

  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. Nulla sit amet diam non leo commodo imperdiet sed id neque
  5. Duis tincidunt justo id fringilla commodo
<ol class="posts">
  <li>
    <div class="info">
      <time datetime="...">...</time>
    </div>

    <a class="title" href="...">...</a></li>
</ol>

参照

See also: Lorem ipsum

<p class="seealso">Label: <a href="...">...</a></p>

コーディング上の決め事

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

マークアップ

  • HTML StandardのHTML文法を使ってUTF-8で書きます
  • インデントは半角空白を二文字使います
  • 要素名や属性名は全て小文字に統一します
  • 属性値を括るクオートは省略しません
  • 真偽値を取る属性値はその値を省略します
  • 属性の記述順
    1. id属性
    2. class属性
    3. style属性
    4. その他属性
    5. WAI-ARIA(role属性とaria-*属性)
    6. カスタムデータ属性(data-*属性)
    7. Microdata(item*属性)
  • クラス名やIDはハイフンつなぎで指定します
  • JavaScript等で動的に生成されるコードも上記決め事に従います
  • HTMLHintでチェックします

スタイル

  • SassのSCSS記法を使ってUTF-8で書きます
  • インデントは半角空白を二文字使います
  • セレクターは一行につき一つに制限します
  • 定義は一行につき一つに制限します
  • プロパティーのアルファベット順に定義を記述します
  • 省略系のプロパティーはなるべく使いません
    • marginpaddingborderプロパティーに限って使うことがあります
  • 値はなるべく一行(80文字)に収まるように書きます
    • linear-gradient()等の複雑なものに限って行を分けて書くことがあります
  • ベンダー拡張プリフィックス付きのプロパティーはその時点での実装を考慮して記述します
  • Sass
    • BEMの思想を流用し、ファイルを作成してブロックを、ネストでエレメントを、&を使ったネストでモディファイアーを表現します
    • 変数はなるべく局所で定義します
    • 関数は使いません
    • ミックスインは使いません
    • プレースホルダー・セレクターは使いません
  • stylelintでチェックします

スクリプト

  • ES2016に従ってUTF-8で書きます
  • インデントは半角空白を二文字使います
  • ESLintでチェックします