スタイル・ガイド

はじめに

このウェブサイトのHTMLや、CSS、JavaScriptについては、ほぼすべてがこのページで確認できます。多くは解説や説明がありますが、おおむね動作確認を優先しているため、言葉が足らなかったり、更新されていなかったりします。詳細は開発者ツールなどを駆使してください。

このページに限ってはマークアップやスタイル、スクリプトにおかしいところが多くあります。その多くはプレビューを作る上でのやむを得ない事情によるものです。

また、GitHubでは、このウェブサイトの完全なソース・コードも公開されています。HTMLやCSSのコードを見たい場合は、こちらを参照してください。

ベースライン

古いブラウザーでは、ベースラインとして確保されたスタイルと、不完全に模倣されたスタイルが適用されるでしょう。また、そのようなブラウザーでは、このページでのみ使われているテスト用のスタイルやスクリプトは動かないかもしれません。

このベースラインのスタイルは特集ページの文書にも流用されます。

アイコン

Noto Sans CJK JPを使ってウェブサイト名を打ち出したSVGフォーマットの画像から生成されています。SVGフォーマットそのままのものや、PNGフォーマットへ変換したもの、更にそのPNGフォーマットの画像をアイコン形式にまとめたものがブラウザーによって適宜使われます。

色

白に近い背景と黒に近い文字に加え、グレーに近い一次色を2種類、ブルーに近い二次色を2種類、計6色を用意し、使い分けています。対応アプリケーションであれば、ユーザーのダーク・モード設定に従って、主に明るさが逆転されるでしょう。

前景色はルート要素の文字色に使われます。前景色・低差は、訪問済みのハイパーリンクやコード・ハイライトの本文に使われます。背景色はルート要素の背景に使われます。背景色・低差は、整形済みテキストや表ヘッダーの背景、日付表記、投稿一覧の日時に使われます。一次色は、水平線や引用の左枠線、表の枠線に使われます。二次色は、ハイパーリンクに使われます。

前景色
-
前景色・低差
-
背景色
-
背景色・低差
-
一次色
-
二次色
-

色の下の数字は、組み合わせて使われる前景色または背景色とのコントラスト比です。ユーザー設定によるダーク・モードの切り替えでは更新されませんが、テスト・ボタンによる切り替えでは更新されます。

フォント

本文としてルート要素にサン・セリフ、コード部分に等幅を、それぞれキーワードで指定しています。特定のフォントは指定していないので、システム、ブラウザー、またはユーザーの設定がそのまま利用されるでしょう。

サイズ

サイズは1と1.33を基準に、1.7で乗除することで決定されています。

比率	キーワード	使用箇所
`1.7`	huge	大見出し
`1.33`	large	小見出し
`1`	default	タグライン、本文
`0.782`	small	ヘッダー、日付表記、投稿一覧の日時、フッター

本文の文字サイズは、ビューポートの幅に応じて、段階的に大きくなります。最低でもユーザーの指定した標準サイズ(デフォルトでは16px)が確保され、大きい画面では116.5%に、さらに大きい画面では133%になるでしょう。rem単位を利用するため、ルート要素で指定しています。

レイアウト

コンテンツ幅に制限を加えた1カラムです。さらに大きい画面では、若干、右寄せになります。

このカラムの幅は以下のような計算式で決められており、およそ32remです。さらに大きい画面でロゴなどに使われるサブ・カラムとの比率は1:2.89です。

1.33 * 1.7^6 = 32.10296677

行あたりの文字数

以下の段落のアスタリスクは45文字目と75文字目に打ってあります。一行の文字数は45–75文字(line-height: 1.5の場合)が適切と言われているので、このアスタリスクが行をまたいでいることで確認できるでしょう。

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

行間

文字にx-heightという概念のない日本語がメインなので、行間は少し多めに1.7にしています。ルート要素で指定しています。

セクション

セクションを構成する要素についてです。

`body`要素

上記レイアウトはこの要素へのスタイルで実現しています。レイアウト以外のスタイルは適用しません。

セクション構成物

他、セクションを作成する、section、nav、articleとaside要素では、特に何もスタイルを指定していません。つまり、透過的な挙動をします。

セクション見出し

複数行の見出し向けに行間を少し落としています。また、上部の余白を、組み込みスタイルシートより多めに確保しています。

連絡先

よく使われるフォントに斜体を持たないものがあるため、斜体が使われないようにしています。他は指定していないので、これも透過的な挙動をするでしょう。

コンテンツのグ⁠ル⁠ー⁠プ⁠化

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

段落

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

<p>...</p>

水平線

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

<hr>

整形済みテキスト

コード例やコマンドラインでの操作例に使用しています。主に英文になることから、行間を一段階落とし、空きすぎないようにしています。

$ 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/wrap/property/should/be/break-all/

コード例の場合は、ネストされたcode要素のclass属性で、そのコードの言語を明記します。

<!DOCTYPE html>

<pre><code class="language-...">...</code></pre>

引用

内部で様々なスタイルが使用されるので、レイアウト以外のスタイルは指定しません。これも透過的な挙動をするでしょう。

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.

<blockquote>
  <p>...</p>
</blockquote>

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

組み込みスタイルシートとあまり違わない見た目になるように、双方共にスタイルは最小限にとどめています。序列付きリストではアラビア数字をそのマークに使用されるでしょう。

Suspendisse adipiscing viverra augue, nec viverra erat interdum nec.
Pellentesque in magna ac massa lobortis pretium sit amet fringilla justo.
1. Praesent non est odio, ac ultricies tortor.

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

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

図

通常はfigure要素を使っています。主に画像の参照に使います。

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

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

段落内では様々な意味づけを行うマークアップを使用しています。組み込みスタイルシートを変更しているものは、ハイパーリンクや、強調(斜体がないこともあるため)、引用元の表記(前と同じ)、code fragment(フォント変更と文字サイズ修正のため)くらいです。

編集

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

埋め込みコ⁠ン⁠テ⁠ン⁠ツ

画像や動画はfigure要素を使って参照します。幅や高さは指定しません。このカラムの幅から飛び出さないよう、スタイルシートで幅を制限しています。

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

表

本文と明確に区別ができるように、枠線を付けるようにしています。ヘッダーのみ背景色が変わります。

Proin	Sed
Erat	Eget
Incididunt	Proident

<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
Aliqua sint enim duis sint nostrud	Ut nostrud aute dolor Lorem ea irure deserunt velit anim eu consectetur

2005年8月14日

日付表記

クラス名としてdatelineを持つp要素は、日付表記とみなし、少し小さめの文字になります。

<article>
  <header>
    <p class="dateline">
      <time datetime="...">...</time>
    </p>

    <h1 class="headline">...</h1>
  </header>

  ...
</article>

ぶら下げ

Culpa commodo esse exercitation incididunt occaecat. In Lorem ex veniam mollit consequat aliqua anim laboris laboris duis culpa minim.

Minim est non sint ex ea consequat voluptate veniam. Aliquip tempor elit sint sint nisi. Minim qui laboris quis sit tempor sunt labore sit ut sint qui irure sit. Eu excepteur consectetur tempor dolor et anim aute sunt culpa ea pariatur commodo. Duis laborum duis enim ad est cupidatat lorem.

クラス名としてhangを持つaside要素は、アフィリエイト画像のコンテナーとみなし、右にぶら下げて配置されます。続く文章は画像を回り込むように流れます。

<section>
  ...

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

  ...
</section>

大見出し

クラス名としてheadlineを持つh2要素は、大見出しとみなし、大きい文字で表示されます。トップレベル・セクションがarticle要素の場合は、h1要素が使われますが、表示は変わりません。

<section>
  <h2 class="headline">...</h2>

  ...
</section>

投稿一覧

2012年2月25日 Curabitur pellentesque dolor eu fringilla eleifend
2011年9月12日 Aliquam erat volutpat. In nulla leo, porta vel ornare ac, aliquet eu neque malesuada fames ac ante
2010年4月7日 Nullam in ligula luctus, blandit risus eget, mattis enim
2009年11月17日 Ad duis aute reprehenderit duis Lorem reprehenderit eu deserunt exercitation in dolore voluptate ea ad anim sint est occaecat exercitation elit aliquip
Lorem aute elit veniam esse magna veniam amet est laboris aute exercitation duis cillum elit incididunt incididunt consectetur
Laboris laboris eu aute veniam proident ex amet quis pariatur aliquip consectetur sit qui cupidatat excepteur irure

クラス名としてpostsを持つol要素は、リンクや短文、画像などの平板な一覧として表示されます。li要素に含まれるtime要素は、少し小さめの文字で表示されます。

<section>
  ...

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

小見出し

クラス名としてsubheadingを持つh3要素は、小見出しとみなし、少し大きい文字で表示されます。続く要素がp要素の場合、間の余白が少し詰められます。トップレベル・セクションがarticle要素の場合は、h2要素が使われますが、表示は変わりません。

<section>
  ...

  <section>
    <h3 class="subheading">...</h3>

    ...
  </section>
</section>

補助ナ⁠ビ⁠ゲ⁠ー⁠シ⁠ョ⁠ン

クラス名としてsubnavigationを持つ要素は、補助ナビゲーションとみなし、大きく上の余白を確保します。

<nav class="subnavigation">
  <p>
    <a href="...">...</a>
  </p>
</nav>

サムネイル一覧

クラス名としてthumbsを持つol要素は、サムネイルとみなされます。描画領域の幅によって、1行に2から4つ表示されます。

<section>
  ...

  <ol class="thumbs">
    <li>
      <a href="...">
        <img alt="..." src="...">
      </a>
    </li>
  </ol>
</section>

コード・ハ⁠イ⁠ラ⁠イ⁠ト

コンテンツの言語が明示されているpre要素は、コードとみなされ、HTMLファイルを作成する時にhighlight.jsを使ってハイライトされます。動的にハイライトされることはありません。

// Comment, HTML doctype
function test() { // Keyword, HTML tag name, CSS type selector
  const foo = 1; // Number, CSS ID selector
  const bar = "bar"; // String, HTML attribute value, CSS class selector
  const baz = false; // Literal, HTML tag and attribute name, CSS attribute and pseudo selector
}

append-others

ユーザーの明示的な操作による2段階読み込みを、画像が多いページで採用しています。JavaScriptが無効だったり、利用しているAPIに非対応の場合は、残りのコンテンツを含むウェブページへのリンクが表示されます。

relative-time

クラス名としてjs-relative-timeを持ち、かつ正しいdatetime属性を持つtime要素は、相対日時に変換されます。ただし、おおよそ1年(330日)以上前の日付は変換しません。

2000年1月1日 => 2000年1月1日

unutm

ユーザーがページにアクセスした時、何らかの理由でutm_で始まるパラメーターが付いていた場合、削除します。

Test unutm.js