HTML:リスト(箇条書き)ol・ulの使い分け

li

記事を書くときにポイントを伝えたり、
内容を要約する場合によく使うのがリスト(箇条書き)です。

例えば、

「ポイントは3つです。」
とか
「以下のことのに気を付けましょう。」

なんて書きたいとき、
リストがあると読みやすい見た目に出来ますよね。

そんなよく使うリストの書き方を今回は覚えていきましょう。

リスト(箇条書き)とは

まずはリストってどんなものか見ていきましょう。

リストは大きく2種類あります。

番号ありリスト(Ordered List

  1. サンプル1
  2. サンプル2
  3. サンプル3

番号なしリスト(Unordered List

  • サンプル1
  • サンプル2
  • サンプル3

こんな具合に箇条書きをするときにリストを使います。

単純ですがリストを使わず横並びにすると、やっぱり頭に入ってきにくいですね。

サンプル1、サンプル2、サンプル3

リストの構文

リストの書き方は非常に覚えやすいです。
これさえ覚えておけば、HTMLでリストを駆使することができます。

まずはサンプルでお見せしたもののHTML文を確認してください。

番号ありリスト(Ordered List

<ol>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>

番号なしリスト(Unordered List

<ul>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ul>

どうでしょう?
何となく構文が見えてきませんか。

では、解説に入りますね。

箇条書きリスト:olとul違いの解説

リストには2種類あるとお話しました。
番号あり』と『番号なし』です。

『番号あり』とはつまり

数字通りの順番に並んでいる

ということです。

それを英語でOrderといいます。
順番に並んだリスト = Ordered List

なので

<ol></ol>タグでくくります。

逆に考えれば

『番号なし』は『数字の順番ではない』ので
否定を意味する”Un”をつけて、
Unorderと表記します。

順番ではないリスト = Unordered List

なので

<ul></ul>タグを使います。

ココを抑えたら次はリストの中身です。

中身の部分は<ol>、<ul>で共通して

<li></li>タグを使います。

中身とは『箇条書きで書きたい内容』のことです。
liタグで表しますがList Itemから来ていると思います。

サンプル1、サンプル2、サンプル3の部分がそれに該当します。

HTMLでリストを書く際は、
まず『番号あり:<ol>』『番号なし:<ul>』を決めます。

あとは<ol>もしくは<ul>タグ内に、
<li>タグを書いていけばリストの完成です!

<ol>と<ul>さえ覚えておけば、
もっと言うと<ol>だけでもOrder Listだと覚えていれば
反対の<ul>も思い出しやすいですね。

リスト種類 英語 タグ
番号あり Orderd List ol
番号なし Unrderd List ul

リストの応用(属性を指定)

色を変えたりとかはCSSの領域になるのですが、
HTMLでも応用的な書き方があるので紹介しておきます。

属性を指定することで表示を変えることが可能です。

「属性って何?」と思った方は、
属性について解説していますのでこちらの記事を読んでみてください。

番号形式を変える

番号ありのリスト(Orderd List)の”番号”部分の表示を変更できます。
番号部分って要は順番を示すためのものなので、種類(type)があります。

指定方法は単純です。
<ol>の開始タグを↓のようにします。

<ol type=”ここの値で変わる“>

ではサンプルを見てください。
左側がビジュアル、右側がHTML文になります。

ローマ数字小文字:type = “i”

  1. サンプル1
  2. サンプル2
  3. サンプル3

<ol type=”i”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>

ローマ数字大文字:type = “I”

  1. サンプル1
  2. サンプル2
  3. サンプル3

<ol type=”I”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>

アルファベット小文字:type = “a”

  1. サンプル1
  2. サンプル2
  3. サンプル3

<ol type=”a”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>

アルファベット大文字:type = “A”

  1. サンプル1
  2. サンプル2
  3. サンプル3

<ol type=”A”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>

typeの種類も覚えやすいですね。
ローマ数字はiから始まるのでtypeは”i”、
アルファベットはaから始まるのでtypeは”a”です。

大文字にしたければそれぞれ大文字で”I”と”A”を指定するだけです。

リストの順序を変更する

ここまでみて頂いたサンプルは常に1から始まっていますね。

でも、リストの間に文章をはさんだりした場合、
「リストの3番目から開始したい」というときもあるはずです。

こういうときにリストの順番を指定することができます。

ポイントは『開始』です。

開始は英語で”Start”ですね。

もうお判りでしょうか。

そうです。

今度は<ol>タグに”start”を指定します。

<ol start=”開始番号”>

サンプルを見てください。
startで指定したところからリストが始まっていますね。

  1. サンプル1
  2. サンプル2
  3. サンプル3
  1. サンプル4
  2. サンプル5
  3. サンプル6

<ol start=”4″>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>
<ol start=”1″>
<li>サンプル4</li>
<li>サンプル5</li>
<li>サンプル6</li>
</ol>

リストの6番と1番の間に空行があるの気になりますよね。

ここに空行があるのは<ol>タグが2つ存在しているからです。
タグが変わると空行が入ってしまいます。

では、この空行をなくすにはどうすればいいか。

<ol>タグを1つにしなければなりません。

「じゃあ、startの指定も1つしかムリやん!」

となるのですが、

順番の指定は実は<li>タグにも出来るようになっています。

ここが少しややこしいのですが、
<li>タグで番号を指定する場合は『値』を意味する”value”を使用します。

<li value=”1″>

タグの切れ目をなくす(<ol>タグを1つにする)と以下のように空白行がなくなります。

  1. サンプル1
  2. サンプル2
  3. サンプル3
  4. サンプル4
  5. サンプル5
  6. サンプル6

<ol start=”4″>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
<li value=”1″>サンプル4</li>
<li>サンプル5</li>
<li>サンプル6</li>
</ol>

<ol>タグは”start”、<li>タグでは”value”を使うんですが、
覚え方としては<ol>タグは必ず<li>タグより前にあるので、
『開始のstart』は<ol>タグだとわかりますね。

リストの中身は

『startじゃない方、”value”』
『ここからはこの値(value)』

などで覚えられると思います。

まとめ – HTMLのリスト

ブログを書く上でリストは頻繁に使うことになります。
私もよくリストを使います。

なので、リストの使い方を覚えておけば、
それだけで伝わりやすい記事にすることが可能です。

リストは『番号あり(<ol>タグ)』『番号なし(<ul>タグ)』があって、
リストの中身は<li>タグを使う。

ここだけ抑えておけばリストは使えますね。

これに加えて属性(type、start、value)も使えれば、
HTMLのリストとしてはバッチリですね!

関連記事はこちら

del&s
“取り消し線”を使えば記事の訂正・更新ができる上に、アピールもできるのでしっかり身に付けてください。
詳細はこちら
li
記事を書くときに”リスト”があると箇条書きでわかりやすい内容にできます。リストはよく使うのでマスターしましょう。
詳細はこちら
HTML要素と属性
HTMLをより詳細に設定するために”要素”と”属性”について解説します。
詳細はこちら
HTML
ブログの基礎であるHTMLとは何か?まずはこれを理解することから始めましょう。
詳細はこちら

HTML:リスト(箇条書き)ol・ulの使い分け” に対して2件のコメントがあります。

  1. SporDurağı より:

    your site is very nice, but you need to pay more attention to the comments of the users.

    1. m.tanio81@gmail.com より:

      Thank you for ur advice.
      Recently I checked the users who give me some comments.
      Some of them are suspicious, so I denied all comments.
      I’m checking comments now.

コメントを残す

メールアドレスが公開されることはありません。