• Home
  • Web制作
  • HTMLリスト装飾術！地味な箇条書きを華麗に変身させる方法

HTMLリスト装飾術！地味な箇条書きを華麗に変身させる方法

schedule update
Tags: HTML

HTMLリスト装飾術！地味な箇条書きを華麗に変身させる方法

Webサイトやブログで情報を整理し、読みやすくするために欠かせないのがリスト表示ですよね。しかし、デフォルトの黒丸や数字だけのリストでは、どこか味気なく感じてしまうことも。

実はHTMLには、リストをもっと魅力的に見せるための装飾機能が備わっているんです！この記事では、HTMLリスト装飾の基本から応用、CSSを使ったさらなるカスタマイズまで、具体的な方法をわかりやすく解説していきます。

記事を読み終える頃には、あなたのサイトのリストも華麗に変身していることでしょう！

1. リスト装飾の基本：type属性を使いこなそう！

HTMLでリストを装飾する最も基本的な方法が、<ul>タグと<ol>タグにtype属性を指定することです。type属性を使うことで、リストの先頭に表示される記号の種類を変更できます。

1.1 順序なしリスト(<ul>)におけるtype属性

順序なしリスト(<ul>)では、type属性に以下の値を指定できます。

  • disc：黒丸（デフォルト）
  • circle：白丸
  • square：四角

例えば、白丸のリストを作成したい場合は、以下のように記述します。

<ul type="circle">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

1.2 順序付きリスト(<ol>)におけるtype属性

順序付きリスト(<ol>)では、type属性に以下の値を指定できます。

  • 1：数字（デフォルト）
  • A：アルファベット大文字
  • a：アルファベット小文字
  • I：ローマ数字大文字
  • i：ローマ数字小文字

例えば、アルファベット大文字のリストを作成したい場合は、以下のように記述します。

<ol type="A">
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ol>

2. CSSでリスト装飾をもっと自由に！

type属性によるリスト装飾は便利ですが、表現できる範囲は限られています。もっと自由度の高いリスト装飾を行うには、CSSを活用するのがおすすめです。

2.1 list-style-typeプロパティ

CSSのlist-style-typeプロパティは、HTMLのtype属性と同様にリストの先頭に表示される記号の種類を指定できます。

例えば、四角い記号のリストを作成したい場合は、以下のように記述します。

ul {
  list-style-type: square;
}

2.2 list-style-imageプロパティ

list-style-imageプロパティを使えば、記号の代わりに任意の画像をリストの先頭に表示できます。

例えば、ハートの画像をリストの先頭に表示したい場合は、以下のように記述します。

ul {
  list-style-image: url("heart.png");
}

2.3 list-style-positionプロパティ

list-style-positionプロパティは、リストの先頭に表示される記号の位置を調整できます。

  • inside：リスト項目の内側に記号を表示
  • outside：リスト項目の外側に記号を表示（デフォルト）

例えば、記号をリスト項目の内側に表示したい場合は、以下のように記述します。

ul {
  list-style-position: inside;
}

3. まとめ：リスト装飾で表現の幅を広げよう！

HTMLのtype属性とCSSのlist-styleプロパティを活用すれば、リストの見た目を自由自在にカスタマイズできます。

今までデフォルトのリスト表示に甘んじていた方も、ぜひ今回の記事を参考に、リスト装飾に挑戦してみて下さい！ きっと、あなたのWebサイトやブログが、より魅力的になるはずです。

関連記事