Style Guide

Posted
on
under

Almost Everything about the Markup and Style of This Website.

hail2u.netで使われているマークアップやスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。

見出しとフッター

コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooter要素が配置され、更新日時とカテゴリをそこで示します。

広告

AdSenseまたはAmazonアソシエイトによる広告は常に最初のプライマリー・セクションの直後に挿入します。極端に長いページの場合は、コンテンツ部分の最後にも更に一つ追加することがあります。

デバッグ

デバッグやレイアウトの位置ずれの確認のために、空いているところをダブルクリックするとグリッドをトグルすることができます。このグリッドはCSSグラデーションを利用した簡単なものなので、viewportの幅が奇数の場合は1–8px程ずれますが仕様です。

コーディング上の決め事

コーディングする上で心がけていることです。

HTML

CSS

JavaScript

ベース

ブラウザーのデフォルト・スタイルシートの差異の吸収のためにnormalize.cssをカスタマイズし、SCSSライブラリとしてルールごとに導入できるようにしたものを使用しています。

フォント

本文 Helvetica NeueまたはCalibri
ロゴ Kreonをサブセット化したもの
コード MenloまたはConsolas

カラーパレット

Download Photoshop swatch file: colorscheme.aco

アイコン

Default Favicon
2x Favicon

レイアウト

On Small Screen
On Medium Screen
On Large Screen

Sections

body

文字はスクリーンのサイズによって14–20pxで表示されます。行間は日本語がメインなので少し多めに1.618としました。

section, nav, article, and aside

これらの要素では何もスタイルを指定していません。ただし予期せぬ回り込み等を回避するためにclearfixだけは指定しておきます。

小見出し h3

コンテンツ内の小見出しは記事見出しのh2に合わせてそのレベルを調節しています。

見出し h4

h4-h6を使うことはあまり無いですが、段落と混乱しない程度にはスタイルを追加しています。

見出し h5

小見出しの直後に段落が来る場合、マージンを少なめにしています。

見出し h6

見出し h6では文字サイズは本文よりも少し小さめになります。

Grouping content

段落

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

<p>...</p>

水平線

水平線は主に暗黙のセクションの区切りに使用しています。


<hr>

整形済みテキスト

整形済みテキストは主にコードの表示に使用しています。主に英文になることから行間も1.25に落としてあります。視認性のために、少しインデントし、対応している場合は構文強調しています。構文強調にはgoogle-code-prettifyを使用しています。

/**
 * nth element in the fibonacci series.
 * @param n >= 0
 * @return the nth element, >= 0.
 */
function fib (n) {
  var a = 1,
    b = 1;
    tmp;

  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }

  return a;
}

console.log(fib(10));
<pre><code class="language-javascript">...</code></pre>

構文強調を行う場合はこのようにcode要素のクラス名で構文強調を行うこととその言語を明示しています。この仕組みは、2012-03-29のHTML5仕様のcodeの項を参考にしています。

引用

引用では内部で様々なスタイルが使用されるので、引用を示す引用符のマークを追加する以外のスタイルは指定しません。引用符はSVGです。マークアップは通常、全体をfigureで括り、引用元の表記はfigcaptionciteを組み合わせて行います。

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

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>

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

<ul>
  <li>...
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

関連リスト

関連リストもスタイルは最小限にとどめています。

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. Duis lacinia velit a arcu ornare at molestie mi iaculis.
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. Vestibulum porttitor, leo eu ullamcorper lacinia, felis ipsum ultrices libero, vitae pretium sem nisi in dui. Curabitur in aliquam elit. Aliquam tortor nisi, tristique id congue in, scelerisque in massa.
Quisque at sem at justo eleifend aliquet ac quis quam.
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. Donec ac arcu vitae libero porta dictum sed in dolor.
Praesent commodo posuere nisi, ut convallis nunc vehicula at.
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. Sed ultrices molestie vestibulum.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

通常はfigureを使っています。既にblockquote要素で使われているように内容は画像とは限らないので、強いスタイルは指定していません。

lorempixel 480x270
Random Image from Lorempixel

この画像へ指定した枠線は#cdcdcdになるべきですが、Chrome 20ではリンクの前景色である#558899にひきずられるバグがあります。他のブラウザーでは正常かつChrome 22では直っているようなので修正は特に行いません。

<figure>
  <img src="http://example.com/img/example.png" alt="...">
  <figcaption>...</figcaption>
</figure>

広い画面ではfigcaptionが並ぶ図と横に並びますが、figcaption要素をfigure要素の最後に置いた場合は並ぶ図と下が揃い、最初に置いた場合は上が揃います。

Random Image from Lorempixel
lorempixel 480x270
<figure>
  <figcaption>...</figcaption>
  <img src="http://example.com/img/example.png" alt="...">
</figure>

Text-level semantics

段落内で様々な意味づけを行うマークアップを使用しています。主に使うものはハイパーリンクを始め、強調より強い強調であったり、出典元の明示インラインでの引用WWW等の略語、<code>等のコード断片、Enterなどのキー入力、単なるマークなどをあまり逸脱しない形でスタイルしています。ただし強調においては日本には斜体の文化は無いので太字としています。ハイパーリンクは識別を容易にするため段落内でのみ下線を表示させています

Edits

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

Tabular data

表では背景を少し暗くし枠線を付けるようにし、図と同じように本文と明確に区別ができるようにしています。

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

Print stylesheet

印刷向けのスタイルシートは別に書いていましたが、HTTPリクエストの削減のためにインライン化しました。フォントはセリフ系を採用しています。他はなるべく白黒になるように調節しているだけです。

Other

これより後のセクションは様々な場所で局所的に利用されるウィジェットの例です。テキストやリンクには特に意味はありません。

選択範囲

Duis in velit nec metus rhoncus venenatis at vitae mauris. Vestibulum justo magna, congue at interdum ut, tristique at felis. Nam tincidunt elit sed arcu laoreet varius. Mauris tempor ligula at diam ultricies sit amet laoreet metus varius. Ut mollis suscipit mauris, id aliquam augue vehicula in.

もっと読む

他を参照

See also: Lorem ipsum

傍注

Proin et odio eros. Vivamus gravida pulvinar aliquet. Quisque convallis sodales mauris sed bibendum. Vestibulum eros sem, pharetra eleifend blandit nec, elementum convallis neque. Aenean pulvinar aliquam augue, blandit pulvinar sapien rhoncus ac. Donec velit diam, vulputate ut elementum sit amet, interdum quis est. Vivamus sed justo mi, quis molestie nulla. In hac habitasse platea dictumst. Cras tempus tristique tellus vel imperdiet. Cras a elit eget elit tincidunt hendrerit. Suspendisse potenti. Nunc porttitor ultricies porttitor. Ut eget pharetra dolor.

Cras sagittis ligula at nunc auctor cursus. Vivamus luctus lectus quis metus tincidunt ac cursus nunc dignissim. Maecenas congue velit quis ante vehicula molestie. Pellentesque adipiscing, ligula vel facilisis tincidunt, enim nisl commodo sem, ornare ornare dolor erat eget nunc. Nullam a quam sed est auctor viverra. Nunc in magna ac ante placerat gravida ut at lectus. Quisque et libero sit amet arcu eleifend lacinia adipiscing eu nibh. Praesent interdum auctor lobortis. Mauris vel justo risus. Aliquam vitae erat nibh. Aenean pulvinar sodales orci, lobortis malesuada nulla tempus quis.

メッセージ

+形道路交差点あり

通行止め

指定方向外進行禁止

最新のエントリー

Posted
on
in Dummy

Duis arcu nulla, blandit eget posuere laoreet, laoreet et elit. Quisque ullamcorper ullamcorper dapibus. Donec interdum, enim nec euismod commodo, felis lectus rhoncus mauris, eu gravida quam arcu dictum ipsum. Cum sociis natoque penatibus et magnis amet.


News

  1. Nullam pellentesque massa a orci fermentum at commodo eros volutpat
  2. Quisque aliquam ullamcorper risus, eget interdum est congue vel
  3. Suspendisse blandit lorem ut leo blandit bibendum
  4. Sed vitae sapien nisl, eget fringilla nisi
  5. Nullam nec mauris a orci varius adipiscing ut a felis