2019年05月14日

ブログの箇条書き(番号付きリスト)をいろいろな形式で作る方法のまとめ

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


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

  • 十三代目 石川 五ェ門
  • ジュラキュール・ミホーク
  • 十三代目 比古 清十郎

  1. 十三代目 石川 五ェ門
  2. ジュラキュール・ミホーク
  3. 十三代目 比古 清十郎


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

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

<ol>
<li>十三代目 石川 五ェ門</li>
<li>ジュラキュール・ミホーク</li>
<li>十三代目 比古 清十郎</li>
</ol>
<ul>の場合はマーカー付きの箇条書きで、<ol>の場合は番号付きの箇条書きになっています。


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

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


この箇条書きを、1)2)3)、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
}
/* ▲ 箇条書き(その他) ▲ */

ブログに書くHTMLはこんな感じ。

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


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


多階層の箇条書き


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


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


その他の箇条書き


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




にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/8799127

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
ブログ内を検索

ファン
最新記事
カテゴリー
最新コメント
ツイッター

広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール