【HTML】3分で学ぶリスト(箇条書き)ul・ol・liの使い方

HTML

HTMLの基本・リスト(箇条書き)の作り方―ul / ol / li タグの使い方について1から解説しています。

リストはHTMLで非常に頻繁に利用されるもので、一見難しいように思えるかもしれませんが3分でマスターできるぐらいコーディングは簡単です。このページでは以下の内容について解説しています。

このページで学べる内容

  • ul / ol / li タグの使い方
  • リスト(箇条書き)をコーディングする際の注意点
  • type属性の使い方

Web担当者、HTML学習中の人は絶対に覚えておきたい内容ばかりですので、是非最後までご覧ください。

スポンサーリンク
スポンサーリンク

リスト(箇条書き)

まず、リスト(箇条書き)をHTMLで書いた場合の完成イメージから。リストは大きく2つの種類に分類されます。

完成イメージ:パターン1

  • Chrome
  • Internet Explorer
  • Firefox
<ul>
  <li>Chrome</li>
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>

完成イメージ:パターン2

  1. Chrome
  2. Internet Explorer
  3. Firefox
<ol>
  <li>Chrome</li>
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ol>

パターン1は、箇条書きの先頭が黒丸(・)だったのに対し、パターン2では数字が昇順に並べられています。

何となく最終完成形のイメージをつかんだところで実際のHTMLの書き方について解説していきます。

ul・ol・li タグの使い方

ul・ol・li タグの使い方の要点は3つだけ。

※HTMLの基本的なコーディング方法やタグなどの概念がイマイチよくわからない・・・という方は以下のページをご覧ください。

① liタグを ulタグ or olタグで囲む

リストは、liタグを用います。次に、liタグ全体を入れ子にする形で、ulタグ or olタグで囲みます。

こちらを、実際にHTMLで表示してみると・・・

  •  〇〇〇
  •  △△△
  •  □□□

となります。先頭の黒丸を番号(昇順)に変えたい場合は、ulタグではなくolタグを用います。

※liは「List Item」の略称です。

② liタグ以外を囲まない

ulタグ・olタグで囲むのはliタグのみです。

liタグ以外を囲むことは禁止です。

NG例

<ul>
 <p>これは、ブラウザの一覧です!</p>
  <li>Chrome</li>
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>

pタグが入れ子にされてしまっているためNGです。ulタグ・olタグ以外を囲むことは禁止です。

③ コードはインデントする

「インデントする」とは、行頭をそろえるということです。

以下に示す2種類のHTMLを見てみましょう。どちらも結果は同じになります。

<ul><li>Chrome</li><li>Internet Explorer</li><li>Firefox</li></ul>
<ul>
  <li>Chrome</li>
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>

いかがでしょうか?完全に後者のほうが見やすいですよね。

可読性が高いということは、結果が想定と異なる場合(バグ)に原因が分かりやすくなりますし、ミスも大幅に減らすことができます。動きが同じだから適当でいいや・・・ではなく、普段から可読性向上の観点からインデントを意識してコーディングすることが重要です。

補足:ulタグとolタグの覚え方―意味

以上で、ulタグ・olタグ・liタグの使い方はOKです。

補足として、ulタグとolタグの意味を解説しておきます。ulタグ・olタグ、どちらが番号付きでどちらが黒丸かちょっと覚えづらいのですが、略す前の正式名称を知っていると区別がつきやすくなります。

ulは「Unordered list」。olは「Ordered List」の略です。Orderとは「順番」という意味なので、Ordered Listはすなわち順番リスト。すなわち番号が入っているリストというように覚えておきましょう。

type属性―アイコン変更

type属性を用いることで、これまで黒丸 or 数字のみであった先頭のアイコンを変更することができます。

ここからは属性についての基礎知識が必要となります。属性とは・・・?という方は以下のページをご覧ください。

type="circle" 白丸

type="circle" 指定することで、アイコンを白丸に変更することができます。

※circleは「丸」という意味です。

<ul>
  <li type="circle">Chrome</li>
  <li type="circle">Internet Explorer</li>
  <li type="circle">Firefox</li>
</ul>

結果


  • Chrome
  • Internet Explorer
  • Firefox

type="square" 四角

type="square" 指定することで、アイコンを四角に変更することができます。

※squareは「四角」という意味です。

<ul>
  <li type="sqare">Chrome</li>
  <li type="sqare">Internet Explorer</li>
  <li type="sqare">Firefox</li>
</ul>

結果


  • Chrome
  • Internet Explorer
  • Firefox

type="A" 英語(ABC順)

type="A" 指定することで、順番付きリストのアイコンを英語(ABC順)に変更することができます。

<ol>
  <li type="A">Chrome</li>
  <li type="A">Internet Explorer</li>
  <li type="A">Firefox</li>
</ol>

結果


  1. Chrome
  2. Internet Explorer
  3. Firefox

type="a" 英語(小文字)

type="a" (小文字)指定することで、順番付きリストのアイコンを英語(abc順)に変更することができます。

 <ol>
  <li type="a">Chrome</li>
  <li type="a">Internet Explorer</li>
  <li type="a">Firefox</li>
</ol>

結果


  1. Chrome
  2. Internet Explorer
  3. Firefox

type="I" ローマ数字

type="I" (小文字)指定することで、順番付きリストのアイコンをrローマ数字(Ⅰ・Ⅱ・Ⅲ~)に変更することができます。

 <ol>
  <li type="I">Chrome</li>
  <li type="I">Internet Explorer</li>
  <li type="I">Firefox</li>
</ol>

結果


  1. Chrome
  2. Internet Explorer
  3. Firefox

これで、HTMLで自由自在にリスト(箇条書き)を作成できるようになるはずです。

タイトルとURLをコピーしました