【HTML入門】箇条書き(リスト)の作り方

箇条書きは、HTMLではリストというものになります。番号がついたリスト、ついていないリストや、リストの段の下げ方も合わせて見ていきましょう。

順序なしリスト

単に項目を並べるだけの順序が関係ないリストは、ulタグとliタグを用います。ulでリストであることを示し、liでリストの項目を示します。

ulの子要素としてliが並んでいますね。ulの子要素はli以外の子要素を持つことは実質できません。

liの子要素は様々なものを指定できるので、画像を表示したり、ブロック要素を用意したりといったことも可能です。

See the Pen html li block by Totori (@souki202) on CodePen.

ulはunorderd listの略です。

ブロック要素とインライン要素については下の記事にあります。

順序がついたリストは、olタグを利用します。

順序なしリストと違い、リストに番号がついていますね。この番号は自動的に付与されます。

順序付きにするか、順序なしにするかは、例えばWordなどで文書を書くときに順序を付けるかどうか、などの普段の基準で決めれば問題ありません。

olはorderd listの略です。

li要素の子要素としてulやolを入れていくと、リストの段を下げることができます。

ここで、段を下げる際に

<ul>
  <li> <!-- ここ -->
    <ul>
      <li>1-1</li>
      <li>1-2</li>
    </ul>
  </li>
  <!-- ... -->

といったように、liのすぐ後にulやolを入れると表示が崩れます。必ず1行開くように項目名などなにか挟んでからulやolを続けるときれいに表示されます。

リストには、順序付きと順序なしの2種類あり、順序付きリストの番号は自動で付与されます。

liの子要素には、文字列以外にも様々なものを入れることができます。また、CSSも習得して、美しいリストを作成できるようになりましょう!