CSSで文字を字下げする方法（text-indent徹底解説）

By /

CSSで文字を字下げする方法：text-indent徹底解説（約5000語）

Webサイトやドキュメントにおいて、文章の段落を区切る際に、最初の行だけを少し右に寄せる「字下げ（インデント）」は、非常に一般的な表現手法です。これは、読者が新しい段落の始まりを素早く認識できるようにするためであり、文章全体の可読性を高める上で重要な役割を果たします。小説や論文、ブログ記事など、あらゆる種類のテキストコンテンツで目にすることができます。

紙媒体の印刷物では当たり前のように使われるこの字下げですが、Webの世界、特にCSSを使ってこれを実現するには、いくつかの方法があります。その中でも最も一般的で、かつ強力なプロパティが text-indent です。

この記事では、CSSの text-indent プロパティに焦点を当て、その基本的な使い方から、様々な値の指定方法、応用テクニック、他のプロパティとの組み合わせ、そして知っておくべき注意点やアクセシビリティへの配慮まで、徹底的に解説します。約5000語というボリュームで、このプロパティの全てを網羅し、あなたのWebデザインやコーディングに役立つ知識を提供することを目指します。

1. なぜ字下げ（インデント）が必要なのか？

デジタルドキュメントでは、段落の区切りを示すために、一般的に段落間に空白行を入れることが多いです。しかし、伝統的な組版や、より密度の高い情報を表示したい場合、あるいは特定のデザインスタイルを追求する場合など、段落間の空白行ではなく、最初の行の字下げによって段落の始まりを示す方が適切な場合があります。

字下げの利点は以下の通りです。

  • 可読性の向上: 読者が新しい段落の開始位置を視覚的に素早く捉えられます。
  • 文章構造の明確化: 段落間の関係（連続しているか、話題が変わったかなど）が分かりやすくなります。
  • デザイン性: 伝統的な組版スタイルを模倣したり、特定のデザインテーマに合わせたりできます。
  • スペースの節約: 段落間に空白行を入れるよりも垂直方向のスペースを節約できます（特に印刷用スタイルシートなどで有効）。

CSSを使ってこれらの利点を享受するために、text-indent プロパティが用意されています。

2. text-indentの基本

text-indent プロパティは、ブロックコンテナ要素内の最初の行にインデント（字下げ）を適用します。

構文:

css
text-indent: value;

value には、インデントの大きさを指定します。この値には様々な種類があり、それぞれが異なる挙動や特性を持ちます。

適用対象:

text-indent プロパティは、ブロックレベル要素（例: <p>, <h1>, <div>, <li>など）に適用されます。インライン要素（例: <span>, <a>, <strong>など）や、display プロパティが inline に設定されている要素には効果がありません。ただし、display: inline-block など、インラインレベルのブロックコンテナには効果があります。

また、::first-line 疑似要素に適用することも可能です。

基本的な使用例:

最も一般的な使い方は、段落要素（<p>）の最初の行を字下げすることです。

HTML:

“`html

これは最初の段落のテキストです。この段落は字下げされます。
字下げは、文章の可読性を高めるために使用される一般的な組版手法です。

これは字下げされない通常の段落です。

これは2番目の字下げされる段落です。
新しい段落の始まりが視覚的に明確になります。

“`

CSS:

css
.indented-paragraph {
text-indent: 2em; /* 最初の行を親要素のフォントサイズの2倍だけ字下げ */
line-height: 1.5; /* 行の高さを少し上げて読みやすく */
margin-bottom: 1em; /* 段落の下に少し余白を追加 */
}

この例では、.indented-paragraph クラスが適用された段落の最初の行が、親要素のフォントサイズの2倍（2em）だけ右に字下げされます。2行目以降のテキストは通常の配置になります。

3. text-indentの値の詳細

text-indent プロパティに指定できる値は多岐にわたります。それぞれの値について詳しく見ていきましょう。

3.1. 長さの値 (Length values)

特定の距離やサイズを指定する値です。様々な単位を使用できます。

  • px (ピクセル):

    • 特徴: スクリーンの物理的なピクセル数に基づいた固定値です。最も直感的で分かりやすい単位の一つです。
    • メリット: 指定した通りのサイズで常に表示されます。デザインの意図をピクセル単位で正確に表現したい場合に便利です。
    • デメリット: ユーザーがフォントサイズを変更したり、異なる解像度のデバイスで見たりした場合に、全体のレイアウトとのバランスが崩れる可能性があります。レスポンシブデザインには不向きな場合があります。
    • 使用例: text-indent: 20px;
    • 注意点: アクセシビリティの観点から、フォントサイズに依存しない固定値は避けるべきという意見もあります。特に小さな字下げでは、フォントサイズが変わると字下げ量が不十分に見えることがあります。

  • em (親要素のフォントサイズに基づく相対値):

    • 特徴: 親要素（またはその要素自体の font-size が明示的に設定されている場合）のフォントサイズを基準とした相対値です。1em は現在の要素の計算済みフォントサイズと同じです。
    • メリット: テキストサイズが大きくなったり小さくなったりしても、それに応じて字下げ量もスケーリングされます。これにより、テキストと字下げのバランスが保たれやすく、レスポンシブデザインやユーザーのフォントサイズ調整に対応しやすいです。
    • デメリット: 親要素のフォントサイズに依存するため、継承によっては意図しないサイズになる可能性があります（ただし、text-indentは自身のフォントサイズ計算に影響されます）。
    • 使用例: text-indent: 2em; （現在のフォントサイズの2倍）
    • 計算例: 要素の font-size が 16px なら、2em は 32px になります。要素の font-size が 20px なら、2em は 40px になります。

  • rem (ルート要素のフォントサイズに基づく相対値):

    • 特徴: ドキュメントのルート要素（通常は <html> 要素）のフォントサイズを基準とした相対値です。1rem はルート要素の計算済みフォントサイズと同じです。
    • メリット: em と同様にテキストサイズに応じてスケーリングされますが、親要素ではなくルート要素を基準とするため、計算が予測しやすく、カスケードの複雑さによる影響を受けにくいです。特に大規模なプロジェクトやデザインシステムにおいて、一貫した相対スケールを定義するのに役立ちます。レスポンシブデザインやアクセシビリティ対応に適しています。
    • デメリット: ルート要素のフォントサイズが意図せず変更されると、すべての rem 値に影響します。
    • 使用例: text-indent: 1.5rem; （ルート要素のフォントサイズの1.5倍）
    • 計算例: <html> 要素の font-size が 16px なら、1.5rem は 24px になります。要素自身のフォントサイズが何であっても変わりません。

  • % (包含ブロックの幅に対する相対値):

    • 特徴: text-indent におけるパーセント値は、要素の 包含ブロック（通常は親要素）の 幅 に対する相対値として解釈されます。
    • メリット: 要素の幅に応じて字下げ量が変化するため、可変幅レイアウトにおいて要素の幅いっぱいに広がった場合でも、常に一定の比率で字下げ量を保つことができます。
    • デメリット: 要素の幅が狭い場合、字下げ量も小さくなります。幅がゼロや非常に小さい場合は字下げがほとんど行われません。字下げ量がテキストの長さに対して適切かどうかが、包含ブロックの幅に依存して変動します。
    • 使用例: text-indent: 5%; （親要素の幅の5%だけ字下げ）
    • 計算例: 親要素の幅が 600px なら、5% は 30px になります。親要素の幅が 300px なら、5% は 15px になります。

  • vw (ビューポート幅に基づく相対値):

    • 特徴: ビューポート（ブラウザの表示領域）の 幅 の1%を基準とした相対値です。1vw はビューポート幅の1%です。
    • メリット: デバイスの画面幅に応じて字下げ量が直接スケーリングされます。レスポンシブデザインにおいて、ビューポートサイズ全体に連動した字下げ量を持たせたい場合に便利です。
    • デメリット: ビューポートの幅が極端に大きい/小さい場合に、字下げ量も極端になる可能性があります。テキストサイズとのバランスがビューポート幅に強く依存します。
    • 使用例: text-indent: 3vw; （ビューポート幅の3%だけ字下げ）
    • 計算例: ビューポート幅が 1200px なら、3vw は 36px になります。ビューポート幅が 600px なら、3vw は 18px になります。

  • vh (ビューポート高さに基づく相対値):

    • 特徴: ビューポートの 高さ の1%を基準とした相対値です。1vh はビューポート高さの1%です。
    • メリット/デメリット: 字下げ量にビューポートの高さを反映させるのは一般的ではありませんが、特定の実験的なレイアウトでは使用される可能性があります。しかし、テキストの水平方向のインデントに垂直方向の値を使うのは直感的ではなく、ほとんどのケースで避けるべきです。
    • 使用例: text-indent: 2vh; （ビューポート高さの2%だけ字下げ）

  • その他の単位 (pt, pc, cm, mm, in):

    • 特徴: これらは主に印刷スタイルシートなどで使用される絶対的な物理単位です。pt (ポイント, 1/72インチ), pc (パイカ, 12ポイント), cm (センチメートル), mm (ミリメートル), in (インチ) があります。
    • デメリット: スクリーン表示においては、デバイスのピクセル密度によって物理的なサイズが異なって見えるため、予測しにくい結果になる可能性があります。Webサイトのスクリーン表示には一般的に使用されません。
    • 使用例: text-indent: 12pt;

どの単位を選ぶべきか？

  • 一般的なWebサイトの段落字下げ: em または rem が最も推奨されます。テキストサイズと字下げ量のバランスが保たれやすく、レスポンシブデザインやアクセシビリティに対応しやすいからです。どちらを選ぶかは、プロジェクト全体の単位管理方針によります。rem は大規模なプロジェクトで基準を統一しやすい利点があります。
  • 特定の固定デザイン: px が使われることもありますが、柔軟性に欠けるため注意が必要です。
  • 可変幅要素内の字下げ: % が有効な場合がありますが、字下げ量が幅に依存しすぎる点に注意が必要です。
  • ビューポートに完全に連動させたい場合: vw が有効な場合があります。
  • 印刷用スタイルシート: pt, cm などの物理単位が適しています。

3.2. キーワード値

  • initial: プロパティの初期値に戻します。text-indent の初期値は 0 です。

    • 使用例: text-indent: initial;

  • inherit: 親要素の text-indent の計算済み値を継承します。

    • 使用例: text-indent: inherit;

  • unset: プロパティが要素に継承されている場合は inherit と同じ、そうでない場合は initial と同じ挙動になります。CSSのバージョンによって挙動が変わる可能性があるため、initial や inherit を明示的に使う方が意図が明確になることが多いです。

    • 使用例: text-indent: unset;

3.3. 新しいキーワード値 (CSS Level 3)

CSS Text Module Level 3で導入された新しいキーワード値です。これらは単独で使うのではなく、長さの値やパーセント値と組み合わせて使用することが多いです。

  • hanging:

    • 特徴: 通常の text-indent は最初の行 のみ を字下げしますが、hanging を指定すると、最初の行 以外 の全ての行が、指定された値だけインデント（ぶら下がるような配置）されます。
    • 挙動: text-indent: 2em hanging; のように、長さやパーセント値と組み合わせて指定します。これにより、最初の行はインデントされず（または他のスタイルによってインデントされたりされなかったり）、2行目以降が 2em だけインデントされます。負の値も指定可能で、その場合は2行目以降が左に飛び出します。
    • 用途: 箇条書きのテキスト部分をインデントさせたり、定義リストの説明部分をインデントさせたりする際に非常に便利です。
    • 使用例:
      css
      .hanging-indent {
      text-indent: 2em hanging; /* 2行目以降を2em字下げ */
      line-height: 1.5;
      }
      html
      <p class="hanging-indent">
      これはハンギングインデントの例です。最初の行は通常通り表示され、
      この2行目以降のテキストが右に指定された量だけインデントされます。
      箇条書きのテキスト部分などに応用できます。
      </p>
    • 注意点: 複数の値（長さ/パーセント + hanging）を指定する場合、値の順番は任意です (2em hanging でも hanging 2em でも同じ)。

  • each-line:

    • 特徴: 通常の text-indent は最初の行にのみ適用されますが、each-line を指定すると、要素内の 全ての行 に対して text-indent の値が適用されます。
    • 挙動: text-indent: 1em each-line; のように、長さやパーセント値と組み合わせて指定します。これにより、最初の行だけでなく、折り返して発生する全ての行の先頭が指定した量だけインデントされます。
    • 用途: 各行に一定のインデントを適用したい場合に考えられますが、テキストの折り返し位置によっては不自然になることがあります。単独で使われるよりは、次に説明する hanging との組み合わせでより複雑なレイアウトを実現する際に使われることが多いです。
    • 使用例:
      css
      .each-line-indent {
      text-indent: 1em each-line; /* 全ての行を1em字下げ */
      line-height: 1.5;
      }
      html
      <p class="each-line-indent">
      これは各行にインデントが適用される例です。
      文章が長くなり、複数行に折り返した場合、
      全ての行の先頭が同じ量だけインデントされます。
      </p>
    • 注意点: こちらも複数の値（長さ/パーセント + each-line）を指定する場合、値の順番は任意です。

  • hanging と each-line の組み合わせ:

    • これらのキーワードは両方同時に指定することも可能です (text-indent: 2em hanging each-line;)。
    • この組み合わせの挙動は少し複雑です。each-line が指定されているため、text-indent の値は各行に適用されます。しかし、同時に hanging も指定されているため、最初の行 以外 の全ての行がさらに hanging の効果を受けます。
    • 結果として、text-indent: value hanging each-line; は、
      • 最初の行には value だけが適用されます。
      • 2行目以降には value に加えて hanging の効果が適用されます。もし hanging が単なるキーワードとして指定されているだけ（値がない）なら、それは無視されます。もし hanging と一緒に長さ/パーセント値が指定されているなら、その値が2行目以降のインデント量になります。
    • しかし、CSS仕様によれば、hanging と each-line を同時に指定する場合、値の指定は1つだけです。例えば text-indent: 2em hanging each-line; のようになります。この場合、その単一の値（2em）が text-indent の値として使用され、hanging と each-line がその適用方法を変更する修飾子として機能します。
    • つまり、text-indent: value hanging each-line; と指定すると、
      • 最初の行は value だけインデントされます。
      • 2行目以降は、value に加えて hanging の効果でさらにインデントされます。
    • 具体的な例としては、箇条書きのマーカーとテキストの整列に使われることがあります。マーカーは要素の左端に配置し、テキストは最初の行だけマーカーの右側に、2行目以降は最初の行のテキスト開始位置に合わせてインデントする、といったレイアウトです。しかし、これは hanging 単独や ::marker 疑似要素、Flexboxなどの方が適していることが多いかもしれません。
    • hanging と each-line の組み合わせはブラウザによって解釈が異なる場合や、まだ広くサポートされていない場合があります。使用する際は互換性を確認することが重要です。

新しいキーワード値のブラウザサポート:

hanging と each-line は CSS Text Module Level 3 の機能であり、比較的モダンな機能です。主要なブラウザ（Chrome, Firefox, Safari, Edge）の最新バージョンではサポートされていますが、古いバージョンではサポートされていない可能性があります。特に each-line 単独や hanging each-line の組み合わせは、まだ広く普及しているとは言えません。実際のプロジェクトで使用する際は、対象ブラウザでのテストが必須です。

4. text-indentの使用例と具体的なコード

様々なシナリオでの text-indent の使用例を見ていきましょう。

4.1. 標準的な段落の字下げ

最も一般的なケースです。可読性を高めるために、すべての段落の最初の行を一定量インデントします。

CSS:

“`css
/ すべての段落の最初の行を1.5em字下げ /
p {
text-indent: 1.5em;
line-height: 1.6; / 行間を少し広くすると読みやすい /
margin-bottom: 1em; / 段落間に余白を追加 /
}

/ 特定のクラスを持つ段落のみ字下げしたい場合 /
.article-paragraph {
text-indent: 2em;
line-height: 1.7;
margin-bottom: 1.5em;
}
“`

HTML:

“`html

これは標準的な段落です。最初の行が字下げされます。

新しい段落が始まりました。この段落も最初の行が字下げされます。

これは特定のスタイルが適用された段落です。
より大きな字下げ量と行間が設定されています。

“`

4.2. リストアイテム（<li>）の字下げ

リストアイテムは通常、マーカー（点や数字）が表示され、その後にテキストが続きます。text-indent はリストアイテムの テキスト部分 の最初の行に適用されます。

CSS:

“`css
/ 通常のリスト（マーカー＋テキスト） /
ul li {
/ text-indentは通常不要。markerとテキストはデフォルトで整列される /
line-height: 1.5;
}

/ テキスト部分をさらに右にずらしたい場合（あまり一般的ではない） /
.indent-list li {
text-indent: 1em; / テキストの最初の行を1em字下げ /
line-height: 1.6;
}

/ マーカーを隠し、テキスト全体を字下げのように見せたい場合（後述の画像非表示テクニックに近い） /
.no-marker-indent-list li {
list-style: none; / マーカーを非表示 /
text-indent: 2em; / テキストの最初の行を2em字下げ /
/ もしテキストが複数行にわたる場合、2行目以降が左に飛び出してしまう可能性がある /
/ この場合はtext-indentではなくpaddingを使うべき /
}

/ マーカーの代わりにカスタム画像を表示し、テキストを適切に配置する場合 /
.custom-marker-list li {
list-style: none; / デフォルトのマーカーを非表示 /
padding-left: 2em; / 左に余白を作り、マーカー分のスペースを確保 /
position: relative; / 疑似要素の基準とする /
line-height: 1.6;
}

.custom-marker-list li::before {
content: “”; / 疑似要素を作成 /
display: inline-block; / サイズや位置を調整可能に /
width: 1em; / マーカー画像の幅 /
height: 1em; / マーカー画像の高さ /
background-image: url(‘path/to/your/marker.png’); / カスタムマーカー画像 /
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute; / リストアイテムに対して絶対配置 /
left: 0; / 左端に配置 /
top: 0.3em; / テキストと縦位置を調整 /
/ text-indent: -1em; / / 疑似要素にはtext-indentは効かない /
/ ただし、リストアイテム全体には効くので注意 /
}
“`

<li> に text-indent を適用すると、マーカーが表示された 後に続く テキストの最初の行が字下げされます。リストのレイアウト調整には、text-indent よりも padding-left や ::marker 疑似要素、あるいは Flexbox を使う方が柔軟で意図通りになりやすいことが多いです。

4.3. 見出し（<h1>–<h6>）への適用

見出しに text-indent を適用することも可能ですが、一般的ではありません。見出しは通常、短いテキストであり、字下げによって可読性が向上することは少ないためです。特定のデザイン要件がある場合にのみ検討するかもしれません。

CSS:

css
.indented-heading {
text-indent: 1.5em; /* 見出しの最初の行を1.5em字下げ */
margin-bottom: 0.5em;
}

HTML:

“`html

これは字下げされた見出しです

“`

4.4. hanging を使った字下げ

2行目以降をインデントさせたい場合に hanging キーワードが役立ちます。

CSS:

css
.hanging-indent-example {
text-indent: 3em hanging; /* 2行目以降を3em字下げ */
line-height: 1.6;
border: 1px solid #ccc; /* 範囲を示すためにボーダーを追加 */
padding: 1em;
}

HTML:

“`html

このテキストはハンギングインデントのデモンストレーションです。
最初の行は通常通り開始されますが、
それ以降の行は指定された量だけ右にインデント（ぶら下がったように表示）されます。
これは箇条書きのテキストや、特定の定義リストのスタイルに有効です。

“`

この例では、テキストがコンテナの右端で折り返すと、2行目以降が 3em だけ右にずれて表示されます。

4.5. each-line を使った字下げ

すべての行をインデントさせたい場合に each-line キーワードが使えます。

CSS:

css
.each-line-indent-example {
text-indent: 2em each-line; /* 全ての行を2em字下げ */
line-height: 1.6;
border: 1px solid #ccc;
padding: 1em;
}

HTML:

“`html

このテキストは各行インデントのデモンストレーションです。
最初の行はもちろんインデントされますが、
テキストが折り返して新しい行が生成されると、
その新しい行も同じ量だけインデントされます。
これはあまり一般的なレイアウトではありません。

“`

4.6. hanging と each-line の組み合わせ（注意が必要）

前述の通り、この組み合わせは仕様が複雑でブラウザサポートもまちまちです。あくまで例として示しますが、実運用では他の手法を検討することをお勧めします。

CSS:

css
.hanging-each-line-example {
text-indent: 3em hanging each-line; /* 最初の行は3em、2行目以降はさらにインデント */
line-height: 1.6;
border: 1px solid #ccc;
padding: 1em;
}

HTML:

“`html

これはhangingとeach-lineを組み合わせた例です（ただしブラウザサポートに注意）。
最初の行は指定された量だけインデントされます。
しかし、テキストが折り返して発生する
2行目以降は、さらに додатковий（追加の）インデントが適用される可能性があります。
実際の表示はブラウザによって異なる場合があります。

“`

この例で「さらにインデント」されるかどうかはブラウザの実装に依存します。単一の値（3em）を指定した場合、多くのブラウザでは「最初の行に3em、2行目以降にさらに追加のインデント」のような挙動にはならず、「最初の行に3em、2行目以降に0em（または負の値）」のようになるか、あるいは期待通りに動作しない可能性があります。この組み合わせでの特定のレイアウト実現には、後述するFlexboxなどの代替手段の方が確実です。

5. text-indentと他のCSSプロパティとの組み合わせ

text-indent は単独で使うだけでなく、他のCSSプロパティと組み合わせて使用することで、より洗練されたテキスト表現が可能です。

5.1. direction (ltr / rtl)

direction プロパティは、ブロックコンテナのテキスト方向を設定します（左から右 ltr または右から左 rtl）。text-indent はこのテキスト方向に従って動作します。

  • direction: ltr; (デフォルト): text-indent の値は、テキストの左端から右方向へのインデントになります。
  • direction: rtl;: text-indent の値は、テキストの右端から左方向へのインデントになります。

CSS:

css
.rtl-text {
direction: rtl; /* 右から左のテキスト方向 */
text-indent: 2em; /* 右端から左に2em字下げ */
line-height: 1.6;
border: 1px solid #ccc;
padding: 1em;
}

HTML:

“`html

זהו טקסט בכיוון ימין לשמאל. השורה הראשונה תזוז שמאלה מהקצה הימני.

“`

アラビア語やヘブライ語など、右から左に書かれる言語のコンテンツを扱う際に重要になります。

5.2. text-align

text-align プロパティは、ブロック要素内のテキストの水平方向の揃え方を指定します (left, right, center, justify など)。text-indent は、インデントが適用された後 のテキストの揃え方に影響を与えます。

  • text-align: left;: 最初の行は右に字下げされ、残りの行と字下げされた行内のテキストは左揃えになります。
  • text-align: right;: 最初の行は右に字下げされますが、行内のテキストは右揃えになります。これにより、字下げ量と右揃えの組み合わせによっては奇妙なレイアウトになることがあります。
  • text-align: center;: 最初の行は右に字下げされますが、行内のテキストは中央揃えになります。これもまた奇妙なレイアウトになることがあります。
  • text-align: justify;: 最初の行は右に字下げされ、それ以外の行は両端揃えになります。最初の行自体は通常、両端揃えになりません（一行しかない場合や、単語間に十分なスペースを挿入できない場合）。

CSS:

css
.indent-and-center {
text-indent: 3em;
text-align: center; /* 最初の行は3em字下げされつつ、行内のテキストは中央に */
border: 1px solid #ccc;
padding: 1em;
}

HTML:

“`html

この段落は最初の行が字下げされ、かつテキストが中央揃えになっています。
あまり一般的な組み合わせではありませんが、text-indentとtext-alignがどのように相互作用するかを示しています。
複数行にわたる場合、2行目以降は通常のテキスト揃えになります。

“`

通常、段落の字下げと組み合わせて使う text-align は left (またはデフォルト) か justify です。right や center と組み合わせると、最初の行のテキスト配置が不自然になることがあります。

5.3. padding と margin

padding や margin は、要素全体のインデントや余白を調整しますが、text-indent は最初の行 のみ に影響するという点で異なります。

  • padding-left: 要素の左側の内側余白を作成します。要素内の 全てのコンテンツ が右にずれます。
  • margin-left: 要素の左側の外側余白を作成します。要素 全体 が右に移動します。

これらのプロパティを text-indent と組み合わせて使うことで、より複雑なレイアウトが可能です。

例: 箇条書きでマーカーとテキストを整列させる（Flexboxを使わない方法）

これは、text-indent の負の値を使った少し古いテクニックです。

CSS:

“`css
.bullet-list {
list-style: disc; / デフォルトの黒丸 /
padding-left: 1.5em; / 左側にマーカー分の余白を作る /
}

.bullet-list li {
text-indent: -1.5em; / 最初の行（テキスト）を左に1.5em戻す /
/ 結果として、テキストの開始位置がpadding-leftと一致する /
margin-left: 1.5em; / マーカー分の左余白を追加 /
line-height: 1.6;
}
“`

HTML:

“`html

  • リストアイテム1つ目。これが最初の行になります。
  • リストアイテム2つ目。テキストが長くなると折り返します。
    折り返したテキストは、最初の行のテキスト開始位置の下に適切に整列されます。

“`

このテクニックでは、padding-left でリストアイテム全体を右にずらし、text-indent: 負の値; でテキスト部分を左にずらして、マーカーとテキストの開始位置を合わせます。ただし、モダンなCSSでは ::marker 疑似要素や Flexbox を使った方が、より直感的で柔軟なリストの整列が可能です。

5.4. display

前述の通り、text-indent はブロックコンテナにのみ適用されます。display プロパティが inline の要素には効果がありません。

  • display: block;
  • display: list-item;
  • display: inline-block;
  • display: flex; (flex container 自体ではなく、その中のテキストコンテンツに適用される場合)
  • display: grid; (grid container 自体ではなく、その中のテキストコンテンツに適用される場合)

これらの display 値を持つ要素内の最初の行に text-indent は適用されます。

5.5. white-space

white-space プロパティは、要素内の連続する空白や改行文字をブラウザがどのように処理するかを制御します。text-indent は、最初の行の開始位置に影響するため、white-space: pre; や white-space: pre-wrap; のように、改行が保持される設定の場合でも、最初の行の字下げは通常通り適用されます。ただし、white-space: nowrap; のように折り返しが無効になっている場合は、テキストが一行に収まるため、text-indent の効果が分かりにくい場合があります（ただし、適用自体はされます）。

6. text-indentの応用テクニック：画像の非表示

text-indent の最も一般的で有名な応用テクニックの一つに、「画像の非表示（Image Replacement）」があります。これは、テキストを背景画像で置き換えたいが、SEOやアクセシビリティのためにHTML構造上はテキストを残しておきたい、という場合に用いられる手法です。特に、ロゴなどのテキストを画像で表示する際に使われます。

テクニック:

  1. 要素のテキストコンテンツとして代替テキスト（例: サイト名やロゴの文字）を記述します。
  2. その要素に、表示したい画像（ロゴなど）を背景画像として設定します。
  3. テキストコンテンツを画面外に移動させるために、text-indent に非常に大きな負の値を指定します（例: -9999px, -1000em）。
  4. テキストが画面外に移動しても背景画像が見えるように、要素に適切な width と height を設定します。
  5. テキストが親要素からはみ出してスクロールバーが表示されないように、overflow: hidden; を追加します。

CSS:

css
.site-logo {
display: block; /* または inline-block */
width: 200px; /* ロゴ画像の幅 */
height: 50px; /* ロゴ画像の高さ */
background-image: url('path/to/your/logo.png'); /* ロゴ画像 */
background-size: contain; /* または cover, 100%など */
background-repeat: no-repeat;
background-position: center;
text-indent: -9999px; /* テキストを画面外に飛ばす */
overflow: hidden; /* 画面外に飛ばしたテキストでスクロールバーが出ないように */
}

HTML:

“`html

あなたのサイト名


“`

この手法のメリットは、視覚的には画像が表示されますが、HTMLにはテキストが残っているため、検索エンジンやスクリーンリーダーはテキストコンテンツを認識できる点です。

注意点:

  • text-indent の負の値が大きすぎると、一部の環境（特に古いブラウザや特定のスクリーンリーダー）で予期しない挙動を引き起こす可能性があります。
  • すべてのブラウザで確実に画面外に飛ばされるとは限りません。
  • CSSが無効な環境では、意図しない大きなインデントとして表示される可能性があります。

代替手法:

現代のWeb開発では、この text-indent を使った画像非表示テクニックよりも、より推奨される手法がいくつかあります。

  • overflow: hidden; と絶対配置: 要素内のテキストに position: absolute; left: -9999px; などと指定し、親要素に overflow: hidden; をかける方法。テキストは親要素の範囲外に配置され、隠されます。
  • clip / clip-path: 要素の一部だけを表示し、それ以外を切り捨てるプロパティ。特に clip-path は柔軟ですが、古い clip プロパティは限定的で非推奨です。
  • CSSによる不可視化クラス (sr-only, visually-hidden): 一般的にアクセシビリティガイドラインで推奨される、要素を画面外に移動させたりサイズをゼロにしたりして視覚的には隠すが、スクリーンリーダーからは読み取れるようにするCSSクラスを定義する方法です。BootstrapなどのCSSフレームワークにも含まれています。

css
/* 典型的な .sr-only (Screen Reader Only) クラスの例 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); /* 画面外にクリップ */
white-space: nowrap; /* テキストが折り返さないように */
border: 0;
}

この sr-only クラスを非表示にしたいテキスト（画像要素の代替テキストや、画像非表示テクニックで残すテキスト）に適用するのが、現在の主流で最も推奨される方法です。text-indent: -9999px; を単独で使うよりも、様々なデバイスや環境での挙動が予測しやすく、アクセシビリティへの配慮もより確実になります。

したがって、text-indent: -9999px; を使った画像非表示は古いテクニックとして理解しておき、新規開発では sr-only クラスのような代替手段を検討することを強くお勧めします。

7. text-indentのレスポンシブ対応

異なる画面サイズで字下げ量を調整することは、レスポンシブデザインにおいて重要です。モバイルデバイスでは画面が狭いため字下げ量を控えめにしたり、デスクトップではより大きくしたりといった調整が考えられます。

レスポンシブ対応には、主に以下の方法があります。

  1. 相対単位 (em, rem, %, vw) の活用: 前述の通り、これらの単位は親要素やビューポートサイズ、ルート要素のフォントサイズに基づいてスケーリングされるため、ある程度のレスポンシブ性（特にテキストサイズの変化に対する追従性）をデフォルトで備えています。
  2. メディアクエリ (@media) を使った値の切り替え: 特定の画面サイズ（ブレークポイント）に応じて text-indent の値を変更します。

例: メディアクエリで字下げ量を調整

CSS:

“`css
/ スマートフォン向けのデフォルトスタイル /
p {
text-indent: 1em; / 小さめの字下げ /
line-height: 1.6;
margin-bottom: 1em;
}

/ タブレット以上の画面サイズ /
@media (min-width: 768px) {
p {
text-indent: 2em; / 少し大きめの字下げ /
}
}

/ デスクトップ以上の画面サイズ /
@media (min-width: 1200px) {
p {
text-indent: 3rem; / さらに大きめの字下げ（remを使用） /
}
}
“`

このようにメディアクエリを使用することで、デバイスの画面サイズに応じて最適な字下げ量を柔軟に設定できます。相対単位とメディアクエリを組み合わせるのが、最も堅牢で柔軟なレスポンシブデザインのアプローチと言えるでしょう。

8. text-indentの注意点と落とし穴

text-indent は強力なプロパティですが、使用する上でいくつか注意すべき点や陥りやすい落とし穴があります。

  • インライン要素には効かない: 最も基本的な注意点です。<span> や <a> のようなインライン要素に text-indent を適用しても効果はありません。ブロックコンテナ（display: block;, list-item;, inline-block; など）にのみ適用されます。
  • 最初の行のみに適用される（基本）: hanging や each-line キーワードを指定しない限り、text-indent は要素内の 最初の行 にのみ適用されます。複数行にわたる段落の場合、2行目以降はインデントされません。これを誤解して、要素内のテキスト全体をインデントしたい場合は padding-left や margin-left を使うべきです。
  • 負の値の使用: 大きな負の値は、前述の画像非表示テクニックに使われますが、それ以外の目的でテキストコンテンツに負の text-indent を使うと、テキストがコンテナの左端から飛び出して見えなくなったり、スクロールバーが表示されたりする可能性があります。overflow: hidden; を組み合わせる場合でも、意図しない表示崩れを招くリスクがあります。
  • 空要素への適用: 空の要素に text-indent を設定しても、表示されるテキストがないため視覚的な効果はありません。ただし、スクリーンリーダーがテキストを読み上げる場合は、その前に字下げとして認識される可能性はあります（実装による）。
  • ブラウザ間の互換性: 特に hanging や each-line といった新しいキーワード値は、古いブラウザではサポートされていない場合があります。使用する際は caniuse.com などのサイトで互換性を確認し、必要に応じて代替手段やフォールバックを検討する必要があります。
  • アクセシビリティへの影響:
    • 画像非表示テクニック: 大きな負の text-indent を使った画像非表示は、一部のスクリーンリーダーや拡大ツールで問題を発生させる可能性があります（例: 拡大時に画面外のコンテンツに意図せずフォーカスが移動するなど）。より堅牢な sr-only クラスの使用が推奨されます。
    • 過剰な字下げ: 非常に大きな字下げは、特に画面幅が狭いモバイルデバイスで、テキストの有効な表示領域を狭めすぎて可読性を損なう可能性があります。また、字下げされた最初の行が短すぎる場合、ユーザーがその行のテキストを見落とす可能性も考えられます。
    • テキスト方向との関係: direction: rtl; のコンテンツに対して text-indent を使う場合、期待通りに右からの字下げになるかを確認することが重要です。
  • ユーザー設定との干渉: ユーザーがブラウザの最小フォントサイズを設定している場合や、スタイルシートを適用している場合に、指定した text-indent の値が意図通りに解釈されない可能性があります。相対単位 (em, rem) は、このようなユーザー設定に対して比較的頑丈ですが、絶対単位 (px) は影響を受けやすいです。

9. 他の字下げ方法との比較

CSSでテキストの配置を調整する方法は text-indent 以外にもいくつかありますが、それぞれ目的や適用範囲が異なります。

  • margin-left / padding-left:

    • 目的: 要素 全体 または要素内の 全てのコンテンツ の左側に余白や内側余白を作成すること。
    • 効果: 要素全体が右に移動したり、要素内のすべての行が右にずれたりします。最初の行だけを字下げする text-indent とは明確に異なります。
    • 使い分け: 要素全体のインデントや、箇条書きのテキストブロック全体をインデントしたい場合に使用します。段落の最初の行だけを字下げしたい場合は text-indent を使用します。
    • 例: p { padding-left: 2em; } とすると、段落全体が左から2em内側にインデントされます。

  • ::first-letter / ::first-line 疑似要素:

    • 目的: 要素の最初の文字 (::first-letter) や最初の行 (::first-line) のスタイルを変更すること。
    • 効果: 文字の色、フォントサイズ、太字などのスタイルを適用できます。::first-line に text-indent を適用することは可能であり、これは text-indent の基本的な挙動と同じです。しかし、字下げのためだけにこれらの疑似要素を使うことは通常ありません。
    • 使い分け: ドロップキャップ（最初の文字を大きくする）や、詩の最初の行を特殊なスタイルにするなど、特定のテキスト装飾に使います。段落の字下げには直接的ではありません。

  • インデント用の空白文字 (&nbsp; など):

    • 目的: HTMLエンティティとして非改行スペースを挿入することで、視覚的にインデントを作成すること。
    • 効果: スペースの数だけ視覚的にインデントされます。
    • 問題点:
      • セマンティクス違反: 文書の構造（HTML）と表現（CSS）を分離するというWeb標準の原則に反します。インデントは見た目の装飾であり、CSSで行うべきです。
      • メンテナンス性の低下: 字下げ量を変更する際に、全てのHTMLファイルを編集してスペースの数を変更する必要があります。
      • アクセシビリティ問題: スクリーンリーダーが連続するスペースを意図通りに解釈しない可能性や、コピー＆ペーストした際に余分なスペースが含まれる問題があります。
    • 結論: この方法は絶対に使用すべきではありません。字下げは必ずCSSで行ってください。

10. アクセシビリティとtext-indent

現代のWebサイト開発において、アクセシビリティ（あらゆるユーザーが情報にアクセスできること）は非常に重要です。text-indent を使用する際にも、アクセシビリティへの配慮が必要です。

  • 視覚障がいを持つユーザー（スクリーンリーダー使用者）:
    • スクリーンリーダーはHTMLの構造とテキストコンテンツを読み上げます。CSSによる視覚的なスタイル（text-indent による字下げなど）は、通常、読み上げ内容に直接的な影響を与えません。つまり、スクリーンリーダーは字下げされているかどうかにかかわらず、テキストを連続して読み上げます。
    • ただし、前述の大きな負の値を使った画像非表示テクニックは、一部の古いスクリーンリーダーやブラウザの組み合わせで問題を引き起こす可能性があります。要素が画面外に配置されているにも関わらず、スクリーンリーダーがその要素にフォーカスしてしまう、あるいは奇妙な読み上げ方をするなどの問題が報告されています。このため、視覚的に隠すための標準的なアクセシビリティ手法（sr-only クラス）を使うことが推奨されます。
  • ロービジョンを持つユーザー（拡大ツール使用者）:
    • 画面を拡大してWebサイトを利用するユーザーにとって、text-indent の値の単位が重要になります。px のような絶対単位で字下げ量を指定した場合、ユーザーがフォントサイズだけを大きくしても字下げ量は変わりません。結果として、テキストが大きくなりすぎると字下げ量が相対的に小さく見えたり、テキストが字下げ領域からはみ出したりする可能性があります。
    • em や rem のような相対単位で字下げ量を指定すると、ユーザーがフォントサイズを変更した際に、字下げ量もそれに応じてスケーリングされるため、テキストと字下げのバランスが保たれやすくなります。これは、ユーザーの拡大ツールやブラウザのフォントサイズ設定変更に対応する上で有利です。
  • 認知障がいを持つユーザー:
    • 適切に使用された字下げは、段落の区切りを視覚的に明確にするため、文章構造の理解を助け、可読性を向上させる可能性があります。
    • しかし、過剰な字下げや、hanging のような非標準的な字下げは、テキストの流れを混乱させ、かえって可読性を損なう可能性もあります。標準的な段落の字下げスタイル (text-indent に正の値を指定) を使用するのが最も安全です。

結論として、アクセシビリティの観点からは：

  1. 段落の字下げには、em または rem といった相対単位を使用することが推奨されます。
  2. 画像非表示などのためにテキストを視覚的に隠す場合は、text-indent: -9999px; よりも、標準的な sr-only クラス（position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); など）を使用することを強く推奨します。
  3. hanging や each-line といった新しい text-indent の値は、特定のデザイン目的以外では慎重に使用し、アクセシビリティテストを行うべきです。
  4. 過剰な字下げは避け、標準的なドキュメントの字下げ量を参考にすることが望ましいです。

11. まとめ

この記事では、CSSで文字を字下げするための主要なプロパティである text-indent について、その基本的な使い方から応用、注意点までを詳細に解説しました。

text-indent は、ブロックコンテナ要素の最初の行にインデントを適用するプロパティです。その値には、ピクセル (px)、em (em)、rem (rem)、パーセント (%)、ビューポート単位 (vw, vh) といった様々な長さの単位や、initial, inherit, unset といったキーワード値を指定できます。特に、em や rem は、テキストサイズやルート要素のフォントサイズに連動して字下げ量がスケーリングされるため、レスポンシブデザインやアクセシビリティに配慮したWebサイト構築において非常に有効です。

さらに、CSS Level 3で導入された新しいキーワード hanging と each-line を使うことで、最初の行以外をインデントさせたり、全ての行をインデントさせたりといった、より複雑な字下げ表現も理論上は可能になります。ただし、これらの新しい値については、ブラウザのサポート状況を確認し、慎重に使用する必要があります。

text-indent は、direction プロパティによって字下げの方向が左右反転したり、text-align プロパティによるテキストの揃え方に影響を受けたりします。また、padding や margin は要素全体のインデントに使われるのに対し、text-indent は最初の行のみという違いを理解しておくことが重要です。

応用テクニックとしては、大きな負の値を使った画像の非表示手法が有名ですが、アクセシビリティや互換性の観点から、現代では sr-only クラスのような代替手段が推奨されることも学びました。

レスポンシブデザインに対応するためには、相対単位の利用に加えて、メディアクエリを使ってブレークポイントごとに text-indent の値を調整することが効果的です。

最後に、text-indent を使用する上での注意点として、インライン要素には効果がないこと、基本的には最初の行のみに適用されること、負の値や新しいキーワード値の使用におけるリスク、そしてアクセシビリティへの潜在的な影響（特に画像非表示や過剰な字下げ）について解説しました。

text-indent は、適切に使用することで文章の可読性を高め、デザイン性を向上させることができる強力なツールです。様々な値や他のプロパティとの組み合わせを理解し、レスポンシブ対応やアクセシビリティに配慮しながら使用することで、より質の高いWebコンテンツを作成することが可能になります。

この記事が、あなたの text-indent プロパティに関する理解を深め、日々のコーディングに役立つことを願っています。字下げ一つにも多くの選択肢と考慮すべき点があることを知り、目的に応じて最適な方法を選んでください。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール