Hail2u

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

スタイル・ガイド

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

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

また、日付をクリックすることでアイキャッチ画像の切り替えを、見出しをクリックすることでタグラインの切り替えを、タグラインをクリックすることでその長さの切り替えを、それぞれ行うことができます。

目次

  1. このスタイル・ガイドについて
  2. アイコン
  3. カラーパレット
  4. フォント
  5. レイアウト
    1. 行あたりの文字数
  6. コア
    1. 文書要素
    2. セクション
    3. コンテンツのグループ化
    4. 語・句・文単位での意味付け
    5. 編集
    6. 埋め込みコンテンツ
  7. 見出しとフッター
    1. 小見出し
  8. はみ出し
  9. ヒーロー画像
  10. 投稿一覧

アイコン

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

カラーパレット

フォント

Noto Sans Japaneseとシステムでよく使われる等幅フォントを指定しています。また、ほぼすべてが日本語であることも踏まえ、斜体は使いません。

本文 Noto Sans Japanese
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.

レイアウト

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

広い画面でのカラム比は1.7:4.913:1になっています。

行あたりの文字数

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

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

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

1.25 * 1.7^6 = 30.17196125

文書要素

HTML文書のルート要素であるhtml要素についてです。

ルート

文字はブラウザーの画面幅に応じて徐々に大きくなります。例えば720pxなら18px1920pxなら24px3200pxでは40pxになるでしょう。このサイズはユーザーの設定に依存して前後します。

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

セクション

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

セクション構成物

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

見出し

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

<h1>...</h1>

コンテンツのグループ化

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

段落

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

<p>...</p>

水平線

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


<hr>

整形済みテキスト

主にコード例やコマンドラインでの操作例に使用しています。主に英文になることから、ブラウザーの慣習に従ってフォントサイズを1段階落としてあります。また、本文2行分に3行収まるように行間を調節しています。

$ mkdir example
<pre>...</pre>

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

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

引用

内部で様々なスタイルが使用されるので、レイアウト以外のスタイルは指定しません。字体に斜体を採用すべきところですが、メイリオなどが和文部分に斜体を持っていないのでそれを考慮して無指定にしています。マークアップは、通常、全体をfigure要素で括り、引用元の表記はfigcaptioncite要素を組み合わせて行います。

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

...

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>
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. 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 Randome Image
<figure>
  <img alt="..." src="...">
  <figcaption>...</figcaption>
</figure>

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

段落内では様々な意味づけを行うマークアップを使用しています。主に使うものはハイパーリンクを始め、強調重要性出典元インラインでの引用略語code fragments(コード断片)、variables(変数)、output(出力)、Enter(キー入力)、マークなどでしょう。これらはあまり逸脱しない形でスタイルしています。

編集

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

埋め込みコンテンツ

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

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

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

Proin Sed
Erat Eget
<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

飛び出し

トップレベル・セクションの見出しに続くaside要素に、figure要素があると、サブ・カラムに配置されます。主にアフィリエイト画像に使用します。

<h1>...</h1>

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

ヒーロー画像

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

<h1>...</h1>

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

投稿一覧

  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. 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要素は、平板な一覧として表示されます。li要素がtimea要素で構成されている場合は、日付が右寄せで表示されます。日付けは広い画面では左に表示されます。この日付も相対日時にしたい場合はjs-reldateというクラス名が必要です。

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

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