【サンプルコード付き】HTMLで箇条書きをつくる方法を丁寧に解説

※本サイトにはプロモーション・広告が含まれています。

（最終更新日：2023年6月）

この記事はこんな方向けです

「HTMLで要素を箇条書きにする方法が知りたい」
「箇条書きってどんな種類があるんだろう」
「HTMLの箇条書きをカスタマイズする方法を教えて」

当記事でお伝えすること

  • HTMLで箇条書きにするための基本
  • 箇条書きをカスタマイズする方法
  • 箇条書きで空白・改行を制御する方法

当記事では、HTMLで箇条書きを作成する方法はもちろん、箇条書の種類やそのカスタマイズ方法まで実例付きで詳しく解説します。

ぜひ最後までお読みください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker
¥2,640 (2024/04/27 14:21:02時点 Amazon調べ-詳細)

HTMLの箇条書を理解するための前提知識

この記事では、ウェブページの基本的な要素の1つである箇条書きについて詳しく解説します。

箇条書きはウェブサイトで頻繁に使用される要素であり、その表現は非常に多様です。

  • HTMLとは
  • 箇条書きの概要

HTMLとは

HTML (Hyper Text Markup Language) は、ウェブページを構築するためのマークアップ言語です。

HTMLを使うことでテキストに構造を持たせ、ハイパーリンクや箇条書きなどの要素を追加できます。

タグを使うことで、さまざまな文章をマークアップでき、いろいろな形式に変更できるのです。

<p>これは通常の文章を作るpタグ</p>
<a href="#">これはリンクを作るaタグ</a>

箇条書きの概要

箇条書きは、ウェブページの情報を一覧化する際に非常に有用なツールです。

情報を簡潔に整理し、ユーザーが読みやすい形で提示できます。

箇条書きの形式は、無順序リストと順序付きリストの2つです。

HTMLの「ul」、「ol」、「li」というタグを用いて作成します。

<!-- 順序付きリスト例 -->
<ol>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ol>

箇条書きの基本タグ

次に、箇条書きを作成するために必要な基本タグについて説明します。

これらのタグを理解することで、箇条書きの作成や編集がより容易になるでしょう。

  • 「ul」と「li」で順序無しリストを作る
  • 「ol」と「li」で順序付きリストを作る
  • 「ul」と「ol」の違い

「ul」と「li」で順序無しリストを作る

「ul」タグと「li」タグを使用することで、順序のない箇条書きリストを作成できます。

「ul」はUnordered Listの略と覚えておきましょう。

ulタグの内部に、「li」（List Item）タグを記述することでリストの各項目を作ります。

こちらが例です。

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

「ol」と「li」で順序付きリストを作る

順序付きのリストを作成するためには、「ol」と「li」のタグを組み合わせます。

「ol」はOrdered Listの略で、その内部に「li」（List Item）タグを記述することでリストの各項目を作ります。

順序付きリストでは、各項目に自動的に番号が付けられます。

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

これをウェブページで表示すると以下のようになります。

  1. First step
  2. Second step
  3. Third step

このように、「ol」タグを使うことで手順や順序を伴う情報を整理しやすく表示できます。

「ul」と「ol」の違い

「ul」と「ol」の最も重要な違いは、「ul」が順序を持たないリストを、「ol」が順序付きのリストを作成するということです。

例えば、お菓子の種類を列挙するときは「ul」を、レシピの手順を説明するときは「ol」を使用するとよいでしょう。

どちらのタグも「li」を子要素として持ち、それぞれのリスト項目を表現します。

箇条書きの装飾

こちらでは、箇条書きをより見やすく、また目立たせるために装飾する方法について説明します。

装飾する方法は多岐にわたりますので、具体的な例を複数見ていきましょう。

  • リストの外枠を線で囲む
  • 背景色を変更する
  • 文字色を変更する
  • デザイン性の高いリストの作成

リストの外枠を線で囲む

リストの全体を線で囲むことで、リストの項目がひとつのまとまりであることを強調できます。

これはCSSを用いて以下のように実装します。

ul {
  border: 2px solid #000000;
  padding: 10px;
}

このコードでは、ul要素全体を2pxの太さの黒色の線で囲い、内側の余白（パディング）を10pxに設定しています。

背景色を変更する

リストの背景色を変更することで、リストを見やすくしたり、他要素と区別したりすることが可能です。

これもCSSを用いて以下のように実装します。

ul {
  background-color: #FFFFCC;
}

このコードでは、ul要素全体の背景色を淡い黄色に設定しています。

詳しく背景色について学びたい方はこちらをどうぞ。

【基本】HTMLで背景色を設定する方法｜良い背景色を選ぶためには？
ウェブページの背景色を変更するための「HTMLの背景色設定」について知りたいですか？背景色の変更は、ウェブページの視覚的な表現を豊かにし、ユーザーエクスペリエンスを向上させるための重要な手段です。当記事では、HTMLとCSSを用いて背景色を設定する基本的な方法や実践的な例を詳細に解説しています。初心者の方必見です。
itc.tokyo
2023.06.04

文字色を変更する

リストの文字色を変更することも可能です。

これにより、特定のリストの視認性を高めることができます。

li {
  color: #FF0000;
}

このコードでは、li要素全体の文字色を赤色に設定しています。

【実践】HTMLの文字色設定の基本から実例までを徹底解説
ウェブページのテキスト色を変更するための「HTMLの文字色設定」について知りたいですか？テキストの色を調整することで、ウェブページの視覚的な表現が豊かになり、ユーザー体験を向上させます。この記事では、HTMLとCSSを用いて文字色を設定する基本的な方法や実践的な例を詳細に解説しています。初心者の方必見です。
itc.tokyo
2023.06.03

デザイン性の高いリストの作成

以上の要素を組み合わせることで、よりデザイン性の高いリストを作成することが可能です。

さらにマーカーのスタイルを変更したり、特定の項目だけを強調したりすることも可能です。

<!-- 特定の項目を強調表示 -->
<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li style="color: red; font-weight: bold;">オレンジ</li>
  <li>ぶどう</li>
</ul>

<!-- マーカーのスタイルを変更　-->
<ul style="list-style-type: square;">
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
  <li>ぶどう</li>
</ul>

こうした高度なカスタマイズは、CSSの知識を深めることで実現可能となります。

箇条書きのマーカーをカスタマイズ

箇条書きのマーカー（リストの項目記号）をカスタマイズする方法を見ていきましょう。。

ここでは、マーカーを非表示にする方法について取り上げます。

  • list-styleプロパティ
  • マーカーを非表示にする方法
  • 任意の文字をマーカーにする

list-styleプロパティ

箇条書のマーカー（「・」や「1.」など）を変更するには、list-sytleプロパティの値を変更します。

list-styleに入れられる値は以下のとおり。

  • disc: 黒い円形のマーカー（デフォルト）
  • circle: 空の円形のマーカー
  • square: 黒い正方形のマーカー
  • decimal: 数字（1, 2, 3…）
  • decimal-leading-zero: 先頭に0をつけた数字（01, 02, 03…）
  • lower-roman: 小文字のローマ数字（i, ii, iii…）
  • upper-roman: 大文字のローマ数字（I, II, III…）
  • lower-alpha: 小文字のアルファベット（a, b, c…）
  • upper-alpha: 大文字のアルファベット（A, B, C…）

例としては、circleを入れるコードはこちらです。

<style>
  ul {
    list-style: circle;
  }
</style>

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

マーカーを非表示にする方法

リストのマーカーを非表示にすることも可能です。

リストが直感的に理解しやすくなるために、使える場面があるでしょう。

以下のCSSコードで、マーカーを非表示にします。

ul {
  list-style-type: none;
}

list-style-typeプロパティをnoneに設定してください。

ul要素のすべてのリストマーカーが非表示になります。

任意の文字をマーカーにする

リストのマーカーを任意の文字列にできます。

手順はこちら。

  1. list-tyleをnoneにする
  2. ::beforeで任意の文字れを入れる
  3. その他の設定を入力する

具体的には以下のようになります。

<style>
  ul {
    list-style-image: url("none");
    list-style-type: none;
  }
  li::before {
    content: "--"; <!--ここを好きな文字にします -->
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
</style>

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

箇条書きの余白調整

箇条書きの見た目を調整するために、「余白」を調整する方法をご覧いただきます。

項目間の間隔は、li要素のmarginまたはpaddingプロパティで調整しましょう。

margin-bottomプロパティを使用して、項目間の下方向の間隔を10pxに設定しています。

li {
  margin-bottom: 10px;
}

リスト全体の周囲の余白を調整するのは、ulまたはol要素のmarginまたはpaddingプロパティです。

以下の例では、リスト全体の内側の余白を20pxに設定しています。

ul {
  padding: 20px;
}

これらのスタイルを適切に組み合わせることで、リストの見た目を大きく変えることができます。

リスト内での改行方法

リスト内での改行方法をご覧ください。

リストの項目が長文であったり、項目内で段落を分けたいときに使えるものです。

  • 「br」タグを使用する
  • 「display:block」を使った改行

「br」タグを使用する

「br」タグはHTMLの基本的なタグで、文章中で改行を行うときに使用します。

リスト内でも同様に使用可能。

以下に例を示します。

<ul>
  <li>項目1の説明文。<br>ここから新たな行で説明を続けます。</li>
  <li>項目2の説明文。</li>
</ul>

ここでは、「項目1の説明文。」の後に「br」タグを挿入し、新たな行で説明を続けています。

「display:block」を使った改行

もうひとつの方法として、CSSの「display:block」を使用する方法があります。

指定した要素がブロックレベル要素として扱われ、新たな行から開始されるのです。

以下に例を示します。

<ul>
  <li><span style="display:block;">項目1の説明文。</span>ここから新たな行で説明を続けます。</li>
  <li>項目2の説明文。</li>
</ul>

ここでは、「項目1の説明文。」を「span」タグで囲み、「display:block」を適用。

「項目1の説明文。」の後に新たな行が始まります。

入れ子構造の箇条書き作成法

HTMLのリストでは、リスト内にさらにリストを作成することが可能です。

これは入れ子構造と呼ばれ、より詳細な情報を分かりやすく提示するために利用されます。

こちらがその例です。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3
    <ul>
      <li>サブ項目1</li>
      <li>サブ項目2</li>
    </ul>
  </li>
  <li>項目4</li>
</ul>

チェックマーク付きリストの作成

箇条書きリストは単なる項目の列挙だけでなく、チェックリストとしても活用できます。

タスクの進行状況や、必要な項目が全て揃っているかの確認などに役立つでしょう。

チェックマーク付きのリストは以下の手順で作ります。

  • 「ul」タグを使用して基本的なリストを作成
  • 「li」タグ内にチェックマークを表現するためのHTMLエンティティ、「✔」または、「✓」を挿入

以下にそのコードを示します。

<ul>
  <li>✔ 項目1</li>
  <li>✓ 項目2</li>
</ul>

もしくは::before疑似要素を活用し、チェックマークを入れることも可能。

そのコードはこちらです。

<style>
  .custom-list{
    list-style:none;
  }
  .custom-list li::before {
    content: "✔";
    margin-right: 0.5em;
  }
</style>
<ul class="custom-list">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
</ul>

これを利用すれば、視覚的に分かりやすいチェックリストを作成することが可能です。

まとめ

当記事を通じて、HTMLで箇条書きリストを作成・装飾する方法について解説してきました。

  • 箇条書を作るには、「ul」や「ol」、「li」タグを使う
  • 背景色や文字色を変更し、さまざまな装飾やカスタマイズも可能
  • list-styleプロパティでマーカーを変更する

リストはWebページの構造を整理し、ユーザーにとって分かりやすく情報を提示するのに重要な要素です。

ぜひ、今回学んだことを活用してみてください。

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