MENU
  1. ホーム
  2. HTML&CSS
  3. 【html&css】ul・li・olの使い方とおしゃれなデザインリスト

【html&css】ul・li・olの使い方とおしゃれなデザインリスト

HTML&CSS
html-and-css-list

HTMLにおけるul・li・olタグの使い方（箇条書きリスト）を解説します。

これらのタグを活用することで、リッチなコンテンツ作成が可能になります。

また、HTML&CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTML&CSSページをご確認ください。

HTML&CSS | Code Stock
目次

HTMLにおけるul・li・olの書き方

Webサイトで箇条書きを作る際、テキストエディタのように「・（なかぐろ）」や「1. 2.」を直接入力するのではなく、専用のHTMLタグを使用します。

リストを作るタグには<ul>、<ol>、<li>の3種類があり、これらを組み合わせて使用します。

HTMLにおけるul・li・olの書き方
  • 「ulとli」または「olとli」のセットで使う
  • ulとolの違い

「ulとli」または「olとli」のセットで使う

箇条書きを作る際のルールは、「リスト全体を囲む親タグ（ulまたはol）」と「各項目を作る子タグ（li）」を必ずセットの入れ子にして使います。

liは「List Item（リストの項目）」の略です。

<li>単独で使うことはできず、必ず<ul>か<ol>の中に入れて使います。

ulとliの箇条書き

<ul>は「Unordered List（順序がないリスト）」の略です。

順序に関係なく項目を並べたい時に使い、ブラウザでは各項目の頭に「黒丸（・）」などのマーカーが付与されます。

買い物リスト（ulの例）

  • 牛乳
  • たまご
  • 食パン
HTMLコード表示
<div class="list-demo-wrap">
  <p class="list-demo-title">買い物リスト（ulの例）</p>
  
  <ul class="demo-ul">
    <li>牛乳</li>
    <li>たまご</li>
    <li>食パン</li>
  </ul>

</div>
CSSコード表示
.list-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  margin-bottom: 20px;
}
.list-demo-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
/* ulの基本スタイル */
.demo-ul {
  background-color: #ffffff;
  padding: 15px 15px 15px 40px; /* 左側にマーカー用の余白を空ける */
  border: 1px dashed #adb5bd;
  margin: 0;
}
.demo-ul li {
  margin-bottom: 5px;
  color: #0d6efd;
  font-weight: bold;
}
/* 最後の項目の下余白を消す */
.demo-ul li:last-child {
  margin-bottom: 0;
}

olとliの箇条書き

<ol>は「Ordered List（順序があるリスト）」の略です。

手順やランキングなどの順番ある項目を並べたい時に使い、ブラウザでは「1, 2, 3…」と連番の数字が付きます。

項目を途中に足しても、自動で数字を振り直してくれる便利なタグです。

カレーの作り方（olの例）

  1. 野菜とお肉を切る
  2. 鍋で炒める
  3. 水を入れて煮込む
  4. カレールーを入れる
HTMLコード表示
<div class="list-demo-wrap">
  <p class="list-demo-title">カレーの作り方（olの例）</p>
  
  <ol class="demo-ol">
    <li>野菜とお肉を切る</li>
    <li>鍋で炒める</li>
    <li>水を入れて煮込む</li>
    <li>カレールーを入れる</li>
  </ol>

</div>
CSSコード表示
/* olの基本スタイル */
.demo-ol {
  background-color: #ffffff;
  padding: 15px 15px 15px 40px;
  border: 1px dashed #adb5bd;
  margin: 0;
}
.demo-ol li {
  margin-bottom: 5px;
  color: #198754;
  font-weight: bold;
}
.demo-ol li:last-child {
  margin-bottom: 0;
}

ulとolの違い

<ul>（黒丸）と<ol>（数字）、どちらを使えばいいか迷った時は「項目の順番を入れ替えても意味が通じるかどうか」で判断しましょう。

  • 順番を入れ替えても問題ないもの =<ul>
    （例：必要な持ち物、参加者の名前、商品の特徴など）
  • 順番を入れ替えると意味が変わってしまうもの ＝<ol>
    （例：料理のレシピ、会員登録の手順、人気ランキングなど）
ulタグ（順序なし）
  • HTML
  • CSS
  • JavaScript

順番を入れ替えても「学ぶ言語」という意味は変わりません。

olタグ（順序あり）
  1. HTMLの基本を学ぶ
  2. CSSで装飾する
  3. JavaScriptで動かす

学習の「ステップ（手順）」なので、順番が変わると困ります。

HTMLコード表示
<div class="list-compare-wrap">
  <div class="compare-box">
    <div class="compare-header bg-blue">
      ulタグ（順序なし）
    </div>
    <ul class="compare-list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <p class="compare-desc">
      順番を入れ替えても「学ぶ言語」という意味は変わりません。
    </p>
  </div>

  <div class="compare-box">
    <div class="compare-header bg-green">
      olタグ（順序あり）
    </div>
    <ol class="compare-list">
      <li>HTMLの基本を学ぶ</li>
      <li>CSSで装飾する</li>
      <li>JavaScriptで動かす</li>
    </ol>
    <p class="compare-desc">
      学習の「ステップ（手順）」なので、順番が変わると困ります。
    </p>
  </div>
</div>
CSSコード表示
.list-compare-wrap {
  display: flex;
  gap: 20px;
  font-family: sans-serif;
}
/* スマホ用に縦並びにする設定 */
@media (max-width: 600px) {
  .list-compare-wrap {
    flex-direction: column;
  }
}
.compare-box {
  flex: 1;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
}
.compare-header {
  padding: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.bg-blue {
  background-color: #0d6efd;
}
.bg-green {
  background-color: #198754;
}
.compare-list {
  padding: 20px 20px 20px 40px;
  margin: 0;
  background-color: #ffffff;
  font-weight: bold;
  color: #333;
}
.compare-list li {
  margin-bottom: 8px;
}
.compare-desc {
  padding: 15px;
  margin: 0;
  font-size: 13px;
  color: #666;
  background-color: #f1f3f5;
  border-top: 1px solid #dee2e6;
}

リスト（箇条書き）の装飾を変える

<ul>や<ol>といったリストの親タグは、ひとつの「大きな箱（ブロック要素）」として振る舞います。

そのため、枠線（border）や背景色（background-color）などのCSSプロパティを適用し、リスト全体を装飾できます。

リスト（箇条書き）の装飾を変える
  • ボックス周りを線で囲う
  • 背景色を変える
  • 文字色を変える

ボックス周りを線で囲う

記事の「まとめ」や「注意点」など読者の目を引きつけたいリストは、<ul>タグ自体にborder（枠線）を指定して囲うのが効果的です。

例えば、角を丸くするborder-radiusと組み合わせると、親しみやすいデザインになります。

  • HTMLで構造を作る
  • CSSで装飾する
  • 枠線をつけて目立たせる！
HTMLコード表示
<div class="list-border-wrap">
  <input type="radio" name="lb-type" id="lb-none" class="lb-radio" checked>
  <input type="radio" name="lb-type" id="lb-solid" class="lb-radio">
  <input type="radio" name="lb-type" id="lb-dashed" class="lb-radio">

  <div class="lb-controls">
    <label for="lb-none" class="lb-btn">枠線なし</label>
    <label for="lb-solid" class="lb-btn">実線で囲う</label>
    <label for="lb-dashed" class="lb-btn">破線＋角丸で囲う</label>
  </div>

  <ul class="lb-target">
    <li>HTMLで構造を作る</li>
    <li>CSSで装飾する</li>
    <li>枠線をつけて目立たせる！</li>
  </ul>

</div>
CSSコード表示
.list-border-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.lb-radio {
  display: none;
}
.lb-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lb-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
#lb-none:checked ~ .lb-controls [for="lb-none"],
#lb-solid:checked ~ .lb-controls [for="lb-solid"],
#lb-dashed:checked ~ .lb-controls [for="lb-dashed"] {
  background-color: #0d6efd;
  color: #ffffff;
}
/* リストの基本スタイル */
.lb-target {
  background-color: #ffffff;
  padding: 20px 20px 20px 40px;
  margin: 0;
  color: #333;
  transition: all 0.3s ease;
}
.lb-target li {
  margin-bottom: 8px;
}
.lb-target li:last-child {
  margin-bottom: 0;
}
/* =========================================
  ラジオボタンで枠線を切り替える
  ========================================= */
#lb-none:checked ~ .lb-target {
  border: none;
}
#lb-solid:checked ~ .lb-target {
  border: 2px solid #0d6efd; /* 青い実線 */
}
#lb-dashed:checked ~ .lb-target {
  border: 3px dashed #198754; /* 緑の破線 */
  border-radius: 12px;        /* 角を丸くする */
}

背景色を変える

<ul>タグにbackground-colorを指定すると、箇条書き全体を色付きのボックスとして見せられます。

背景色をつける時は、必ずpadding（内側の余白）をセットで指定してください。

余白がないと、文字が箱のフチにギリギリまで引っ付いてしまい、読みにくいデザインになります。

  • 背景色をつける時は
  • 必ずpadding（内側の余白）で
  • 息継ぎのスペースを作ろう！
HTMLコード表示
<div class="list-bg-wrap">
  <input type="radio" name="lbg-type" id="lbg-none" class="lbg-radio" checked>
  <input type="radio" name="lbg-type" id="lbg-gray" class="lbg-radio">
  <input type="radio" name="lbg-type" id="lbg-blue" class="lbg-radio">

  <div class="lbg-controls">
    <label for="lbg-none" class="lbg-btn">背景なし</label>
    <label for="lbg-gray" class="lbg-btn">薄いグレー</label>
    <label for="lbg-blue" class="lbg-btn">薄いブルー</label>
  </div>

  <ul class="lbg-target">
    <li>背景色をつける時は</li>
    <li>必ずpadding（内側の余白）で</li>
    <li>息継ぎのスペースを作ろう！</li>
  </ul>

</div>
CSSコード表示
.list-bg-wrap {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.lbg-radio {
  display: none;
}
.lbg-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lbg-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
#lbg-none:checked ~ .lbg-controls [for="lbg-none"],
#lbg-gray:checked ~ .lbg-controls [for="lbg-gray"],
#lbg-blue:checked ~ .lbg-controls [for="lbg-blue"] {
  background-color: #0d6efd;
  color: #ffffff;
}
/* リストの基本スタイル */
.lbg-target {
  padding: 20px 20px 20px 40px;
  margin: 0;
  color: #333;
  border: 1px dashed #adb5bd; /* 領域をわかりやすくするための仮の線 */
  transition: background-color 0.3s ease;
}
.lbg-target li {
  margin-bottom: 8px;
}
.lbg-target li:last-child {
  margin-bottom: 0;
}
/* =========================================
  ラジオボタンで背景色を切り替える
  ========================================= */
#lbg-none:checked ~ .lbg-target {
  background-color: transparent;
}
#lbg-gray:checked ~ .lbg-target {
  background-color: #f1f3f5; /* 薄いグレー */
  border: none; /* 仮の線を消す */
}
#lbg-blue:checked ~ .lbg-target {
  background-color: #e3f2fd; /* 薄いブルー */
  border: 2px solid #90caf9; /* 背景に合わせた枠線もつけるとおしゃれ */
  border-radius: 8px;
}

文字色を変える

リストの文字色を変更するには、colorプロパティを使用します。

親要素である<ul>に文字色を指定すると、中にある<li> のテキストだけでなく、先頭についている黒丸（・）や数字マーカーの色も一緒に変わるという特徴があります。

  • 親のulに色を指定すると
  • 中のテキストの色が変わり
  • マーカー(・)の色も一緒に変わります！
HTMLコード表示
<div class="list-color-wrap">
  <input type="radio" name="lc-type" id="lc-normal" class="lc-radio" checked>
  <input type="radio" name="lc-type" id="lc-blue" class="lc-radio">
  <input type="radio" name="lc-type" id="lc-red" class="lc-radio">

  <div class="lc-controls">
    <label for="lc-normal" class="lc-btn">標準 (黒)</label>
    <label for="lc-blue" class="lc-btn">青色にする</label>
    <label for="lc-red" class="lc-btn">赤色＋太字にする</label>
  </div>

  <ul class="lc-target">
    <li>親のulに色を指定すると</li>
    <li>中のテキストの色が変わり</li>
    <li>マーカー(・)の色も一緒に変わります！</li>
  </ul>

</div>
CSSコード表示
.list-color-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.lc-radio {
  display: none;
}
.lc-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lc-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
#lc-normal:checked ~ .lc-controls [for="lc-normal"],
#lc-blue:checked ~ .lc-controls [for="lc-blue"],
#lc-red:checked ~ .lc-controls [for="lc-red"] {
  background-color: #0d6efd;
  color: #ffffff;
}
/* リストの基本スタイル */
.lc-target {
  background-color: #ffffff;
  padding: 20px 20px 20px 40px;
  margin: 0;
  border: 1px dashed #adb5bd;
  transition: all 0.3s ease;
}
.lc-target li {
  margin-bottom: 8px;
}
.lc-target li:last-child {
  margin-bottom: 0;
}
/* =========================================
  ラジオボタンで文字色を切り替える
  ========================================= */
#lc-normal:checked ~ .lc-target {
  color: #333333; /* 標準的な濃いグレー */
  font-weight: normal;
}
#lc-blue:checked ~ .lc-target {
  color: #0d6efd; /* 青色 */
}
#lc-red:checked ~ .lc-target {
  color: #dc3545; /* 赤色 */
  font-weight: bold; /* 警告用などに太字にする */
}

箇条書きのマーカー表示を変える

HTMLで<ul>や<ol>を作ると、ブラウザがマーカー（・や1.2.3…）を表示します。

しかし、Webデザインの実務において、このマーカーを一度消し去り、CSSを使ってアイコンやデザインを作り直すのが一般的です。

箇条書きのマーカー表示を変える
  • マーカーを消す方法
  • おしゃれなオリジナルマーカーを作る（::beforeの活用）

マーカーを消す方法

リストの先頭にあるマーカーを消すには<ul>または<ol>タグに対してlist-style: none;（または list-style-type: none;）というプロパティを指定します。

マーカーを消しただけでは、マーカーが表示されていた場所の「左側の余白（padding-left）」がそのまま残ってしまいます。

マーカーを消す時はlist-style: none;とpadding-left: 0;（またはpadding: 0;）を必ずセットで指定して、余白も一緒にリセットするのが鉄則です。

▼ 左側の緑色のエリアが「デフォルトの余白」です

  • リストの項目 1
  • リストの項目 2
  • リストの項目 3
HTMLコード表示
<div class="list-style-wrap">
  <input type="radio" name="ls-type" id="ls-default" class="ls-radio" checked>
  <input type="radio" name="ls-type" id="ls-none-only" class="ls-radio">
  <input type="radio" name="ls-type" id="ls-perfect" class="ls-radio">

  <div class="ls-controls">
    <label for="ls-default" class="ls-btn">① デフォルト</label>
    <label for="ls-none-only" class="ls-btn">② マーカーだけ消す（失敗例）</label>
    <label for="ls-perfect" class="ls-btn">③ マーカーと余白を消す（成功）</label>
  </div>

  <div class="ls-box">
    <p class="ls-label">▼ 左側の緑色のエリアが「デフォルトの余白」です</p>
    <ul class="ls-target">
      <li>リストの項目 1</li>
      <li>リストの項目 2</li>
      <li>リストの項目 3</li>
    </ul>
  </div>

</div>
CSSコード表示
.list-style-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.ls-radio {
  display: none;
}
.ls-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ls-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
#ls-default:checked ~ .ls-controls [for="ls-default"],
#ls-none-only:checked ~ .ls-controls [for="ls-none-only"],
#ls-perfect:checked ~ .ls-controls [for="ls-perfect"] {
  background-color: #0d6efd;
  color: #ffffff;
}
.ls-box {
  background-color: #ffffff;
  padding: 20px;
  border: 1px dashed #adb5bd;
}
.ls-label {
  font-size: 14px;
  color: #198754;
  font-weight: bold;
  margin-bottom: 10px;
}
/* リストの基本スタイル */
.ls-target {
  background-color: #e8f5e9; /* 余白（padding）の領域が分かるように緑色にする */
  margin: 0;
  color: #333;
  font-weight: bold;
  border: 1px solid #198754;
  transition: all 0.3s ease;
}
.ls-target li {
  background-color: #ffffff; /* 文字の部分は白にする */
  padding: 5px;
  border-bottom: 1px solid #dee2e6;
}
.ls-target li:last-child {
  border-bottom: none;
}
/* =========================================
  ① デフォルト（何もしない）
  ブラウザ初期設定の list-style: disc; と padding-left: 40px; 程度が効いている
  ========================================= */
#ls-default:checked ~ .ls-box .ls-target {
  /* デフォルトのまま */
}
/* =========================================
  ② マーカーだけ消す（よくある失敗）
  マーカーは消えるが、左側に緑色の無駄な余白が残ってしまう
  ========================================= */
#ls-none-only:checked ~ .ls-box .ls-target {
  list-style: none; /* マーカーを消す */
}
/* =========================================
  ③ マーカーと余白を両方消す（成功）
  これで綺麗に左揃えになり、オリジナルの装飾がしやすくなる
  ========================================= */
#ls-perfect:checked ~ .ls-box .ls-target {
  list-style: none; /* マーカーを消す */
  padding-left: 0;  /* 左の余白もゼロにして完全にリセット！ */
}

おしゃれなオリジナルマーカーを作る（::beforeの活用）

擬似要素（::before）を使うと、リストの各項目（<li>）の先頭に、文字や図形を「CSSだけで後から付け足す」ことができます。

これをマーカーとして見立てることで、色も大きさも位置もコントロールできます。

▼ ボタンを押して、オリジナルマーカーを切り替えてみましょう ▼

  • CSSの「::before」を使えば
  • マーカーのデザインは自由自在！
  • 位置のズレも完璧に直せます。
HTMLコード表示
<div class="custom-marker-wrap">
  <p style="font-size:14px; margin-bottom:15px; text-align:center;">▼ ボタンを押して、オリジナルマーカーを切り替えてみましょう ▼</p>

  <input type="radio" name="cm-type" id="cm-dot" class="cm-radio" checked>
  <input type="radio" name="cm-type" id="cm-check" class="cm-radio">
  <input type="radio" name="cm-type" id="cm-arrow" class="cm-radio">

  <div class="cm-controls">
    <label for="cm-dot" class="cm-btn">アクセント丸</label>
    <label for="cm-check" class="cm-btn">チェックマーク (✔)</label>
    <label for="cm-arrow" class="cm-btn">CSSで作る矢印</label>
  </div>

  <div class="cm-box">
    <ul class="cm-target">
      <li>CSSの「::before」を使えば</li>
      <li>マーカーのデザインは自由自在！</li>
      <li>位置のズレも完璧に直せます。</li>
    </ul>
  </div>

</div>
CSSコード表示
/* 全体のラッパー */
.custom-marker-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
/* ラジオボタンは非表示 */
.cm-radio {
  display: none;
}
/* ボタンエリアのレイアウト */
.cm-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
/* ボタンのデザイン */
.cm-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  border: 2px solid transparent;
  transition: 0.2s;
}
/* 選択されたボタンの色を変える */
#cm-dot:checked ~ .cm-controls [for="cm-dot"],
#cm-check:checked ~ .cm-controls [for="cm-check"],
#cm-arrow:checked ~ .cm-controls [for="cm-arrow"] {
  background-color: #0d6efd;
  color: #ffffff;
}
.cm-box {
  background-color: #ffffff;
  padding: 20px;
  border: 1px dashed #adb5bd;
}
/* =========================================
  ベースとなるリストの設定（マーカーと余白をリセット！）
  ========================================= */
.cm-target {
  list-style: none; /* デフォルトマーカーを消す */
  padding-left: 0;  /* デフォルトの余白を消す */
  margin: 0;
}
.cm-target li {
  position: relative; /* ★重要：擬似要素の基準位置にする */
  padding-left: 30px; /* 新しいマーカーを入れるための余白を作る */
  margin-bottom: 15px;
  font-weight: bold;
  color: #333;
  line-height: 1.6;
}
.cm-target li:last-child {
  margin-bottom: 0;
}
/* =========================================
   1. アクセント丸（図形をCSSで作る）
  ========================================= */
#cm-dot:checked ~ .cm-box .cm-target li::before {
  content: ""; /* 文字は入れない */
  position: absolute;
  left: 0;
  top: 0.5em; /* 上からの位置を微調整 */
  width: 12px;
  height: 12px;
  background-color: #0d6efd; /* 青色 */
  border-radius: 50%; /* 完全な丸にする */
}
/* =========================================
  2. チェックマークや絵文字（文字・記号を入れる）
  ========================================= */
#cm-check:checked ~ .cm-box .cm-target li::before {
  content: "✔"; /* ここに好きな記号や絵文字を入れるだけ！ */
  position: absolute;
  left: 0;
  top: 0;
  color: #198754; /* 緑色 */
  font-size: 18px;
}
/* =========================================
  3. CSSで作る矢印（少し高度なテクニック）
  ========================================= */
#cm-arrow:checked ~ .cm-box .cm-target li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.4em;
  width: 8px;
  height: 8px;
  border-top: 3px solid #dc3545;   /* 上の枠線 */
  border-right: 3px solid #dc3545; /* 右の枠線 */
  transform: rotate(45deg); /* 45度回転させると「＞」の形になる */
}

箇条書き周りの余白を調整する

リストをデザインする際、「文字が枠線にひっつき見栄えが悪い」「リストの行間が詰まる」といった悩みを解決するのが余白の調整です。

CSSの余白には2つの種類があり、これらを正しく使い分けることで、読みやすいデザインを作れます。

箇条書き周りの余白を調整する
  • 外側の余白（margin）と内側の余白（padding）の違い
  • 枠線と文字の間にスペースを作る（padding）
  • 箇条書きの項目（li）同士の隙間を広げる（margin-bottom）

外側の余白（margin）と内側の余白（padding）の違い

CSSで余白をコントロールする際、覚えておきたいのがmargin（マージン）とpadding（パディング）の違いです。

リスト全体をひとつの箱（ボックス）としてイメージしてみてください。

  • margin（外側の余白）
    箱の「外側」に隙間を作ります。
    リストと上下にある別の文章との距離を離したい時に使います。
  • padding（内側の余白）
    箱の「内側」に隙間を作ります。
    リストの枠線（境界線）から、中の文字までの距離を離したい時に使います。
上の段落（別の文章）
  • リストの項目です
下の段落（別の文章）
HTMLコード表示
<div class="space-mp-wrap">
  <input type="radio" name="smp-type" id="smp-none" class="smp-radio" checked>
  <input type="radio" name="smp-type" id="smp-margin" class="smp-radio">
  <input type="radio" name="smp-type" id="smp-padding" class="smp-radio">

  <div class="smp-controls">
    <label for="smp-none" class="smp-btn">余白なし</label>
    <label for="smp-margin" class="smp-btn">外側 (margin) を広げる</label>
    <label for="smp-padding" class="smp-btn">内側 (padding) を広げる</label>
  </div>

  <div class="smp-demo-area">
    <div class="smp-text-block">上の段落（別の文章）</div>
    
    <ul class="smp-target-ul">
      <li>リストの項目です</li>
    </ul>
    
    <div class="smp-text-block">下の段落（別の文章）</div>
  </div>

</div>
CSSコード表示
.space-mp-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.smp-radio {
  display: none;
}
.smp-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.smp-btn {
  background-color: #e9ecef;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
}
#smp-none:checked ~ .smp-controls [for="smp-none"],
#smp-margin:checked ~ .smp-controls [for="smp-margin"],
#smp-padding:checked ~ .smp-controls [for="smp-padding"] {
  background-color: #0d6efd;
  color: #ffffff;
}
.smp-demo-area {
  background-color: #e9ecef; /* 余白の広がりを見やすくするグレー背景 */
  padding: 2px;
}
.smp-text-block {
  background-color: #ced4da;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}
/* ターゲットとなるリストの基本スタイル */
.smp-target-ul {
  background-color: #ffffff;
  border: 3px solid #0d6efd;
  list-style: none;
  /* アニメーションで変化をわかりやすく */
  transition: all 0.4s ease;
  /* 初期状態は余白ゼロ */
  margin: 0;
  padding: 0;
}
.smp-target-ul li {
  background-color: #e3f2fd;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  color: #0d6efd;
}
/* =========================================
  外側の余白（margin）を追加
  前後の段落との間が開きます。
  ========================================= */
#smp-margin:checked ~ .smp-demo-area .smp-target-ul {
  margin: 30px 0; /* 上下に30pxの外側余白 */
}
/* =========================================
  内側の余白（padding）を追加
  青い枠線と、中の水色の文字エリアの間が開きます。
  ========================================= */
#smp-padding:checked ~ .smp-demo-area .smp-target-ul {
  padding: 30px; /* 上下左右に30pxの内側余白 */
}

枠線と文字の間にスペースを作る（padding）

箇条書きに背景色や枠線（border）をつけた時、忘れてはいけないのがpadding（内側の余白）です。

文字が枠線にくっついていると、窮屈なデザインに見えます。

十分なpaddingを設定して、スペースを作ってあげましょう。

❌ 窮屈な例（padding: 0;）

  • 文字が枠線にひっついています。
  • なんだか息苦しいですね。

⭕️ 美しい例（padding: 20px;）

  • 枠線と文字の間にゆとりがあります。
  • スッキリとしてプロっぽく見えますね！
HTMLコード表示
<div class="space-pad-wrap">
  <div class="sp-row">
    <p class="sp-label">❌ 窮屈な例（padding: 0;）</p>
    <ul class="sp-ul sp-bad">
      <li>文字が枠線にひっついています。</li>
      <li>なんだか息苦しいですね。</li>
    </ul>
  </div>

  <div class="sp-row">
    <p class="sp-label">⭕️ 美しい例（padding: 20px;）</p>
    <ul class="sp-ul sp-good">
      <li>枠線と文字の間にゆとりがあります。</li>
      <li>スッキリとしてプロっぽく見えますね！</li>
    </ul>
  </div>

</div>
CSSコード表示
.space-pad-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}
.sp-row {
  margin-bottom: 20px;
}
.sp-row:last-child {
  margin-bottom: 0;
}
.sp-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}
.sp-ul {
  background-color: #fff3cd; /* 薄い黄色の背景 */
  border: 2px solid #ffc107; /* 黄色の枠線 */
  margin: 0;
  font-weight: bold;
  color: #664d03;
}
.sp-ul li {
  margin-bottom: 5px;
}
.sp-ul li:last-child {
  margin-bottom: 0;
}
/* =========================================
  内側の余白なし（文字がくっつく）
  ========================================= */
.sp-bad {
  padding: 0;
}
/* =========================================
  内側の余白あり（ゆとりができる）
  ========================================= */
.sp-good {
  padding: 20px 20px 20px 30px; /* 上・右・下・左の順で指定 */
}

箇条書きの項目（li）同士の隙間を広げる（margin-bottom）

リスト全体（ul）の余白が整ったら、リストの中身である各項目（li）同士の隙間を調整します。

文章が複数行にわたる長い箇条書きの場合、行間が詰まっていると「どこからどこまでが1つの項目なのか」が分かりにくいです。

各<li>タグに対してmargin-bottom（下側の外余白）を指定して、項目と項目の間に隙間を開けてあげましょう。

  • 【項目1】文章が長くなると、下の項目とくっついて見づらくなることがあります。
  • 【項目2】適度な隙間（margin-bottom）を空けることで、情報の区切りがハッキリします。
  • 【項目3】最後の項目（last-child）だけは、余白を「0」にするのが綺麗に仕上げるコツです！
HTMLコード表示
<div class="space-gap-wrap">
  <input type="checkbox" id="sg-toggle" class="sg-checkbox">

  <div style="text-align:center; margin-bottom:20px;">
    <label for="sg-toggle" class="sg-toggle-btn">項目間の隙間（margin-bottom）を広げる！</label>
  </div>

  <ul class="sg-target">
    <li>【項目1】文章が長くなると、下の項目とくっついて見づらくなることがあります。</li>
    <li>【項目2】適度な隙間（margin-bottom）を空けることで、情報の区切りがハッキリします。</li>
    <li>【項目3】最後の項目（last-child）だけは、余白を「0」にするのが綺麗に仕上げるコツです！</li>
  </ul>

</div>
CSSコード表示
.space-gap-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.sg-checkbox {
  display: none;
}
.sg-toggle-btn {
  display: inline-block;
  background-color: #198754;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.sg-toggle-btn:hover {
  background-color: #157347;
}
/* リスト全体のスタイル */
.sg-target {
  background-color: #ffffff;
  padding: 20px 20px 20px 40px;
  border: 2px dashed #adb5bd;
  margin: 0;
  color: #333;
}
/* 項目の基本スタイル（最初は隙間が狭い） */
.sg-target li {
  background-color: #e8f5e9;
  padding: 10px;
  border-left: 4px solid #198754;
  line-height: 1.5;
  /* 初期はほんの少しだけ余白をつける */
  margin-bottom: 2px; 
  transition: margin-bottom 0.4s ease;
}
/* =========================================
  チェックが入ったら、liの下余白をガッツリ広げる！
  ========================================= */
#sg-toggle:checked ~ .sg-target li {
  margin-bottom: 20px; 
}
/* 最後の項目だけは下余白を「0」にして箱を綺麗に収める */
.sg-target li:last-child {
  margin-bottom: 0 !important; 
}
/* ボタンの色変更 */
#sg-toggle:checked ~ div .sg-toggle-btn {
  background-color: #0d6efd;
}
#sg-toggle:checked ~ div .sg-toggle-btn::after {
  content: "（広くて見やすい）";
}

liタグの中で改行する

箇条書き（<li>）の中に書く文章が長くなった時、エンターキー（Enter）を押して改行しようとしてもWebページ上でうまく反映されません。

HTMLのルールに沿って、正しい改行方法のレイアウトテクニックを習得しましょう。

liタグの中で改行する
  • brタグを使って好きな位置で改行する
  • 2行目以降の文字の頭を揃える（ぶら下がりインデント）

brタグを使って好きな位置で改行する

HTMLはエディタ上でエンターキーの改行や空白を入れても、ブラウザに表示される時は「半角スペース1個分」としてまとめられてしまいます。

改行を行いたい場合は、文章の途中に<br>タグを挿入します。

これは「Break（改行）」の略で、終了タグ（</br>）を持たない単独で働くタグです。

❌ エンターキーで改行（反映されない）

  • エディタ上でエンターキーを押して 改行したつもりでも、 ブラウザでは1行に繋がってしまいます。

⭕️ brタグで改行（好きな位置で区切れる）

  • brタグ（改行タグ）を挿入すれば、
    文章の途中でも
    好きな位置で確実に改行することができます！
HTMLコード表示
<div class="li-br-wrap">
  <div class="li-row">
    <p class="li-label">❌ エンターキーで改行（反映されない）</p>
    <ul class="li-target li-bad">
      <li>
        エディタ上でエンターキーを押して
        改行したつもりでも、
        ブラウザでは1行に繋がってしまいます。
      </li>
    </ul>
  </div>

  <div class="li-row">
    <p class="li-label">⭕️ brタグで改行（好きな位置で区切れる）</p>
    <ul class="li-target li-good">
      <li>
        brタグ（改行タグ）を挿入すれば、<br>
        文章の途中でも<br>
        好きな位置で確実に改行することができます！
      </li>
    </ul>
  </div>

</div>
CSSコード表示
.li-br-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.li-row {
  margin-bottom: 20px;
}
.li-row:last-child {
  margin-bottom: 0;
}
.li-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}
/* 共通のリストスタイル */
.li-target {
  background-color: #ffffff;
  padding: 15px 15px 15px 30px;
  border: 1px dashed #adb5bd;
  margin: 0;
  color: #333;
  line-height: 1.6;
}
.li-bad li {
  color: #dc3545; /* 失敗例は赤っぽく */
}
.li-good li {
  color: #0d6efd; /* 成功例は青っぽく */
  font-weight: bold;
}

2行目以降の文字の頭を揃える（ぶら下がりインデント）

brタグによる改行やスマホなどの画面幅が狭くて文章が2行に折り返された時、「2行目以降の文字が先頭の記号（※など）の下に回り込んでしまう…」という問題がよく発生します。

これを解決するテクニックが「ぶら下がりインデント」です。

  • padding-left: 1em;で文章全体を1文字分右にズラす
  • text-indent: -1em;で1行目の頭だけマイナス1文字分左に引っ張り戻す
  • ※【注意事項 1】
    この文章は長いため改行されています。デフォルトの状態だと、2行目以降の文字が先頭の「※」マークの下に回り込んでしまい、非常に読みにくく素人っぽく見えてしまいます。
  • ※【注意事項 2】
    スマホなど画面が狭いデバイスで見た時も同じように折り返されてしまうため、文字の頭を揃える設定はWebデザインにおいて必須のテクニックです。
HTMLコード表示
<div class="li-indent-wrap">
  <input type="checkbox" id="li-indent-toggle" class="indent-checkbox">

  <div style="text-align:center; margin-bottom:20px;">
    <label for="li-indent-toggle" class="indent-toggle-btn">ぶら下がりインデントを適用する！</label>
  </div>

  <div class="indent-demo-area">
    <ul class="indent-target">
      <li class="indent-item">
        ※【注意事項 1】<br>
        この文章は長いため改行されています。デフォルトの状態だと、2行目以降の文字が先頭の「※」マークの下に回り込んでしまい、非常に読みにくく素人っぽく見えてしまいます。
      </li>
      <li class="indent-item">
        ※【注意事項 2】<br>
        スマホなど画面が狭いデバイスで見た時も同じように折り返されてしまうため、文字の頭を揃える設定はWebデザインにおいて必須のテクニックです。
      </li>
    </ul>
  </div>

</div>
CSSコード表示
.li-indent-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.indent-checkbox {
  display: none;
}
.indent-toggle-btn {
  display: inline-block;
  background-color: #dc3545;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.indent-demo-area {
  background-color: #ffffff;
  padding: 20px;
  border: 2px dashed #adb5bd;
}
/* デフォルトのマーカー（・）は消しておく */
.indent-target {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* 各項目の基本スタイル（まだ揃っていない状態） */
.indent-item {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #333;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 10px;
  /* 変化をアニメーションでわかりやすくする */
  transition: all 0.4s ease; 
}
.indent-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
/* =========================================
  チェックが入ったらインデントを適用！
  ========================================= */
#li-indent-toggle:checked ~ .indent-demo-area .indent-target .indent-item {
  /* ① 文章全体を「1文字分（1em）」右へ押し込む */
  padding-left: 1em;
  /* ② 1行目の頭だけを「マイナス1文字分」左へ引っ張り戻す！ */
  text-indent: -1em;
  color: #198754;
}
/* ボタンの色とテキストの変更 */
#li-indent-toggle:checked ~ div .indent-toggle-btn {
  background-color: #198754;
}
#li-indent-toggle:checked ~ div .indent-toggle-btn::after {
  content: "（文字の頭がピシッと揃いました！）";
}

複数のul・olを入れ子にする

Webサイトのメニューバーや記事の目次など、親項目の中に子項目が含まれる階層構造を作りたい時は、リストを入れ子（ネスト）にします。

入れ子とは、「箱の中にさらに箱を入れる」ことを指します。

複数のul・olを入れ子にする
  • リストの中にリストを作る「入れ子」とは
  • 【重要】子リストは「liタグの内側」に入れる
  • ulとolを自由に組み合わせる

リストの中にリストを作る「入れ子」とは

<ul>や<ol>で作ったリストの中に、別の<ul>や<ol>を追加することで、階層化されたリストを作れます。

ブラウザは入れ子になっていることを検知し、子リスト全体を少し右にズラして（インデント）表示します。

また、<ul>の場合はマーカーの形が「黒丸（●）」から「白丸（○）」や「四角（■）」へ変化し、階層が深くなったことを分かりやすくします。

【重要】子リストは「liタグの内側」に入れる

新しく作った子リスト（<ul>）を親リストの<ul>と<li>の「間」に書いてしまうミスがよくあります。

HTMLのルールでは、「新しく作る子リストは、必ず親項目の『<li>〜</li> の内側』に書かなければならない」と決まっています。

  • 【親項目】飲み物
    • コーヒー
    • 紅茶
  • 【親項目】食べ物
    • オムライス
    • パスタ
HTMLコード表示
<div class="nest-demo-wrap">
  <input type="checkbox" id="nest-toggle" class="nest-checkbox">

  <div style="text-align:center; margin-bottom:20px;">
    <label for="nest-toggle" class="nest-toggle-btn">構造を色分けして見る</label>
  </div>

  <div class="nest-demo-area">
    <ul class="nest-parent-ul">
      
      <li class="nest-parent-li">
        【親項目】飲み物
        <ul class="nest-child-ul">
          <li class="nest-child-li">コーヒー</li>
          <li class="nest-child-li">紅茶</li>
        </ul>
      </li><li class="nest-parent-li">
        【親項目】食べ物
        <ul class="nest-child-ul">
          <li class="nest-child-li">オムライス</li>
          <li class="nest-child-li">パスタ</li>
        </ul>
      </li>

    </ul>
  </div>

</div>
CSSコード表示
.nest-demo-wrap {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.nest-checkbox {
  display: none;
}
.nest-toggle-btn {
  display: inline-block;
  background-color: #6c757d;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.nest-demo-area {
  background-color: #ffffff;
  padding: 20px;
  border: 1px dashed #adb5bd;
}
/* 共通のリストスタイル（初期状態） */
.nest-parent-ul,
.nest-child-ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  transition: all 0.4s ease;
}
.nest-child-ul {
  margin-top: 5px; /* 親の文字との間に少し余白を開ける */
  margin-bottom: 10px;
}
.nest-parent-li,
.nest-child-li {
  color: #333;
  font-weight: bold;
  border: 2px solid transparent; /* 初期は枠線を見えなくする */
  padding: 5px;
  transition: all 0.4s ease;
}
/* =========================================
  チェックが入ったら、HTMLの構造（箱）を色分けして表示
  ========================================= */
#nest-toggle:checked ~ .nest-demo-area .nest-parent-li {
  border: 2px dashed #dc3545; /* 親のli要素を赤い破線で囲う */
  background-color: #fff5f5;
}
#nest-toggle:checked ~ .nest-demo-area .nest-child-ul {
  border: 2px solid #0d6efd; /* 子のul要素を青い実線で囲う */
  background-color: #e3f2fd;
  padding: 10px 10px 10px 30px; /* 見やすく余白を広げる */
}
#nest-toggle:checked ~ .nest-demo-area .nest-child-li {
  border: 1px dotted #0d6efd; /* 子のli要素を青い点線で囲う */
  background-color: #ffffff;
}
/* ボタンの色変更 */
#nest-toggle:checked ~ div .nest-toggle-btn {
  background-color: #198754;
}
#nest-toggle:checked ~ div .nest-toggle-btn::after {
  content: "（子リストが、親liの中に入っているのが分かります）";
}

ulとolを自由に組み合わせる

入れ子にするリストは<ul>（順序なし）と<ol>（順序あり）を自由に組み合わせられます。

例えば、「料理のレシピ（手順）」を書く時、大枠の手順は<ol>で「1, 2, 3…」と順番を作り、特定のステップで必要な「材料」は<ul>で「・」として並べる、といった使い方ができます。

美味しいチャーハンの作り方

  1. 材料をみじん切りにする
    • 長ネギ：半分
    • 焼き豚：50g
  2. フライパンに油をひいて温める
  3. 具材とご飯を炒める
    • 卵を先に入れて半熟にする
    • ご飯は切るように炒める
  4. 塩こしょうで味を整えて完成！
HTMLコード表示
<div class="mix-demo-wrap">
  <p style="font-size:15px; font-weight:bold; margin-bottom:10px; color:#333;">美味しいチャーハンの作り方</p>
  
  <ol class="mix-parent-ol">
    
    <li>
      材料をみじん切りにする
      <ul class="mix-child-ul">
        <li>長ネギ：半分</li>
        <li>焼き豚：50g</li>
      </ul>
    </li>

    <li>フライパンに油をひいて温める</li>
    
    <li>
      具材とご飯を炒める
      <ul class="mix-child-ul">
        <li>卵を先に入れて半熟にする</li>
        <li>ご飯は切るように炒める</li>
      </ul>
    </li>
    
    <li>塩こしょうで味を整えて完成！</li>
  </ol>

</div>
CSSコード表示
.mix-demo-wrap {
  background-color: #fff9e6; /* 料理っぽい温かい背景色 */
  padding: 20px;
  border: 2px solid #ffc107;
  border-radius: 8px;
  font-family: sans-serif;
}
/* 外側のolのデザイン */
.mix-parent-ol {
  margin: 0;
  padding: 20px 20px 20px 40px;
  background-color: #ffffff;
  border-radius: 4px;
  color: #333;
  font-weight: bold;
  line-height: 1.6;
}
.mix-parent-ol > li {
  margin-bottom: 15px; /* 手順ごとの隙間を広げる */
  color: #d35400; /* 手順の文字はオレンジ系 */
}
.mix-parent-ol > li:last-child {
  margin-bottom: 0;
}
/* 内側のulのデザイン */
.mix-child-ul {
  margin-top: 8px; /* 手順の文字との隙間 */
  margin-bottom: 5px;
  padding-left: 25px; /* インデント */
  color: #555; /* 材料の文字は少し落ち着いた色に */
}
.mix-child-ul li {
  margin-bottom: 5px;
  font-weight: normal; /* 子リストは通常の太さに */
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 箇条書きは親タグ（ulかol）と子タグ（li）をセット（入れ子）で使う
  • 順序がないものはul、順序があるものはolを使い分ける
  • ulやol全体に枠線（border）や背景色（background-color）をつけてボックス化できる
  • list-style: none;とpadding: 0;のセットで初期マーカーと余白を完全にリセットできる
  • 擬似要素（::before）を使えば、チェックマークなどおしゃれマーカーが作れる
  • 枠線と文字の間には、必ず内側の余白（padding）でスペースを作る
  • 各項目（li）の間に下余白（margin-bottom）を空けると、情報が整理され読みやすくなる
  • 好きな位置で改行するには<br>タグを使う
  • 2行目以降の文字の頭を揃える「ぶら下がりインデント」は必須のテクニック
  • リストの中にリストを作る「入れ子」は、親の<li>タグの「内側」に子リストを入れる
HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次