箇条書きの文頭に数字やアルファベット等で順序付けをしたリストタグ(ol,li)の使い方

タグを使って順序リストを書く方法

前回は箇条書きリストの作成方法をご紹介しましたが、今回は順序付きのリストの作成方法です。1,2,3・・・、A,B,C・・・、a,b,c・・・、Ⅰ,Ⅱ,Ⅲ・・・、ⅰ,ⅱ,ⅲ・・・などの順番で並ぶリストを指定タグを使うことで簡単に書くことが出来ます。

順序付けが必要のないリストは、前回ご紹介した<ul><li>で箇条書きのリストにしますが、例えばレシピなどで手順を案内するようなものは、今回ご紹介する方法で記事を書くと大変便利です。今回は記事を書く編集画面で指定タグを使用するだけなので、ブログ初心者の方でも比較的使いやすいと思います。

リストタグ<ul><li>を使って箇条書きにする方法とマーカー変更方法
<ul><li>タグを使い簡単に箇条書きリストを書く方法です。箇条書きに改行を使っている方は要チェック。改行を挟まなくても自動で改行されリスト化してくれる便利タグ。マーカーの変更も簡単です。

PR

リスト項目に<ol><li>タグで順序を付ける

モノの使い方や登録手順など、順序を付けたい箇条書きリストを書く方法です。通常の箇条書きリストと同様に、改行を多様していた方はぜひお試しください。

数字(123・・・)の番号付きリスト(デフォルト)

リストタイプを設定せずに使用した場合、デフォルトで数字リストになります。記事を書く編集画面で以下のように入力します。

【数字リスト】
リスト全体を<ol>~</ol>で括り、その中に箇条書きにしたいテキストを<li>~</li>で括って入力。<ol>~</ol>の中に入れられるタグは<li>のみです。
入力例
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
  3. リスト3

綺麗ですね。自分で数字を入力する必要もありません。改行でリストを作成した場合と、タグを使用した場合ではこんなところにも違いが出ます。

【順序リストタグを使わない場合】
インデント用にスペース1つを空け、箇条書きは改行、数字は直接入力しています。
 1.あいうえお
 2.かきくけこ
 3.さしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノ

見ていただくと分かる通り、番号3の二行目の頭が揃いません。

【<ol>~</ol>を使った場合】
上で紹介した【数字リスト】と同じ方法で書いています。
  1. あいうえお
  2. かきくけこ
  3. さしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノ

違いは一目瞭然です。文頭が揃うのは訪問者にとっても読みやすくなるので、これまで改行で記事を書いていた方は、次回からぜひこの方法を用いてみてください。

<list-style-type:○>を使いアルファベット順にする

デフォルトの数字順をアルファベットに変更する方法です。箇条書きのマーカー変更時に使用したリストタイプの指定を使います。

<ol type="A">と、使っている方もいるかもしれませんが、HTML 4.01では非推奨とされています。

【ABC(大文字)順にする】
プロパティで「upper-alpha」を指定する
入力例
<ol style="list-style-type: upper-alpha">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
  3. リスト3
【abc(小文字)順にする】
プロパティで「lower-alpha」を指定する
入力例
<ol style="list-style-type: lower-alpha">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
  3. リスト3

タイプ属性を変更してローマ数字順にする

基本はアルファベット順とまったく同じです。属性値を変更するだけでローマ数字にも変更が可能です。

【ⅠⅡⅢ(大文字)順にする】
プロパティで「upper-roman」を指定する
入力例
<ol style="list-style-type: upper-roman">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
  3. リスト3
【ⅰⅱⅲ(小文字)順にする】
プロパティで「lower-roman」を指定する
入力例
<ol style="list-style-type: lower-roman">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
  3. リスト3

順序付けの番号を変更する

通常は1番やAなどからスタートするリストですが、開始番号を指定したいケースもあります。あるいは手順省略などで、次の番号を一つ飛ばしたいようなときに使える方法のご紹介です。

開始番号を指定する方法

例えば、ランキングを表示したい場合。1位~5位までをリスト化したら、少しスペースを入れて6位~10位を並べたいということはありませんか?

そのスペースにアフィリエイト広告を入れたりして使いたい方もいるかもしれません。そうした場合には次のようにします。

【数字の開始番号を指定する】
プロパティで「start」を指定する
入力例
<ol>
<li>アイウエオ</li>
<li>カキクケコ</li>
<li>サシスセソ</li>
</ol>
ここに広告や画像を入れることも出来ます。例としてヒヨコ画像を入れてみます
<ol start="4">
<li>タチツテト</li>
<li>ナニヌネノ</li>
</ol>
表示画面
  1. アイウエオ
  2. カキクケコ
  3. サシスセソ

分かりやすく画像を入れてみました

  1. タチツテト
  2. ナニヌネノ
【アルファベット(大文字)の開始番号を指定する】
プロパティで「upper-alpha」と「start」を指定する
入力例
<ol style="list-style-type: upper-alpha" start="4">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
  3. リスト3

ABCDEFGと並べたとき「D」は「4番目」なので start="4"と指定します。Gからスタートさせたい場合は7になります。

アルファベット小文字、ローマ数字の場合もプロパティの部分を変更するだけなので省略します。

尚、startタグは、HTML 4.01では非推奨です。

連続する順序を途中で変更する方法

例えば「2~3は省略」などと1行でまとめた場合、4がずれてしまいます。そのようなケースで使うのに便利なタグです。

【数字を途中で変更する指定】
プロパティで「value」を指定する
入力例
<ol>
<li>手順1</li>
<li>手順2</li>
<li>手順3~5は省略可</li>
<li value="6">手順6</li>
<li>手順7</li>
</ol>
表示画面
  1. 手順1
  2. 手順2
  3. 手順3~5は省略可
  4. 手順6
  5. 手順7

変更した番号以降は、そのまま続きの番号がつくようになっています。

【アルファベット(小文字)を途中で変更する指定】
プロパティで「lower-alpha」と「value」を指定する
入力例
<ol style="list-style-type: lower-alpha">
<li>リスト1</li>
<li>リスト2(リスト3,4 省略)</li>
<li value="5">リスト5</li>
<li>リスト6</li>
</ol>
表示画面
  1. リスト1
  2. リスト2(リスト3,4 省略)
  3. リスト5
  4. リスト6

使う機会は少ないかもしれませんが、こんな使い方もできますよ、という一例として残しておきました。

尚、valueタグは、HTML 4.01では非推奨です。

<ul>と<ol>を組み合わせた使い方

番号順と通常の箇条書きを併用します。前回の<ul>タグと合わせた応用編。使い方次第ではとても見やすいリストになると思います。

連番の中に箇条書きを含めた記事の書き方

大きな括りは番号順、その中の一つを箇条書きで表示します。

リスト全体を<ol>~</ol>で括り、その中にリストにしたいテキストを<li>~</li>で括って入力。テキストの一つに<ul>~</ul>を用いて箇条書きにする。
入力例
<ol>
<li>リスト1</li>
<li>リスト2
<ul>
<li>リスト2-1</li>
<li>リスト2-2</li>
<li>リスト2-3</li>
</ul>
</li>
<li>リスト3</li>
</ol>
表示画面
  1. リスト1
  2. リスト2
    • リスト2-A
    • リスト2-B
    • リスト2-C
  3. リスト3

箇条書き(リスト2-A~C)部分のマーカーは指定していません。仮に、これと同じ要領で、リスト2-Cの中にさらに<ul>タグを入れたとします。その場合は、白丸マーカーと同じにならないよう、自動的に四角(square)マーカーで表示される仕様になっています。

箇条書きの中に番号を含めた記事の書き方

先程の真逆です。大きな括りは箇条書きとし、その中の一つを順序で表示します。

リスト全体を<ul>~</ul>で括り、その中にリストにしたいテキストを<li>~</li>で括って入力。テキストの一つを<ol>~</ol>を用いて順序付けにする。
入力例
<ul>
<li>リスト1</li>
<li>リスト2
<ol>
<li>リスト2-1</li>
<li>リスト2-2</li>
<li>リスト2-3</li>
</ol>
</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
    1. リスト2-A
    2. リスト2-B
    3. リスト2-C
  • リスト3

この応用編は、マニュアル作成や利用方法などのナビにも役立つと思います。スタイルシートを一切触らずに使えるので、ぜひお試しください。

ここがポイント
  • 順序リストでも改行は使いません。タグを使いましょう
  • 箇条書きなら <ul>、順序付きなら <ol>で括ろう
  • <ul><ol>の中に使えるタグは<li>のみ。でも<li>の中なら別タグOK!

インデント(左余白)は使用中のスタイルシート設定により異なります。余白の幅を変更したい場合はスタイルシートの編集が必要になります。

そこまでご案内できれば良かったのですが、また別の機会にご紹介できればと思っています。今回はここまで。最後まで目を通してくださった皆様、ありがとうございます。お疲れさまでした!

ブログランキング
お帰り前に応援1クリックいただけたら嬉しいです!
このページの情報があなたのお役に立ちましたらお願いします。
ブログランキング   にほんブログ村 小遣いブログ ポイントサイトへ
PR

シェアはとても励みになります。ありがとう!

購読はフォローが便利です

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です