このスタイル・ガイドは、このウェブサイトのコンテンツが、どうマークアップされるべきかの解説と、どうスタイルが当たるのかの確認のためにあ⁠り⁠ま⁠す。

スタイル・ガ⁠イ⁠ド

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

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

テスト

これらのボタンにより、それぞれをテストできます。カラムはCSSグラデーションを利用した簡単なもののため、描画領域の幅によっては数ピクセル程ずれるかもしれません。

目次
  1. このスタイル・ガイドについて
  2. アイコン
  3. フォント
  4. レイアウト
  5. 文書要素
  6. セクション
  7. コンテンツのグループ化
  8. 語・句・文単位での意味付け
  9. 編集
  10. 埋め込みコンテンツ
  11. 見出しと概要、フッター
  12. 投稿一覧
  13. サムネイル一覧
  14. 補助ナビゲーション
  15. ヒーロー画像
  16. ぶら下げ
  17. unutm.js
  18. append-others.js

アイコン

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

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

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

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

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

コードは、その言語が明示されている場合、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
}

フォント

本文としてサン・セリフ、コード部分に等幅を、それぞれキーワードで指定しています。特定のフォントは指定していないので、システム、ブラウザー、またはユーザーの設定がそのまま利用されるでしょう。また、ほぼすべてが日本語であることも踏まえ、斜体は使わないように調節しています。

サイズ

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

比率 キーワード 使用箇所
2.261 gargantuan 大見出し
1.7 huge 小見出し
1.33 large タグライン、記事概要
1 default 本文
0.782 small 図キャプション、グローバル・フッター、記事フッター、投稿一覧日時

基準となる本文のサイズは、ブラウザーの横幅を元に、calc()を利用して計算され、html要素で設定しています。例えば720pxなら18px1920pxなら24px3200pxでは40pxになるでしょう。このサイズはユーザーの設定等に依存して前後します。

html {
  font-size: calc((100vw - 320px) / 200 + 1rem);
}

レイアウト

コンテンツのおさまり具合によってレイアウトが切り替わります。ブラウザーの大きさを変更したりすると、その様子が確認できるでしょう。しかし、仮想的な3カラムのため、左右のカラムが使われることはあまりなく、1カラムとほぼ同じです。

広い画面でのカラム比は1.7:4.913:1になっています。4.9131.7^3で導き出されます。

行あたりの文字数

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

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

このメイン・カラムの幅は以下のような計算式で決められており、およそ32remです。

1.33 * 1.7^6 = 32.10296677

文書要素

HTML文書のルート要素であるhtml要素についてです。rem単位を利用するため、フォントはこの要素で設定しています。

セクション

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

body要素

文字にx-heightという概念のない日本語がメインなので、行間を少し多めに1.7としています。

セクション構成物

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

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

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

段落

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

<p>...</p>

水平線

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


<hr>

整形済みテキスト

主にコード例やコマンドラインでの操作例に使用しています。主に英文になることから、ブラウザーの慣習に従ってフォント・サイズを1段階落としてあります。同時に行間も一段階落とし、空きすぎないようにしています。

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

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

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

  1. Suspendisse adipiscing viverra augue, nec viverra erat interdum nec.
  2. 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>

関連リスト

内部、特に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.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Some Random Image
<figure>
  <img alt="..." src="...">

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

Magna ut Dolore Mollit

見出しは、article要素の場合はh1から始められます。広い画面では左のサブ・カラムから大きく幅を使います。

また、article要素の場合は、Microdataを使ってコンテンツの範囲を明示します。コンテンツの最初がp要素の場合は概要とみなし、文字が少し大きくなります。これも左のサブ・カラムから大きく幅を使います。

<article>
  <h1>...</h1>

  <div itemprop="articleBody">
    <p>...</p>

    ...

    <section>
      <h2>...</h2>

      ...
    </section>
  </div>
</article>

トップレベルのarticle要素直下の先頭にあるfooter要素は、広い画面では見出しの右に小さく表示されます。記事日時に使われます。

<article>
  <footer>
    <p>
      <time datetime="...">...</time>
    </p>
  </footer>

  ...
</article>

投稿一覧

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

トップレベル・セクションの見出しに続くol要素は、リンクや短文、画像などの平板な一覧として表示されます。li要素に含まれるtime要素は、右カラムに表示されます。

日付を相対日時にしたい場合は、クラス名でjs-reldateを追加します。このクラス名はすべてのtime要素で有効ですが、datetime属性を持つ必要があります。

<section>
  <h2>...</h2>

  <ol>
    <li>
      <time class="js-reldate" datetime="...">...</time>
      <a href="...">...</a>
    </li>
  </ol>
</section>

サムネイル一覧

トップレベル・セクションの見出しに続くul要素は、サムネイルとみなされます。初期は3つ、広い画面では4つ、もっと広い画面では5つ表示されます。

<section>
  <h2>...</h2>

  <ul>
    <li>
      <a href="...">
        <img alt="..." src="...">
      </a>
    </li>
  </ul>
</section>

一行サムネイル

折り返しをしない場合は.onelineというクラス名が必要です。

<section>
  <h2>...</h2>

  <ul class="oneline">
    <li>
      <a href="...">
        <img alt="..." src="...">
      </a>
    </li>
  </ul>
</section>

トップレベル・セクションがnav要素の場合、補助ナビゲーションとみなし、最重要な見出しと同じ量だけ上の余白を確保します。

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

ヒーロー画像

トップレベル・セクションの見出しに隣接する画像は、ヒーロー画像とみなし、幅いっぱいに大きく広がって表示されます。主に記事の画像に利用されます。

<article>
  <h1>...</h1>

  <div itemprop="articleBody">
    <figure>
      <img alt="..." src="...">
    </figure>

    ...
  </div>
</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. Ad eiusmod Lorem esse eiusmod aute magna deserunt enim fugiat minim.

トップレベルのarticle要素直下にある見出しに続くaside要素は、アフィリエイト画像とみなし、右にぶら下げて配置されます。続く段落の文章は画像を回り込むように流れます。広い画面では左のサブ・カラムだけ利用します。

<article>
  <h1>...</h1>

  <div itemprop="articleBody">
    <aside>
      <figure>
        <img alt="..." src="...">
      </figure>
    </aside>

    ...
  </div>
</article>

unutm.js

Test unutm.js

append-others.js