パソコンを便利に！！

ブログのエディタには、たいてい箇条書き（番号付きリスト）が簡単に作れる機能が備わっています。
このブログで利用しているファンブログの場合は、こんな感じです。

実際に作ってみると、このようになります。

コードはこのようになっています。

<ul>
  <li>十三代目 石川 五ェ門</li>
  <li>ジュラキュール・ミホーク</li>
  <li>十三代目 比古 清十郎</li>
</ul>

<ol>
  <li>十三代目 石川 五ェ門</li>
  <li>ジュラキュール・ミホーク</li>
  <li>十三代目 比古 清十郎</li>
</ol>

他のブログサービスでも、たいていこの2種類が作れるようになっています。
ファンブログの場合はちょっと特殊で、実際にはリスト <li> の各行にスタイルの設定が入っています。

<li style="list-style-type: decimal; margin-left: 1em;">十三代目 石川 五ェ門</li>

この箇条書きを、１）２）３）、a b c、ア イ ウ、1章 2章 3章など、いろいろなパターンにする方法が今回の内容です。

list-style-typeプロパティを使う

まずは基本的な方法で、list-style-typeプロパティを使うことで、いろいろなタイプの箇条書きが作れます。

list-style-type−スタイルシートリファレンス

↑ ここに書いてあるとおりですが、マーカー付きの箇条書き<ul>で4種類（マーカーなしを含む）、番号付きの箇条書き<ol>で17種類の箇条書きができます。
HTMLコードの書き方も書いてあるので、割と簡単にできそうです。

マーカー付きの箇条書き

1. 　マーカーなし
2. ● 黒丸
3. ○ 白丸
4. ■ 黒四角

番号付きの箇条書き

1. �@.�A.�B.　小文字のローマ数字
2. �T.�U.�V.　大文字のローマ数字
3. α.β.γ.　小文字のギリシャ文字
4. 1.2.3.　算用数字
5. 01.02.03.　先頭に0をつけた算用数字
6. a.b.c.　小文字のアルファベット（latin）
7. a.b.c.　小文字のアルファベット（alpha）
8. A.B.C.　大文字のアルファベット（latin）
9. A.B.C.　大文字のアルファベット（alpha）
10. 一.二.三.　漢数字
11. あ.い.う.　平仮名（あいうえお）
12. ア.イ.ウ.　片仮名（アイウエオ）
13. い.ろ.は.　平仮名（いろは）
14. イ.ロ.ハ.　片仮名（イロハ）
15. א‎.ב‎.ג‎.　ヘブライ数字
16. Ա.Բ.Գ.　アルメニア文字（大文字）
17. ა.ბ.გ.　グルジア文字（ムヘドルリ）

CSS（スタイルシート）を使うと毎回コードを書かなくていいですし、できるだけ CSS に書く方がいいそうです。
↓ こちらが参考になります。

list-style-type - CSS: カスケーディングスタイルシート | MDN

1章 2章 など文字を付けたり、カッコ付きにしたりする

ol,li,リストで括弧付の数字を作る方法

↑ こちらのページは、(1) (2) (3) などカッコ付きにする方法が書いてあります。

このページのCSSの最後の行を見ると、番号の前後に "(" と ") " を付けることでカッコ付きの数字にしているのが分かります。

content: "(" counter(cnt) ") ";

ということは、例えば 1章 2章 にしたい場合は、前の "(" を消して、後ろの ") " を "章 " に変えてやればいいことになります。

content: counter(cnt) "章 ";

これを使えば、数字の前後に文字やカッコなどの記号を自由に付けられます。

文字・記号など何でもできるようにする

[CSS]ol のリストで�@や�Aなどの丸数字を表示させる方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

↑ このページの説明は�@�Aみたいに丸付き数字にする方法が書かれていますが、方法としては list-style を none で消しておいて、替わりに丸数字を表示させています。
丸数字もそれぞれの行に順に入れているので、他の文字でもいけそうです。

例を作ってみます。
上の ウェブアンテナさん のページを参考にして、CSS（スタイルシート）を追加します。

/* ▼ 箇条書き(その他) ▼ */
ol.list_etc{
  position: relative;
  margin:0;
  padding:0
}
ol li{
  list-style: none;
  list-style-position:outside;
  margin:0;
  padding-left: 1em
}
ol li span{
  position: absolute;
  left:0;
  margin:0
}
/* ▲ 箇条書き(その他) ▲ */

<ol class="list_etc">
  <li>㋐リスト1</li>
  <li>㋑リスト2</li>
  <li>㋒リスト3</li>
</ol>

㋐㋑㋒のところは、�� �� �� など入力できる文字や記号、何でもいいことになります。

多階層の箇条書き

箇条書きの中に別の箇条書きを入れるような、多階層の箇条書きを作ることもできます。
リスト <li>文章</li> の中に <ul> </ul> や <ol> </ol> を入れることで、多階層の箇条書きができます。
詳しくは、↓ こちらが参考になります。

HTMLタグ/リストタグ/順不同のリストを作る - TAG index

その他の箇条書き

CSS（スタイルシート）を使った、さらに工夫した箇条書きなどを作ることができる説明が書かれたサイトを貼っておきます。

• いろいろなマーカーの箇条書き
  CSSでリストを素敵にするlist-styleの使い方+もっと自由な作り方 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
• おしゃれな箇条書き
  コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに
• 見出し付き箇条書き
  Try next HTML - Section 1