書式一覧（リストと表）

リストと表は明確に別れていませんが、最初に使用したときの利用方法で分類しました。
ビジュアル重視で選んでいただいてかまいません。

リスト型

シンプルリスト

順番があるシンプルリスト

（１）とかCSSで再現できないタイプ向けなので、デフォルトでは数字なし。
1⃣とか①タイプは数字付きリストを使用。

1. 項目１
2. 項目２
3. なが～～～～～～～～～～～～～～～～い項目
4. 改行を含む
   項目
5. 改行されるくらいのなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目

<ol class="SList">
<li>項目１</li>
<li>項目２</li>
<li></li>
<li></li>
<li></li>
</ol>

順番のないシンプルリスト

• 項目１
• 項目２
• なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目
• 改行を含む
  項目
• 改行されるくらいのなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目

<ul class="SList">
<li>項目１</li>
<li>項目２</li>
<li></li>
<li></li>
<li></li>
</ul>

シンプルリスト　DLタイプ

NoDot設定すれば「・」はなし。

項目１

項目１の解説１

項目１の解説２

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目３

項目３の解説

<dl class="SList">
<dt>項目１</dt>
<dd>項目１の解説１</dd>
<dd>項目１の解説２</dd>
<dt>項目２</dt>
<dd>項目２の解説</dd>
<dt>項目３</dt>
<dd>項目３の解説</dd>
</dl>

チェックボックス型　リスト

いずれもol, ul, dlにCheckboxListを設定するだけです。

olタイプ

1. 項目１
2. 項目２
   改行して項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
3. なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目３
   改行して項目３の解説

ulタイプ

• 項目１
• 項目２
  改行して項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説
• なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目３
  改行して項目３の解説

DLタイプ

項目１

項目１の解説１

項目１の解説２

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い項目３

項目３の解説

<ul class="CheckboxList">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

<dl class="CheckboxList">
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

左右分割リスト

通常タイプ

項目の文字数が全角１０字程度での使用を想定してたリストです。
１０字を超えると「……」の位置がずれますので、長い項目名の場合は上下分割リストを使います。
スマホ版では上下に分割されます。

使用例）令和2年度　年金額改定のお知らせ

項目１

項目１の解説１

項目１の解説２

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～い項目３

項目３の解説

<dl class="LRList">
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

３文字タイプ

見出しの幅を３文字にしたタイプです

項目１

項目１の解説１

項目１の解説２

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～い項目３

項目３の解説

<dl class="LRList">
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

数字付きリスト

「ulタイプ」は文脈上ありあえないので作成していません。

スクエア olタイプ

主に手順を示すためのリストです。

1. 項目１
2. 項目２
3. 項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目

<ol class="SquareNoList">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>

スクエア dlタイプ

項目１

解説１

項目２　長い～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

解説２

項目３

解説３～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

<dl class="SquareNoList">
<dt>項目１</dt><dd>解説１</dd>
<dt>項目２</dt><dd>解説２</dd>
<dt>項目３</dt><dd>解説３</dd>
</dl>

サークル olタイプ

1. 項目１
2. 項目２～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
3. 項目３

<ol class="CircleNoList">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>

サークル　dlタイプ

項目１のタイトル

項目１の本文

項目２のタイトル

項目２の本文

項目３のとてつもなくなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～いタイトル

項目２の本文

項目４のタイトル

項目４のとてつもなくなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い本文

<dl class="CircleNoList">
<dt>項目１のタイトル</dt>
<dd>項目１の本文</dd>
<dt>項目２のタイトル</dt>
<dd>項目２の本文</dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

表型

おしゃれタイプ

横並び

<table class="common-table"><tbody>
<tr><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody></table>

縦並び

カラーテーブル

上部の見出しに色をつけられる設定です。
色は直接styleで指定する仕様にしています。

<table class="common-table Color_Table"><tbody>
<tr><th></th><th style="background-color:#cc6688;">見出し１</th><th style="background-color:#88cc66">見出し２</th><th style="background-color:#6688cc">見出し３</th></tr>
<tr><th>見出し左</th><td>本文１</td><td>本文２</td><td>本文３</td></tr>
<tr><th>見出し左</th><td>本文１－２</td><td>本文２－２</td><td>本文３－２</td></tr>
</tbody></table>

普通のテーブル

幅とかの設定は一切していないので可変です。
必要なときは直指定で。スマホ版でも表として表示します。

上部に見出し

<table class="NTable">
<tbody>
<tr>
<th>見出し</th>
<th>見出し２</th>
</tr>
<tr>
<td>本文</td>
<td>本文</td>
</tr>
</tbody>
</table>

左部に見出し

<table class="NTable">
<tbody>
<tr>
<th>見出し１</th>
<td>本文</td>
<td></td>
</tr>
<tr>
<th style="width: 6em;">見出し２</th>
<td>本文</td>
<td>見出しにwidth:6em;を設定している。</td>
</tr>
</tbody>
</table>

左・上部に見出し

<table class="NTable"><tbody><tr>
<th>上部見出し１</th>
<th>上部見出し２</th>
<th>上部見出し３</th>
</tr><tr>
<th>見出し１</th>
<td>本文</td>
<td>本文</td>
</tr><tr>
<th style="width: 6em;">見出し２</th>
<td></td>
<td>左の見出しにwidth:6em;を設定している。</td>
</tr></tbody></table>

上だけ茶色のテーブル

上部（thead)に色指定が入っています。スマホ版だとthead非表示になります。

<table class="TTable">
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目１</td>
<td>項目１の解説</td>
</tr>
<tr>
<td>項目２</td>
<td>項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説</td>
</tr>
<tr>
<td>項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～い項目</td>
<td>項目３の解説</td>
</tr>
</tbody>
</table>

テーブル型リスト

左の項目を右で解説するという、テーブル型リストです。（実はテーブルではありません）
スマートフォンでも左右に分割されます。
項目・解説ともに短い料金表などのために作成しました。

使用例）不支給や軽い等級になった時、不服申し立てはできますか？

項目１

項目１の解説１

項目１の解説２

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～い項目３

。
項目の幅を固定し、文字を中央寄せにしてしまっているので、項目の文字数が多くなると不格好です。

左茶色のテーブル

パソコンから見ると、上のテーブル型リストによく似ていますが、スマホで見た場合、項目と解説が上下に別れます。
項目または要素が長くなる場合は、基本的にこちらを使用します。
使用例）障害年金を受給するための３つの要件

<table class="BTable"><tbody><tr>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td></td>
</tr></tbody></table>

左茶色のテーブル型DLリスト

これまたよく似たリストですが、スマホ版での表示が違います。
高さが項目＞解説となるとレイアウトが崩れるので、項目の文字数を増やしすぎないように気をつけてください。

使用例）障害年金の更新手続きが１年延長されました

項目１

項目１の解説１

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～い項目３

項目３の解説

項目１

項目１の解説１

項目２

項目２のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

なが～～～～～～～～～～～～～～～～い項目３

項目３の解説

項目３のなが～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～い解説

<dl class="Btable">
<dt>項目１</dt><dd>解説１</dd>
<dt>項目２</dt><dd>解説２</dd>
<dt>項目３</dt><dd>解説３</dd>
</dl>

テーブルセル内要素の中央揃え

tableタグに設定することでth, tdに中央揃えを付与します。
サンプルはwidth:6emの設定とNTableクラスを設定してあります。

<table class="TCenter">
<tr><th>見出し</th><th>見出し</th></tr>
<tr><td>本文</td><td>本文</td></tr>
</table>

オプション

li,ddの前の記号を排除

.NoDot

NoDot設定していないSList(dl)

点が表示される

NoDot設定しているSlist

ol,ulにも対応

liの前の画像を排除

.NoImg

liの前にドットを追加

Dot

• これはul
• ここにだけDotを設定
• ここは設定無し

• これはul
• ulにDotを設定