CSSで字下げ（インデント）する方法を簡単に解説

公開：2024年9月3日更新：2025年10月27日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

CSSのtext-indentプロパティで1行目を字下げする方法
em単位で指定する
px単位で指定する
%単位で指定する
CSSのpadding-leftとtext-indentで2行目以降を字下げする方法
text-indentにマイナス値を指定する
padding-leftで全体を右に寄せる
組み合わせて2行目以降を字下げする

CSSのtext-indentプロパティで1行目を字下げする方法

Webページの文章で段落の1行目を字下げしたい場合、CSSのtext-indentプロパティを使用することで実装できます。text-indentプロパティを簡単に説明すると、ブロック要素内のテキスト最初の行に字下げを設定するCSSプロパティです。

基本的な書き方は「text-indent: 値;」の形式で記述し、セレクタに対して適用します。値の指定方法として、以下の3つがあります。

em単位で指定する
px単位で指定する
%単位で指定する

それぞれの単位には特徴があり、フォントサイズに応じた柔軟な字下げや固定幅の字下げが実現できます。以下では各単位の指定方法について詳しく解説していきます。

em単位で指定する

em単位は、現在のフォントサイズを基準とした相対的な単位です。1emは文字サイズ1文字分に相当するため、フォントサイズが16pxの場合、1emは16pxとして計算されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-indent: 1em;
    }
  </style>
</head>
<body>
  <p>この段落の最初の行は1文字分字下げされます。フォントサイズが変わっても、常に1文字分の字下げが維持されます。</p>
</body>
</html>

上記のコードでは、pタグに対してtext-indent: 1em;を指定しています。この方法により、段落の最初の行が1文字分字下げされた状態で表示されます。em単位を使用することによって、ユーザーがブラウザの設定でフォントサイズを変更した場合でも、字下げの比率が自動的に調整されます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

px単位で指定する

px単位は、ピクセルという絶対的な単位で字下げの幅を指定します。フォントサイズに関係なく、常に固定の幅で字下げが適用されるため、デザインの精密なコントロールが必要な場合に適しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-indent: 20px;
    }
  </style>
</head>
<body>
  <p>この段落の最初の行は20ピクセル字下げされます。フォントサイズが変わっても字下げの幅は20pxのまま固定されます。</p>
</body>
</html>

上記のコードでは、pタグに対してtext-indent: 20px;を指定しています。この方法により、段落の最初の行が20ピクセル分字下げされます。px単位は絶対値での指定になるため、レスポンシブデザインでは画面サイズに応じた調整が必要になる場合があります。

%単位で指定する

%単位は、親要素の幅を基準とした相対的な単位で字下げの幅を指定します。親要素の幅が変わると字下げの幅も自動的に変わるため、レスポンシブデザインに対応しやすい特徴があります。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 500px;
    }
    p {
      text-indent: 5%;
    }
  </style>
</head>
<body>
  <div class="container">
    <p>この段落の最初の行は親要素の幅の5%分字下げされます。親要素の幅が500pxの場合、25pxの字下げになります。</p>
  </div>
</body>
</html>

上記のコードでは、pタグに対してtext-indent: 5%;を指定しています。この方法により、段落の最初の行が親要素の幅の5%分字下げされます。親要素の幅が500pxの場合、字下げの幅は25pxとして計算され、親要素の幅が変わると字下げの幅も比例して変化します。

CSSのpadding-leftとtext-indentで2行目以降を字下げする方法

箇条書きや注意書きなどで、1行目に記号を配置し、2行目以降の文字を揃えて表示したい場合があります。この場合、padding-leftプロパティとtext-indentプロパティのマイナス値を組み合わせることで実装できます。

実装する手順として、以下の3つがあります。

text-indentにマイナス値を指定する
padding-leftで全体を右に寄せる
組み合わせて2行目以降を字下げする

それぞれの手順には役割があり、text-indentで1行目を左に飛び出させ、padding-leftで全体の位置を調整します。以下では各手順について詳しく解説していきます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

text-indentにマイナス値を指定する

text-indentプロパティにマイナス値を指定すると、1行目の文字が左側に飛び出す形でインデントされます。通常のtext-indentは右方向に字下げを行いますが、マイナス値を指定することによって逆方向の効果が得られます。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-indent: -1em;
    }
  </style>
</head>
<body>
  <p>※この文章の1行目は左に1文字分飛び出します。</p>
</body>
</html>

上記のコードでは、pタグに対してtext-indent: -1em;を指定しています。この方法により、段落の1行目が左側に1文字分飛び出した状態で表示されます。この状態ではまだ見栄えが悪いため、次の手順でpadding-leftを組み合わせて調整します。

padding-leftで全体を右に寄せる

padding-leftプロパティは、要素の左側に余白を追加します。text-indentのマイナス値で左に飛び出した1行目を、padding-leftで全体を右に寄せることによって元の位置に戻す仕組みです。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      padding-left: 1em;
    }
  </style>
</head>
<body>
  <p>この文章全体が左側に1文字分の余白を持ちます。</p>
</body>
</html>

上記のコードでは、pタグに対してpadding-left: 1em;を指定しています。この方法により、段落全体が左側に1文字分の余白を持った状態で表示されます。この余白を使用して、text-indentで左に飛び出した1行目を元の位置に調整することができます。

組み合わせて2行目以降を字下げする

text-indentのマイナス値とpadding-leftを組み合わせることによって、1行目は元の位置に戻り、2行目以降が字下げされた状態を実現できます。この手法は、箇条書きリストや注意書きの整形によく使用されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    li {
      padding-left: 1em;
      text-indent: -1em;
      list-style: none;
    }
  </style>
</head>
<body>
  <ul>
    <li>※注意事項がここに表示されます。長い文章の場合、2行目以降が自動的に1文字分字下げされて表示されます。</li>
    <li>※注意事項がここに表示されます。brタグで改行しても同様に2行目以降が字下げされた状態で表示されます。</li>
  </ul>
</body>
</html>

上記のコードでは、liタグに対してtext-indent: -1em;とpadding-left: 1em;を同時に指定しています。この方法により、1行目の「※」記号は元の位置に表示され、2行目以降の文字が1文字分字下げされた状態で揃って表示されます。padding-leftの値は記号の幅に応じて調整が必要です。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。