箇条書きulとol！liタグを入れ子にする方法で、スッキリ見やすいブログへ♪

HTMLタグの番号付きリスト<ol>や番号なしリスト<ul>の項目<li>をどう書いたら良いのか、リストの中にリストを入れ子にする書き方や使い方タグの意味を説明します。

検索エンジンはそれらHTMLタグの違いで意味を理解しているので、ブログ運営者も知っておきたいところです。以下の不明点が解るページになります。

箇条書きであるHTMLタグol・ul・liのザックリした意味
リストを入れ子にして使いたい
文章をスッキリした項目にしたい

手書きで箇条書きを書くのと同じデザインを、ブログでHTMLタグでどうやって書くか。箇条書きを作る方法を見ていきましょう！

HTMLタグリストとは何！？
リスト<li>の入れ子
1. gif画像でリストliを入れ子に。WordPressでHTMLをかく方法みる
2. liを入れ子にする場合
  1. ulのliに更にulのliと入れ子にしたときのHTML
文章をリストにして、ブログをスッキリ読みやすくする
リストのカスタイマイズ
さいごに

HTMLタグリストとは何！？

<li>リストの意味

リスト<li>は（後述の）序列の有無を表すol・ulタグの子要素に使われ、開始タグ<li>から終了タグ</li>が箇条書きの項目として認識されます。

<li>項目</li>

コレがリストの項目となるワケです。

リストの使い方。親要素ol・ulを付け序列の重要性を表す

リストliタグを囲む親要素ol・ulがありますが、項目に順番の無有をあらわします。親要素olタグとulタグ、意味の違いは下記の通り。

olタグ

ordered listの略で、序列ありの箇条書きリスト。<li>項目</li>の親要素でolタグで囲む。

<ol>
	<li>項目1</li>
	<li>項目2</li>
</ol>

ブラウザでの表示例（テーマでstyle済み）

項目1
項目2

olタグで囲むことによって、liタグ内の項目は順番の意味を持つ。

ulタグ

unordered listの略で、序列なしの箇条書きリスト。<li>項目</li>の親要素としてulタグで囲む。

<ul>
	<li>項目</li>
	<li>項目</li>
</ul>

ブラウザでの表示例（テーマでstyle済み）

項目
項目

項目の順番を重要としない場合は、ulタグで囲む。

ポイント

『olタグ・ulタグ』のどちらで<li>項目</li>を囲うかによって、『順番がある・ない』とユーザーだけでなく、HTMLタグを見る検索エンジンにも伝える。

目次2.1.2『クローラーは、HTMLタグを理解し情報を読み取る』などを参考まで。

LINK初心者ができるSEO！検索エンジンの仕組みから説明しよう

ol・ulどっちが番号ありのタグか迷ったとき『ordered list』の前にunが付く方がulだから、番号なし！っと思い出してください＾＾

リスト<li>の基本的な書きかた

子要素になる<li>項目</li>『liタグ』に、親要素『序列なしのulタグ』か『序列ありのolタグ』を囲んで成立です。ul・olには、liである項目が1つは必須ってことで、序列ありのolは2つ以上あるときに使用すれば良いって事になりますね。

<ul>
	<li>項目</li>
</ul>
<ol>
	<li>項目</li>
	<li>項目</li>
</ol>

今使ってるテーマでの表示は下記の通り。

項目

項目
項目

リスト<li>の入れ子

リストを使うと文章として書くより、解りやすいだけでなく見た目もスッキリしますよね。

リストの中に項目を増やしを入れ子にすると見出しのように階層がついて、関連が解りやすいだけでなく、パッと見ても単語が拾いやすいです。

序列の有無によって、使い方例をあげるので、見てみましょう＾＾

gif画像でリストliを入れ子に。WordPressでHTMLをかく方法みる

動く画像でやり方をチェックしたほうが分かりやすいと思うので、リストliに番号なしulを『入れ子』にしている様子を見てください。

liの中にliを入れulタグで囲む様子

動く画像を見れば次の説明が、より分かりやすと思います。

liを入れ子にする場合

序列を重要としないulタグの項目liタグを入れ子にする、HTML書きかたについて。たとえば、『果物の種類』をあげる場合を紹介します。

※序列を重要とするランキングの場合は、olを使ってください。

いちご
- あまおう
- あすかルビー
- とちおとめ
りんご
- ふじ
- つがる
- 王林
ぶどう
- 巨峰
- ピオーネ
- デラウエア

ulの項目liタグ要素『いちご』の中に、『いちごの種類の3項目』ul liを入れる例。

入れ子にしたい親の『項目の内容』と『</li>』終了タグの間に、ulリストを丸々入れればOK！HTMLタグに階層を付けると解りやすいので下記ソースをご覧ください。
<ul>
<li>いちご
<ul>
<li>あまおう</li>
<li>あすかルビー</li>
<li>とちおとめ</li>
</ul>
</li>
<li>りんご
<ul>
<li>ふじ</li>
<li>つがる</li>
<li>王林</li>
</ul>
</li>
<li>ぶどう
<ul>
<li>巨峰</li>
<li>ピオーネ</li>
<li>デラウエア</li>
</ul>
</li>
</ul>

<ul>
	<li>いちご
		<ul>
			<li>あまおう</li>
			<li>あすかルビー</li>
			<li>とちおとめ</li>
		</ul>
	</li>
	<li>りんご
		<ul>
			<li>ふじ</li>
			<li>つがる</li>
			<li>王林</li>
		</ul>
	</li>
	<li>ぶどう
		<ul>
			<li>巨峰</li>
			<li>ピオーネ</li>
			<li>デラウエア</li>
		</ul>
	</li>
</ul>

いちご、りんご、ぶどうの『<li>各種類</li>』の中『</li>の前』に、<ul>と<li>のセットを入れる、下記▼画像の感じですね。

ul liの中にul liを入れ子にするHTML例。

ulは順番を重要としないですが、好きなもの順にする場合。

ulをolに置き換えて、序列を作ればOK！

ulのliに更にulのliと入れ子にしたときのHTML

さらに入れ子にする場合は、下記のようになります。

果物の種類
- いちご
  - あまおう
  - あすかルビー
  - とちおとめ
- りんご
  - ふじ
  - つがる
  - 王林
- ぶどう
  - 巨峰
  - ピオーネ
  - デラウエア
野菜の種類

<ul>
	<li>果物の種類
		<ul>
			<li>いちご
				<ul>
					<li>あまおう</li>
					<li>あすかルビー</li>
					<li>とちおとめ</li>
				</ul>
			</li>
			<li>りんご
				<ul>
					<li>ふじ</li>
					<li>つがる</li>
					<li>王林</li>
				</ul>
			</li>
			<li>ぶどう
				<ul>
					<li>巨峰</li>
					<li>ピオーネ</li>
					<li>デラウエア</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>野菜の種類</li>
</ul>