ＨＴＭＬを使って箇条書きの入れ子にする方法は？
箇条書き・箇条書きの入れ子の行間の調整法は？

についてまとめました。


ＨＴＭＬの箇条書きについてはこちらの記事をご覧ください。
⇒　ＨＴＭＬを使って箇条書き、記号・数字を表示する方法



入れ子とはこんな感じです。

• 項目１
  • 項目１－１
  • 項目１－２
• 項目２
  • 項目２－１
  • 項目２－２

項目１を、さらに箇条書き（ここでは項目１－１と項目１－２）にしたいときに使うＨＴＭＬです。

記事を書いていて、箇条書きを箇条書きしたいというときが出てきます。

この箇条書き、入れ子のＨＴＭＬを覚えておくと便利です。

箇条書きを入れ子にするＨＴＭＬ

<ul>

<li>項目１
<ul>
<li>項目１－１</li>
<li>項目１－２</li>
</ul>
</li>

<li>項目２
<ul>
<li>項目２－１</li>
<li>項目２－２</li>
</ul>
</li>

</ul>

<li>項目１</li>の項目１と</li>の間に

<ul>
<li>項目１－１</li>
<li>項目１－２</li>
</ul>

を入れるイメージです。


また、入れ子にした箇条書きを数字で表示するには

<li>項目１</li>の項目１と</li>の間に

<ol>
<li>項目１－１</li>
<li>項目１－２</li>
</ol>

を入れればＯＫです。

箇条書きを数字の入れ子にするＨＴＭＬ

<ul>

<li>項目１
<ol>
<li>項目１－１</li>
<li>項目１－２</li>
</ol>
</li>

<li>項目２
<ol>
<li>項目２－１</li>
<li>項目２－２</li>
</ol>
</li>

</ul>

次に、箇条書きの行間を調整する方法です。

箇条書きの行間を調整するＨＴＭＬ

標準の行間はこんな感じです。
↓

• 項目１
• 項目２

ちょっと行間がつまり過ぎて見づらいときに、下のようなＨＴＭＬを<li>に追加します。

行間を調整するＨＴＭＬ

<li style="line-height:行間の数値を入れる ;">

ここでは行間の数値はｅｍを使います。
３ｅｍ分行間を広げます。

• 項目１
• 項目２

標準の行間より広くなったので、見やすくなりましたね。




最後まで読んでいただき、ありがとうございます。