タイポグラフィ

見出し<h1> ～ <h6>

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
見出し1<h1>は記事本文で使用しないでください。このサイトでは、見出し1は記事タイトルでのみ使われます。
見出し1～見出し6は文書の階層構造を表すために使います。文字を強調するために見出しタグを使うのは常に誤りです。文字を強調するには<strong>や<div class="callout">を使用してください。

段落<p>

これは段落です。日本語の場合、1段落あたり 4行～8行が読みやすいと言われています。また、1行あたりの文字数はデスクトップでは30～40字、モバイルでは20字程度が読みやすいです。これらをふまえて段落を構成する必要があります。

<p>...</p>

引用<blockquote>

汝が深淵を覗き込むとき、深淵もまた汝を覗き込んでいるのだ。

Friedrich Nietzsche
<blockquote>
    引用文
    <footer>引用元</footer>
</blockquote>
他のサイトや書籍から文章を引用するときは<blockquote>を使います。引用元も書く場合は例のように<footer>で囲んでください。

リスト

番号なしリスト<ul>

  • 1つ目の項目
  • 2つ目の項目
    • 入れ子項目1
    • 入れ子項目2
  • 3つ目の項目
<ul>
    <li>...</li>
</ul>

番号付きリスト<ol>

  1. 1つ目の項目
  2. 2つ目の項目
    1. 入れ子項目1
    2. 入れ子項目2
  3. 3つ目の項目
<ol>
    <li>...</li>
</ol>

定義リスト<dl>

コーダー
HTMLを書く人。Javascript などのクライアントサイド言語の知識が必要な場合も多い。怒られると伸びる。
デザイナー
サイトのモックアップや画像、イラストを手掛ける。Photoshop が手放せない。褒められると伸びる。
プログラマー
様々なプログラミング言語を駆使して動的なサイトを作る。レッドブルさえ与えておけば勝手に伸びる。
<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>
定義リストはビジュアルエディタのツールバーにはありません。使う時は、テキストエディタに切り替えて、直接 <dl>タグを記述してください。

水平定義リスト<dl class="dl-horizontal">

コーダー
HTMLを書く人。Javascript などのクライアントサイド言語の知識が必要な場合も多い。怒られると伸びる。
デザイナー
サイトのモックアップや画像、イラストを手掛ける。Photoshop が手放せない。褒められると伸びる。
プログラマー
様々なプログラミング言語を駆使して動的なサイトを作る。レッドブルさえ与えておけば勝手に伸びる。
<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>
水平定義リストはビジュアルエディタのツールバーにはありません。使う時は、テキストエディタに切り替えて、直接 <dl class="dl-horizontal">タグを記述してください。

テーブル<table>

col1 col2 col3
val1 val2 val3
val4 val5 val6 
<table>
    <tr>
        <th>...</th>
        <th>...</th>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

画像<img>

dummy

<img src="path/to/image">

文字色<span class="text-*">

重要な語句や文章には<span class="text-primary">を使います。
成功や正常な状態を表すには<span class="text-success">を使います。
情報を表すには<span class="text-info">を使います。
注意を促すには<span class="text-warning">を使います。
警告を与えるには<span class="text-danger">を使います。
補足的な文章には<span class="text-muted">を使います。

<span class="text-primary">...</span>
<span class="text-success">...</span>
<span class="text-info">...</span>
<span class="text-warning">...</span>
<span class="text-danger">...</span>
<span class="text-muted">...</span>
文字色を変えるために style 属性<span style="color:red">...</span>を使わないでください。文脈にあわせて上の6つのクラスを利用してください。
文字色は、ビジュアルエディタの「ツールバー > スタイル > 文字色」にあります。

コールアウト<div class="callout-*">

重要な語句や文章を書くときに使います。
成功、あるいは何かの処理が正常に終わったときに使います。
情報を知らせたい時に使います。
注意を促したい時に使います。
警告を与えたいときに使います。
補足的な文章を書くときに使います。
<div class="callout-primary">...</div>
<div class="callout-success">...</div>
<div class="callout-info">...</div>
<div class="callout-warning">...</div>
<div class="callout-danger">...</div>
<div class="callout-muted">...</div>
コールアウトは、ビジュアルエディタの「ツールバー > スタイル > コールアウト」にあります。