サンプルコードを用いた解説：CSSでHTMLの順序付きリストにおける2行目以降のインデント維持

2024-05-09

CSS でHTMLの順序付きリストの2行目以降のインデントを維持する方法

問題

HTMLの順序付きリスト（ol要素）で、2行目以降の項目が1行目よりも大きくインデントされてしまうことがあります。これは、ブラウザのデフォルトのスタイルによるものです。

解決策

CSSを使用して、2行目以降の項目のインデントを維持することができます。以下の方法は、CSSのlist-style-typeプロパティとmargin-leftプロパティを使用します。

例

ol {
  list-style-type: none; /* リスト記号を非表示にする */
  padding: 0; /* リストの余白を0にする */
}

ol li {
  margin-left: 20px; /* 20pxのインデントを設定する */
}

ol li:first-child {
  margin-left: 0; /* 最初の項目のインデントを0にする */
}

このコードは、以下のようになります。

リスト記号を非表示にします。
リストの余白を0にします。
各項目に20pxのインデントを設定します。
最初の項目のインデントを0にします。

説明

list-style-type: none; は、リスト記号を非表示にします。
padding: 0; は、リストの余白を0にします。これにより、リスト項目が互いに密着して表示されます。
margin-left: 20px; は、各項目に20pxのインデントを設定します。
ol li:first-child { margin-left: 0; } は、最初の項目のインデントを0にします。これにより、最初の項目が他の項目よりも大きくインデントされるのを防ぎます。

補足

上記のコードはあくまで一例です。必要に応じて、インデントの量やその他のスタイルを変更することができます。
他の方法で2行目以降のインデントを維持することもできます。例えば、text-indentプロパティを使用したり、padding-leftプロパティとmargin-leftプロパティを組み合わせて使用したりすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでインデントを維持する順序付きリスト</title>
  <style>
    ol {
      list-style-type: none;
      padding: 0;
    }

    ol li {
      margin-left: 20px;
    }

    ol li:first-child {
      margin-left: 0;
    }
  </style>
</head>
<body>
  <h1>CSSでインデントを維持する順序付きリスト</h1>

  <ol>
    <li>項目1</li>
    <li>
      項目2
      <ul>
        <li>サブ項目2.1</li>
        <li>サブ項目2.2</li>
      </ul>
    </li>
    <li>項目3</li>
  </ol>
</body>
</html>

<!DOCTYPE html> は、HTML5ドキュメントであることを宣言します。
<html lang="ja"> は、HTMLドキュメントの言語が日本語であることを指定します。
<head> は、HTMLドキュメントのヘッダー部分です。
<meta charset="UTF-8"> は、HTMLドキュメントの文字エンコーディングがUTF-8であることを指定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> は、ビューポートの設定を指定します。これにより、デバイスの幅に合わせてページがスケーリングされます。
<title>CSSでインデントを維持する順序付きリスト</title> は、HTMLドキュメントのタイトルを指定します。
<style> は、CSSスタイルを記述する部分です。
ol { list-style-type: none; padding: 0; } は、順序付きリスト（ol要素）のスタイルを指定します。このスタイルは、リスト記号を非表示にし、リストの余白を0にします。
ol li { margin-left: 20px; } は、順序付きリスト内の各項目（li要素）のスタイルを指定します。このスタイルは、各項目に20pxのインデントを設定します。
<h1>CSSでインデントを維持する順序付きリスト</h1> は、レベル1の見出し（h1要素）です。
<ol> は、順序付きリスト（ol要素）です。
<li>項目1</li> は、順序付きリスト内の最初の項目（li要素）です。
<li> 項目2 <ul> <li>サブ項目2.1</li> <li>サブ項目2.2</li> </ul> </li> は、順序付きリスト内の2番目の項目（li要素）です。この項目には、ネストされた順序付きリスト（ul要素）が含まれています。

CSSでインデントを維持する順序付きリスト

1. 項目1
2. 項目2
    * サブ項目2.1
    * サブ項目2.2
3. 項目3

ご覧のように、2行目以降の項目は1行目よりも大きくインデントされずに表示されています。

このサンプルコードは、CSSでHTMLの順序付きリストの2行目以降のインデントを維持する方法を理解するのに役立つでしょう。必要に応じて

CSSでHTMLの順序付きリストの2行目以降のインデントを維持するその他の方法

text-indentプロパティを使用して、2行目以降のテキストのインデントを設定することができます。この方法は、margin-leftプロパティを使用する方法よりもシンプルですが、ネストされたリストの場合に問題が発生する可能性があります。

ol {
  list-style-type: none;
  padding: 0;
}

ol li {
  text-indent: 20px;
}

各項目の先頭20文字をインデントします。

padding-leftとmargin-leftを組み合わせて使用する

padding-leftプロパティとmargin-leftプロパティを組み合わせて使用することで、より柔軟なインデントを設定することができます。この方法は、ネストされたリストの場合にも問題なく動作します。

ol {
  list-style-type: none;
  padding: 0;
}

ol li {
  padding-left: 20px;
  margin-left: -20px;
}

ol li:first-child {
  margin-left: 0;
}

各項目の左側を20pxパディングします。
各項目の左側を20pxマージンします。これにより、パディングがコンテンツ領域からはみ出ないようにします。

疑似要素を使用して、2行目以降の項目のスタイルを個別に設定することができます。この方法は、より複雑ですが、よりきめ細かな制御が可能になります。

ol {
  list-style-type: none;
  padding: 0;
}

ol li {
  position: relative;
}

ol li::before {
  content: "";
  position: absolute;
  left: 20px;
  width: 0;
  height: 100%;
  background-color: #ccc;
}

ol li:first-child::before {
  display: none;
}