Web開発
CSSFont AwesomeHTMLolタグulタグWebデザインリストデザイン初心者向け初心者向けCSS

HTMLリスト（ul・ol）の使い方とCSSデザイン集｜階層リスト＆アイコン装飾サンプル

2022.10.27
スポンサーリンク

Webページで情報を整理する際に欠かせないのが、リスト（ulタグ・olタグ） です。
記事の目次や箇条書き、手順説明など幅広く使われていますが、デフォルトのままだと単調で味気なく感じることもあります。

この記事では、

  • HTMLのリストの基本
  • 階層リストの作り方
  • CSSでのスタイル設定方法
  • Font Awesomeアイコンの活用法
  • 応用的な活用法

を順番に解説します。
初心者の方からWeb制作の実務に活用したい方まで、すぐに参考になる内容です。

HTMLのリストの基本

ulタグとolタグの違い

  • ulタグ（unordered list）：順序なしリスト。順序に意味がない箇条書きに使います。
  • olタグ（ordered list）：順序ありリスト。手順やランキングなど、順序に意味がある場合に利用します。
  • liタグ（list item）：リストの各項目。

シンプルなサンプルコード

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
  <li>ステップ3</li>
</ol>

See the Pen シンプルなサンプルコード by take it easy (@take-it-easy) on CodePen.

<ul>: 順序なしリスト要素 - HTML | MDN
は HTML の要素で、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。
developer.mozilla.org
<ol>: 順序付きリスト要素 - HTML | MDN
は HTML の要素で、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。
developer.mozilla.org
<li>: リストアイテム要素 - HTML | MDN
は HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト ()、順序なしリスト ()、メニュー () のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内において...
developer.mozilla.org

リストを階層にする方法

ネスト（入れ子構造）の作り方

リストを階層化したい場合、liタグの中にulやolを入れることで表現できます。

サンプルコード

<ol>
  <li>一階層①</li>
  <li>一階層②
    <ul>
      <li>二階層①</li>
      <li>二階層②
        <ul>
          <li>三階層①</li>
          <li>三階層②</li>
        </ul>
      </li>
      <li>二階層③</li>
    </ul>
  </li>
  <li>一階層③</li>
</ol>

See the Pen Untitled by take it easy (@take-it-easy) on CodePen.

注意点

階層が深くなりすぎると、読みにくくなるので2～3階層までに収めるのがおすすめです。

リストにスタイルを設定する方法

CSSで共通スタイルを設定

まずはリスト全体に共通のスタイルを設定しましょう。

:root {
  --list-color: #3261ab; /* 共通カラー */
}

ol, ul {
  list-style: none;      /* ブラウザのデフォルトの箇条書きマーク（・や1.）を非表示にする */
  font-size: 16px;       /* フォントサイズを統一 */
  padding: 0;            /* インデント（内側の余白）をリセット */
}

ol li, ul li {
  margin: 8px 0;         /* 項目同士の間隔 */
}

疑似要素を使った装飾

CSSの ::before を使うことで、番号やアイコンを自由にカスタマイズできます。

リストの階層ごとのデザイン例

一階層（番号付きリスト）

番号を丸で囲んで表示します。

ol.menu1 {
  counter-reset: count;
}

ol.menu1 > li {
  position: relative;
  padding-left: 24px;
}

ol.menu1 > li::before {
  content: counter(count);
  counter-increment: count;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 2px;
  background-color: var(--list-color);
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  color: #fff;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
CSS カウンターの使用 - CSS: カスケーディングスタイルシート | MDN
CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振ったり、順序付きリストの番号を変更したりするのに使用することができます。
developer.mozilla.org
counter-reset - CSS: カスケーディングスタイルシート | MDN
counter-reset は CSS のプロパティで、 CSS カウンターを指定された値で初期化します。要素の数値から 1 までカウントアップするカウンター、および要素の数値から 1 までカウントダウンするカウンターを作成することができま...
developer.mozilla.org
counter-increment - CSS: カスケーディングスタイルシート | MDN
counter-increment は CSS のプロパティで、指定された値によって CSS カウンターの値を増加または減少させたり、すべてのカウンターまたはここのカウンターが変化することを防いだりするためのプロパティです。
MDN Web Docs

二階層（矢印アイコン付き）

Font Awesomeの矢印を利用します。

※ Font Awesomeを初めて利用する場合は、まずCDNをHTMLに読み込む必要があります。
<head>内に以下のコードを記述してください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
ul.menu2 > li {
  position: relative;
  padding-left: 18px;
}

ul.menu2 > li::before {
  font-family: 'FontAwesome';
  content: '\f138'; /* 矢印アイコン */
  position: absolute;
  left: -3px;
  top: 2px;
  font-size: 16px;
  color: var(--list-color);
}
Host Yourself - Web Fonts
Font Awesome Docs
Find Icons with the Perfect Look & Feel | Font Awesome
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new icons, styles, ...
fontawesome.com

三階層（小さめアイコン）

ul.menu3 > li {
  position: relative;
  padding-left: 18px;
}

ul.menu3 > li::before {
  font-family: 'FontAwesome';
  content: '\f054';
  position: absolute;
  left: -3px;
  top: 2px;
  font-size: 12px;
  color: var(--list-color);
}

実装サンプル（HTML＋CSSコード）

<ol class="menu1">
  <li>一階層①</li>
  <li>一階層②
    <ul class="menu2">
      <li>二階層①</li>
      <li>二階層②
        <ul class="menu3">
          <li>三階層①</li>
          <li>三階層②</li>
        </ul>
      </li>
    </ul>
  </li>
</ol>

See the Pen Untitled by take it easy (@take-it-easy) on CodePen.

リストにおすすめのFont Awesomeアイコン一覧

リストの装飾に使えるFont Awesomeアイコンをまとめました。
用途に応じて選ぶと、見た目がより分かりやすくなります。

用途アイコン例コード（content）使用イメージ
チェックリスト✔️ fa-check\f00c完了済みタスク、ToDoリスト
矢印（右向き）➡️ fa-angle-right\f105サブ項目や階層リストの見出し
矢印（二重）⏩ fa-angle-double-right\f101重要ポイントやリンク誘導
星マーク⭐ fa-star\f005レビューやおすすめ度表示
丸付き点● fa-circle\f111シンプルな装飾用
四角付き点■ fa-square\f0c8注意点や補足情報の区切り
情報アイコンℹ️ fa-info-circle\f05aヒントや補足情報を示す
注意アイコン⚠️ fa-exclamation-triangle\f071注意書きや警告メッセージ

使用例（CSS）

ul.checklist > li::before {
  font-family: 'FontAwesome';
  content: '\f00c'; /* チェックマーク */
  color: green;
  margin-right: 6px;
}

ul.arrowlist > li::before {
  font-family: 'FontAwesome';
  content: '\f105'; /* 矢印 */
  color: #3261ab;
  margin-right: 6px;
}

応用的なリスト活用法

アイコンフォント以外を使う

  • 画像やSVGを使えばオリジナル感が出せます。
  • サイトの雰囲気に合わせてカスタマイズ可能。

ナビゲーションメニューへの応用

  • サイドバーのメニュー
  • 記事目次
  • FAQ一覧

として利用することで、ユーザーにとって見やすいページ構成になります。

よくある質問（FAQ）

Q
ulタグとolタグはどう使い分ければ良いですか？
A

順序がある場合はolタグ、順序がない場合はulタグ を使います。例えば、レシピや手順にはol、チェックリストや箇条書きにはulを使うのが一般的です。

Q
list-styleをnoneにすると番号や点が消えますが、SEO的に問題ありませんか？
A

問題ありません。検索エンジンはHTML構造を読み取るので、CSSでデザインを変更してもリストとして認識されます。

<ul>: 順序なしリスト要素 - HTML | MDN
は HTML の要素で、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。
developer.mozilla.org
Q
Font Awesomeを使わずにアイコンを入れる方法はありますか？
A

あります。SVGアイコンや背景画像を ::before で指定する方法も一般的です。Font Awesomeを使わずに軽量化したい場合におすすめです。

Q
階層リストは何階層まで使っていいですか？
A

理想は2～3階層までです。4階層以上にすると読みにくくなるため、別の見出しやテーブルを使った方が整理しやすいです。

Q
WordPressの記事目次プラグインと併用できますか？
A

可能です。リストデザインをカスタマイズしても、見出しタグ（h2/h3）を正しく使っていれば目次プラグインに影響はありません。

まとめ

  • ulタグと**olタグ**の違いを正しく理解し、意味のある使い分けをすることが重要です。
  • CSSの共通スタイル＋疑似要素でデザイン性をアップできます。
  • Font Awesomeアイコンを使えば、より分かりやすくおしゃれに装飾できます。
  • リストはナビゲーションや目次への応用も可能です。

「リストの見せ方」を工夫するだけで、ページの読みやすさや印象が大きく変わります。
ぜひこの記事のサンプルを活用して、あなたのWebサイトでも取り入れてみてください。

スポンサーリンク
タイトルとURLをコピーしました