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

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

例えば、

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

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

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

リスト（箇条書き）とは

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

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

番号ありリスト（Ordered List）

番号なしリスト（Unordered List）

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

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

リストの構文

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

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

番号ありリスト（Ordered List）

<ol>
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ol>

番号なしリスト（Unordered List）

<ul>
<li>サンプル１</li>
<li>サンプル２</li>
<li>サンプル３</li>
</ul>

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

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

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

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

『番号あり』とはつまり

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

ということです。

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

なので

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

逆に考えれば

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

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

なので

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

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

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

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

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

サンプル１、サンプル２、サンプル３の部分がそれに該当します。

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”

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

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

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

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

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

リストの順序を変更する

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

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

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

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

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

もうお判りでしょうか。

そうです。

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

<ol start=”開始番号”>

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

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

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

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

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

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

となるのですが、

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

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

<li value=”1″>

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

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

リストの中身は

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

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

まとめ – HTMLのリスト

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

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

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

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

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

関連記事はこちら