読みやすい文章の秘訣、HTMLの箇条書きタグ（UL、OL）の完全活用法

ウェブサイトを作る際、読みやすさと分かりやすさは最重要です。特に、情報を整理し視覚的にアクセスしやすくするためには、箇条書きの活用が鍵を握ります。HTMLでの箇条書き作成には、ul、ol、liの3つのタグが使用され、それぞれの使い方を理解することが重要です👍

この記事では、それぞれのタグの役割と、効果的な使い方について詳しく解説していきます。

ulとolの違いを把握する

冒頭で描いた通り、HTMLで箇条書きリストを作る際にはul、ol、liの3種類のタグを使用するのですが、まずはそれぞれのタグの基本的な役割について見ていきましょう。

ulタグ

ulはUnordered List（順不同リスト）の略で、順番の関係ないリストを作成する際に使うタグです。例えばポイントのまとめや、関連性のある要素を一覧表示する際に使用します。このタグで作られたリストは、以下のように黒い点で表示されます。

<ul>
  <li>にんじん</li>
  <li>じゃがいも</li>
  <li>たまねぎ</li>
</ul>

See the Pen 箇条書きの例1 by yusuke1110 (@yusuke1110) on CodePen.

olタグ

olはOrdered List（順序づけされたリスト）の略で、順番が重要なリストを作成する際には、olタグを使用します。例えば手順やステップを明確にする際に便利で、以下のようにこのタグで作られたリストは、自動的に番号が割り当てられます。

<ol>
  <li>材料を切る</li>
  <li>強火で炒める</li>
  <li>水を注いでカレーのルーを入れる</li>
</ol>

See the Pen 箇条書きの例2 by yusuke1110 (@yusuke1110) on CodePen.

liタグ

liはList Item（リスト項目）の略で個々の箇条書き項目を表すためのタグです。ulタグやolタグ内をこのliタグで区切ることで、はじめて箇条書きのリストが作成されます。liタグ単体で使用することはありません。

リストの中にli以外のタグ入れたい場合は？

例えば、リスト内の項目としてpタグを使いたいと思っても、ulタグやolタグの直接の子要素として入れるのはNGです。

<!-- NGの例 -->
<ul>
  <p><li>にんじん</li></p>
  <p><li>じゃがいも</li></p>
  <p><li>たまねぎ</li></p>
</ul>

ulタグやolタグの直接の子要素は必ずliになるようにし、他のタグはliタグ内に入れるようにしましょう。

<!-- OKの例 -->
<ul>
  <li><p>にんじん</p></li>
  <li><p>じゃがいも</p></li>
  <li><p>たまねぎ</p></li>
</ul>

箇条書きにすると何が良いのか

今まで見てきたとおり、HTMLで箇条書きを使う事自体、特に難しいことはなくて、箇条書きを使用しウェブサイトやブログの内容をどれだけ読み手に伝わりやすくできるかということが重要です。

例えば以下の例を見てください。

文章のみで説明した例

にんじん、じゃがいも、たまねぎを用意します。材料を切ったら強火で炒め、水を注いでカレールーを入れましょう。

箇条書きを使って説明した例

用意するもの

• にんじん
• じゃがいも
• たまねぎ

作り方

1. 材料を切る
2. 強火で炒める
3. 水を注いでカレーのルーを入れる

このように、同じ内容でも箇条書きを使うことで手順がはっきりし、理解しやすくなったと思います。

まとめ

今回の記事では、HTMLにおける箇条書きの重要性と正しい使い方をご紹介しました。

箇条書きは検索エンジンやブラウザにはもちろん、読者にとっても情報を構造的に整理し、分かりやすくアクセスしやすいコンテンツを作成する上で不可欠です。文章だらけの記事よりも、（やりすぎは禁物ですが）色々な表現があった方が飽きのこない構成にする事ができます。

皆さんも今回の記事も参考にしながら、正しい知識と技術で、読者にとって魅力的でアクセスしやすいコンテンツを作成していきましょう😊