HTMLのリストとは？WordPressで「ul・ol・li」を使い分ける方法

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

WordPressでリストを作りたいときには、「ul・ol・li」というHTMLタグを使います。
これらのタグには役割があるので、きちんと使い分けることが大事です。

では、どうやってリストを作っていけばいいのか？
この記事で、「ul・ol・li」の使い方をわかりやすく解説していきます！

デザインにも影響があるので、より見やすい記事を書くことにも繋がります。
リストをうまく使いながら、読まれる記事を書いてみませんか？

このページの目次

WordPressの「ul・ol・li」について
【まとめ】リストを書く時は「ul・ol・li」を使ってみよう

WordPressの「ul・ol・li」について

ワードプレスの投稿画面には、「ul・ol・li」がクイックタグとして用意されています。

ul・ol・li

これらはリストを作るためのタグで、以下のような役割があります。

ul: 順不同リスト; 「・」が先頭に付くリスト; ulタグの中にliで項目を追加する
ol: 順序リスト; 「1.2.3…」といった数字が先頭に付くリスト; olタグの中にliで項目を追加する
li: リストの中にある項目を指定する

つまり、ul・olがそれぞれリストの種類を指定しています。
liは、リストの中身となる項目を追加するタグです。

順不同リスト・順序リストの書き方

書き方としては、こんな感じです。

<!-- 順不同リスト -->
<ul>
	<li>レタス</li>
	<li>人参</li>
	<li>玉ねぎ</li>
</ul>

<!-- 順序リスト -->
<ol>
	<li>レタスを一口大にちぎる</li>
	<li>人参は皮をむき、千切りにする</li>
	<li>玉ねぎを薄切りにする</li>
	<li>器にサラダを盛りつける</li>
	<li>ドレッシングをかける</li>
</ol>

サラダのレシピを書いてみました（笑）