HTML:リストの書き方

記事を書くときにポイントを伝えたり、内容を要約する場合によく使うのがリスト(箇条書き)です。
例えば、「ポイントは3つです。」とか「以下のことのに気を付けましょう。」なんて書きたいとき、
リストがあると読みやすい見た目に出来ますよね。
そんなよく使うリストの書き方を今回は覚えましょう。
リスト(箇条書き)とは
まずはリストってどんなものか見ていきましょう。
リストは大きく2種類あります。
番号ありリスト(Ordered List)
- サンプル1
- サンプル2
- サンプル3
番号なしリスト(Unordered List)
- サンプル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>
どうでしょう?
何となく構文が見えてきませんか。
では、解説に入りますね。
リストには2種類あるとお話しました。
『番号あり』と『番号なし』です。
『番号あり』とはつまり
順番に並んでいる
ということです。
それを英語でOrderといいます。
順番に並んだリスト = Ordered List
なので
<ol></ol>タグでくくります。
逆に考えれば『番号なし』は『順番ではない』ので否定を意味する”Un”をつけて、
Unorderと表記します。
順番ではないリスト = Unordered List
なので
<ul></ul>タグを使います。
ココを抑えたら次はリストの中身です。
中身の部分は<ol>、<ul>で共通して
<li></li>タグを使います。
中身とは『箇条書きで書きたい内容』のことです。
サンプル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
- サンプル2
- サンプル3
<ol type=”i”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>
ローマ数字大文字:type = “I”
- サンプル1
- サンプル2
- サンプル3
<ol type=”I”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>
アルファベット小文字:type = “a”
- サンプル1
- サンプル2
- サンプル3
<ol type=”a”>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
</ol>
アルファベット大文字:type = “A”
- サンプル1
- サンプル2
- サンプル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
- サンプル2
- サンプル3
- サンプル4
- サンプル5
- サンプル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
- サンプル2
- サンプル3
- サンプル4
- サンプル5
- サンプル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のリストとしてはバッチリですね!
Informative article, exactly what I wanted to find. Fredrika Ellsworth Roman
Thank you for reading my site!
I’ll try to blush up my article.
Thanks for this well-written article. Really interesting ! Roslyn Arman Letta
I’m glad to read ur comment.
Thanks a lot!
Thank you for every other informative blog.
I’m glad to hear that!
This should be the best collection of blogging website i ever found out. Ollie Ratterman
Thank you so much.