はい、承知いたしました。CSSのtext-indentプロパティの使い方を初心者向けに、約5000語の詳細な解説記事として記述します。

---

CSSインデント（text-indent）の使い方を初心者向けに徹底解説

ウェブサイトの文章を読みやすく、美しく整形するために、CSSは様々なプロパティを提供しています。その中でも、段落の冒頭を少し内側に入れる、リスト項目のテキストを整列させるなど、テキストの見た目を調整するのに非常に役立つのがtext-indentプロパティです。

このプロパティは一見シンプルに見えますが、その挙動や指定できる値にはいくつかの重要なポイントがあります。特に初心者の方は、単位の選び方や、他のCSSプロパティとの組み合わせでどのように挙動が変わるのかなど、戸惑うこともあるかもしれません。

この記事では、CSSのtext-indentプロパティに焦点を当て、その基本的な使い方から、指定できる様々な値とその意味、具体的な使用例、さらには他のプロパティとの組み合わせやアクセシビリティに関する注意点まで、初心者の方でも理解できるように徹底的に解説します。

約5000語というボリュームで、text-indentに関するあらゆる側面を掘り下げていきますので、この記事を読み終える頃には、あなたはtext-indentを自信を持って使いこなせるようになっているはずです。

さあ、CSSのtext-indentの世界へ一緒に足を踏み入れましょう。

目次

1. text-indentとは何か？ なぜ使うのか？
   • 印刷物におけるインデントの役割
   • ウェブデザインにおけるtext-indentの重要性
2. text-indentの基本的な使い方と構文
   • セレクタとプロパティ、値
   • CSSのどこに書くか
3. text-indentに指定できる単位とその意味
   • 絶対単位（px, pt, cm, inなど）
   • 相対単位（em, rem, %, vw, vhなど）
   • それぞれの単位の選び方と使い分け
     • pxを使うべき場面、避けるべき場面
     • emとrem：テキストサイズの調整と親要素の影響
     • %：親要素の幅に対する比率
     • vw, vh：ビューポートに対する比率
4. 正の値と負の値：インデントの方向を操る
   • 正の値：テキストを内側へ移動
   • 負の値：テキストを外側へ移動
   • 負の値を使う際の注意点（テキストの非表示など）
5. text-indentの代表的な使用例
   • 一般的な段落のインデント
   • 見出しのインデント（あまり一般的ではないが、例として）
   • リストアイテムのテキストの整列
   • 「ぶら下げインデント」（二行目以降を字下げする）を実現する方法
     • text-indentとpadding-left（またはmargin-left）を組み合わせる方法
     • text-indent: hanging;の値を使う方法（ブラウザサポートに注意）
   • 画像置換テクニック（非推奨だが知っておくべき）
     • なぜ巨大な負の値を使うのか
     • アクセシビリティとSEOにおける問題点
     • 現代的な代替手法
6. 他のCSSプロパティとの関係性
   • displayプロパティとの関係（block, inline, inline-block, list-item）
   • directionプロパティ（LTR/RTL）との関係
   • white-spaceプロパティとの関係
   • ::first-line擬似要素との組み合わせ
7. text-indentの発展的な値：hangingとeach-line
   • text-indent: hanging;の詳細な解説
   • text-indent: each-line;の詳細な解説
   • これらの値のブラウザサポート状況
8. text-indentとアクセシビリティ
   • 適切なインデントサイズ
   • 単位の選択とユーザー設定への対応
   • テキスト非表示の問題
   • 読みやすさへの影響
9. ブラウザ互換性と確認方法
10. まとめとベストプラクティス
    • 重要なポイントの再確認
    • 推奨される使い方
    • さらなる学習のために

---

1. text-indentとは何か？ なぜ使うのか？

text-indentは、CSSのプロパティの一つで、ブロックレベル要素内の最初の行のテキストにインデント（字下げ）を適用するために使用されます。

印刷物におけるインデントの役割

書籍や雑誌、新聞などの印刷物では、段落の区切りを視覚的に明確にするために、新しい段落の冒頭にインデントを入れるのが一般的な慣習です。これにより、読者はどこで前の段落が終わり、新しい段落が始まるのかを一目で把握できます。インデントがないと、段落が連続しているように見えてしまい、読み進めるのが難しくなることがあります。

ウェブデザインにおけるtext-indentの重要性

ウェブページでも、長い文章や複数の段落を含むコンテンツを表示する場合、印刷物と同様にインデントは読みやすさの向上に貢献します。特に記事コンテンツやブログ投稿などで、段落の冒頭にインデントを適用することで、テキストのブロックが明確になり、読者の視線が自然と新しい段落の始まりに誘導されます。

ただし、ウェブ上では段落間に空き（margin-bottomなど）を入れることでも段落の区切りを示すことが多いため、text-indentの使用は必須ではありません。デザインのスタイルやコンテンツの種類に応じて、インデントを使用するかどうかを判断します。しかし、伝統的な文章表現においては、インデントは非常に効果的な表現手法の一つです。

text-indentを使うことで、以下のような効果が得られます。

• 可読性の向上: 段落の区切りを明確にし、文章の流れを掴みやすくします。
• 視覚的なリズム: テキストに適切な間隔が生まれ、単調さを避けることができます。
• 伝統的な表現: 印刷物のスタイルを踏襲し、堅実な印象を与えます。

例えば、以下のようなHTMLがあったとします。

“`html

これは最初の段落です。ウェブページでの長い文章では、段落分けが非常に重要になります。読者が内容を追いやすくするために、段落の区切りを明確にすることが推奨されます。

これは2番目の段落です。ここでは、最初の段落とは異なる内容が記述されていると想定してください。各段落は一つのまとまったアイデアや情報を提示することが一般的です。この段落も前の段落と同様に、ウェブ上でのテキスト表示における段落の役割について述べています。

これは3番目の段落です。このように段落を分けることで、情報の構造が明確になり、読者は情報を消化しやすくなります。適切な段落分けは、コンテンツの質を高める上で非常に重要な要素の一つです。

“`

このHTMLにtext-indentを適用しない場合、各段落は左端から開始されます。

css
/* text-indentなし */
p {
margin-bottom: 1em; /* 段落間に余白を入れるのは一般的 */
}

表示イメージ（概念図）:

“`
これは最初の段落です。ウェブページでの長い
文章では、段落分けが非常に重要になります。読
者が内容を追いやすくするために、段落の区切り
を明確にすることが推奨されます。

これは2番目の段落です。ここでは、最初の段落
とは異なる内容が記述されていると想定してくだ
さい。各段落は一つのまとまったアイデアや情報
を提示することが一般的です。この段落も前の段
落と同様に、ウェブ上でのテキスト表示における
段落の役割について述べています。

これは3番落です。このように段落を分けること
で、情報の構造が明確になり、読者は情報を消化
しやすくなります。適切な段落分けは、コンテン
ツの質を高める上で非常に重要な要素の一つです。
“`

これにtext-indentを適用してみましょう。

css
p {
text-indent: 2em; /* 最初の行を2文字分字下げ */
margin-bottom: 1em;
}

表示イメージ（概念図）:

“`
これは最初の段落です。ウェブページでの長い
文章では、段落分けが非常に重要になります。読
者が内容を追いやすくするために、段落の区切り
を明確にすることが推奨されます。

これは2番目の段落です。ここでは、最初の段落

とは異なる内容が記述されていると想定してくだ
さい。各段落は一つのまとまったアイデアや情報
を提示することが一般的です。この段落も前の段
落と同様に、ウェブ上でのテキスト表示における
段落の役割について述べています。

これは3番落です。このように段落を分けること

で、情報の構造が明確になり、読者は情報を消化
しやすくなります。適切な段落分けは、コンテン
ツの質を高める上で非常に重要な要素の一つです。
“`

ご覧のように、最初の行だけが内側に移動し、段落の開始位置が明確になります。このように、text-indentはテキストのレイアウトを調整し、コンテンツの可読性を高めるために使用されるプロパティです。

2. text-indentの基本的な使い方と構文

text-indentプロパティは、CSSの他のプロパティと同様に、セレクタを使ってHTML要素を指定し、波括弧 {} の中にプロパティ名と値をコロン : で区切って記述します。

基本的な構文は以下の通りです。

css
セレクタ {
text-indent: 値;
}

• セレクタ: スタイルを適用したいHTML要素を指定します。例えば、pはすべての段落要素、.article-body pはクラスがarticle-bodyの要素内のすべての段落要素などを指します。
• text-indent: プロパティ名です。
• 値: 最初の行をどれだけインデントするかを指定します。この値には、様々な単位やキーワードを指定できます。

例：すべての段落の最初の行を1文字分インデントする

css
p {
text-indent: 1em;
}

例：特定のクラスを持つ要素内の段落のみを20ピクセルインデントする

“`html

“`

css
.article-content p {
text-indent: 20px;
}

このCSSは、クラスがarticle-contentであるdiv要素の中にある<p>要素にのみインデントを適用します。sidebarクラスのdiv内の<p>要素には適用されません。

CSSのどこに書くか

text-indentを含むCSSの記述場所は、他のCSSと同じです。

1. style要素内: HTMLファイルの<head>セクション内に<style>タグを置き、その中にCSSを記述します。
   html
<!DOCTYPE html>
<html>
<head>
<title>Text-indent Example</title>
<style>
p {
text-indent: 1.5em;
}
</style>
</head>
<body>
<p>この段落はインデントされます。</p>
<p>この段落もインデントされます。</p>
</body>
</html>
2. 外部スタイルシート: 独立した.cssファイルを作成し、HTMLファイルから<link>タグで読み込みます。これが最も一般的で推奨される方法です。
   html
<!DOCTYPE html>
<html>
<head>
<title>Text-indent Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>この段落はインデントされます。</p>
<p>この段落もインデントされます。</p>
</body>
</html>
   (styles.cssファイル)
   css
p {
text-indent: 1.5em;
}
3. style属性: 要素の開始タグ内に直接style属性として記述します。特定の要素にだけ一時的にスタイルを適用したい場合などに使われますが、保守性が低くなるため多用は推奨されません。
   html
<p style="text-indent: 3em;">この段落だけ個別にインデントされます。</p>

初心者の方は、まずは外部スタイルシートを使用する方法に慣れることをお勧めします。これにより、HTMLとCSSの役割が明確に分離され、コードの管理がしやすくなります。

3. text-indentに指定できる単位とその意味

text-indentの値としては、長さを示す単位（lengths）またはパーセンテージ（percentage）を指定できます。また、後述するキーワード値（hanging, each-line）やグローバルキーワード（initial, inherit, unset）も指定可能ですが、ここでは長さとパーセンテージに焦点を当てて解説します。

長さの単位には、絶対単位と相対単位があります。text-indentにおいては、これらの単位の特性を理解することが非常に重要です。

絶対単位（px, pt, cm, inなど）

絶対単位は、その名の通り物理的な長さに基づいた単位です。画面の解像度やユーザーのズーム設定に関わらず、常に同じ絶対的なサイズを保とうとします。ウェブデザインでよく使われる絶対単位はpx（ピクセル）です。

• px (pixels): デバイスのピクセルに基づいた単位です。10pxは常に10ピクセルとして表示されます。
  css
p {
text-indent: 20px; /* 20ピクセル分インデント */
}
pxは直感的で分かりやすい単位ですが、ユーザーがブラウザのフォントサイズ設定を変更したり、画面をズームしたりしても、text-indentの値は固定されたままになります。これは、テキストサイズが大きくなった場合に、インデントの幅が相対的に狭く見えてしまうという問題を引き起こす可能性があります。例えば、フォントサイズが16pxでインデントが20pxなら適切に見えても、フォントサイズが32pxに拡大されたときにインデントが20pxのままだと、字下げがあまり目立たなくなってしまいます。

• pt (points): 印刷物でよく使われる単位（1インチの72分の1）。

• cm (centimeters), mm (millimeters), in (inches): 物理的な長さ。画面上ではpxに変換されて表示されます。
  これらの単位は、主に印刷用のスタイルシートなどで使用されることが多く、一般的なスクリーン表示用のウェブサイトではpxを使用するのが主流です。

pxを使うべき場面、避けるべき場面:

• 使うべき場面: 要素間の厳密なピクセル単位の配置が必要な場合（ただし、text-indentで使うことは稀）。アイコンのサイズなど、テキストサイズとは関連しない固定サイズにしたい場合。
• 避けるべき場面: テキストサイズや画面サイズに応じてスケーリングさせたい場合。ユーザーのアクセシビリティ設定（フォントサイズ変更）に対応したい場合。text-indentのようにテキストフローに関連するプロパティには、通常、相対単位がより適しています。

相対単位（em, rem, %, vw, vhなど）

相対単位は、基準となる別の値（親要素のフォントサイズ、ルート要素のフォントサイズ、ビューポートのサイズなど）に対する相対的なサイズを指定します。これらの単位を使うと、レスポンシブデザインやアクセシビリティに対応しやすくなります。

• em (relative to the parent element’s font-size): em単位は、そのスタイルが適用される要素自身のフォントサイズに対する相対的な値です。
  “`css
  p {
  font-size: 16px;
  text-indent: 2em; / 要素自身のフォントサイズ(16px)の2倍 = 32px /
  }

  / 入れ子になった要素の場合 /
  div {
  font-size: 20px;
  }
  div p { / このp要素はdivの子要素 /
  font-size: 1.2em; / 親(div)のフォントサイズ(20px)の1.2倍 = 24px /
  text-indent: 2em; / 要素自身のフォントサイズ(24px)の2倍 = 48px /
  }
  ``emは、要素が入れ子になっている場合に親要素のフォントサイズの影響を受けるため、計算が複雑になることがあります。上記の例のように、div pのフォントサイズは親のdivのfont-sizeに基づいて計算され、さらにそのp要素のtext-indentは**自身の**計算されたfont-sizeに基づいて計算されます。この「 compounding effect（複利効果）」がem`の扱いの難しさです。

• rem (relative to the root element’s font-size): rem単位は、HTML文書のルート要素（通常は<html>要素）のフォントサイズに対する相対的な値です。
  “`css
  / ルート要素のフォントサイズを設定 (通常はブラウザデフォルトの16px) /
  html {
  font-size: 16px;
  }

  p {
  font-size: 1.1rem; / ルートのフォントサイズ(16px)の1.1倍 = 17.6px /
  text-indent: 2rem; / ルートのフォントサイズ(16px)の2倍 = 32px /
  }

  / 入れ子になった要素の場合 /
  div {
  font-size: 20px; / このdivのフォントサイズは20px /
  }
  div p {
  font-size: 1.2em; / 親(div)のフォントサイズ(20px)の1.2倍 = 24px /
  text-indent: 2rem; / ルートのフォントサイズ(16px)の2倍 = 32px /
  }
  ``remは常にルート要素のフォントサイズを基準とするため、入れ子の深さに関わらず計算が一定で分かりやすいという利点があります。ユーザーがブラウザのフォントサイズ設定を変更した場合、ルート要素のフォントサイズもそれに伴って変化するため、rem`で指定されたインデントの幅も適切にスケーリングされます。これはアクセシビリティの観点から非常に重要です。

  emとremの使い分け:
  * em: コンポーネント内で要素のサイズをそのコンポーネント自身のフォントサイズに連動させたい場合に便利です。例えば、ボタン内のパディングやアイコンサイズなど。
  * rem: ページ全体のフォントサイズ設定に連動させたい場合に最も適しています。特にfont-size, margin, padding, line-height, そしてtext-indentのようなテキストフローに関連するプロパティにはremを使用することが推奨されます。

• % (percentage): パーセンテージ値は、そのスタイルが適用される要素のContaining Block（包含ブロック）の幅に対する相対的な値です。Containing Blockとは、要素のサイズや位置を計算するための基準となる親要素のことです。
  “`css
  .container {
  width: 500px;
  }
  .container p {
  text-indent: 5%; / 親要素（.container）の幅(500px)の5% = 25px /
  }

  / コンテナの幅が変わると… /
  @media (max-width: 600px) {
  .container {
  width: 300px;
  }
  / .container p の text-indent は 300px の 5% = 15px になる /
  }
  ``%は要素の幅に依存してインデント幅が決まるため、レスポンシブデザインにおいては、親要素の幅に合わせてインデント幅も自動的に調整されるという利点があります。しかし、テキストの文字サイズではなく幅に依存するため、文字数ベースのインデント（例: 2文字分字下げ）を実現したい場合にはemやrem`の方が直感的です。

• vw (viewport width), vh (viewport height): vwはビューポート（ブラウザの表示領域）の幅の1%に対する相対値、vhはビューポートの高さの1%に対する相対値です。
  css
p {
text-indent: 3vw; /* ビューポート幅の3%分インデント */
}
  これらの単位もレスポンシブデザインに有用ですが、text-indentに使用することはあまり一般的ではありません。ビューポートサイズによってインデント幅が大きく変わりすぎて、テキストサイズとのバランスが崩れる可能性があるためです。しかし、特定のデザイン要件がある場合には選択肢の一つとなります。

それぞれの単位の選び方と使い分け

• 可読性とアクセシビリティを重視する場合: remが最も推奨されます。ユーザーがフォントサイズを拡大・縮小しても、インデント幅がテキストサイズに連動して適切に調整されるため、読みやすさを損ないにくいです。emも同様の目的で使用できますが、入れ子の深さに注意が必要です。
• コンテナの幅に合わせて調整したい場合: %が適しています。親要素の幅が可変である場合に、インデント幅もそれに追従させたい場合に有効です。
• 厳密なピクセル指定が必要な場合: pxを使用します。ただし、前述の通りアクセシビリティやレスポンシブデザインの観点からは、テキスト関連のプロパティでの使用は慎重に検討すべきです。

結論として、多くのシナリオでtext-indentにはremまたはem（特にrem）を使用するのが良いプラクティスとされています。これにより、インデントの幅がテキストのサイズに比例して変化し、様々なデバイスやユーザー設定においても一貫した可読性を保つことができます。

4. 正の値と負の値：インデントの方向を操る

text-indentの値には、正の数だけでなく負の数も指定できます。これにより、最初の行を左（LTRの場合）に突き出すような効果を得ることができます。

テキストの方向がLTR（Left-to-Right、左から右）であると仮定して説明します。（日本語や英語の多くはLTRです。RTLについては後述します。）

正の値：テキストを内側へ移動

正の値を指定した場合、最初の行は通常表示される開始位置（左端）から指定した値だけ右方向（内側）に移動します。これが一般的な「字下げ」の効果です。

css
p {
text-indent: 2em; /* 最初の行を右に2em移動 */
}

負の値：テキストを外側へ移動

負の値を指定した場合、最初の行は通常表示される開始位置（左端）から指定した値だけ左方向（外側）に移動します。

css
p {
text-indent: -20px; /* 最初の行を左に20px移動 */
}

この負の値によるインデントは、単体で使用すると最初の行が親要素の左端からはみ出して表示される可能性があります。通常、このはみ出した部分は要素のボーダーやパディングの外側に出てしまうため、見えなくなります。

負の値を使う際の注意点（テキストの非表示など）:

非常に大きな負の値を指定した場合、最初の行全体が画面の左端や親要素の左端の遥か外側に移動し、事実上見えなくなります。例えば、text-indent: -9999px; のような指定です。

css
.hidden-text {
text-indent: -9999px; /* 最初の行を画面外に移動させて非表示にする */
overflow: hidden; /* はみ出した内容を非表示にする設定と組み合わせる */
}

このようなテクニックは、かつては画面上に表示したくないがHTML構造上必要なテキスト（例: ロゴ画像に対するサイト名の<h1>タグテキスト）を隠すためによく用いられました。これは「画像置換（Image Replacement）」と呼ばれる手法の一つです。

しかし、この手法にはいくつかの問題があります。

• アクセシビリティ: スクリーンリーダーによっては、この非表示にされたテキストを読み上げてしまうことがあります。ユーザーにとっては意味のない情報を聞かされることになり、混乱を招く可能性があります。
• SEO: 過去には、検索エンジンがこの方法で隠されたキーワードを不正な手法と見なすリスクがありました（現在は検索エンジンの進化によりそのリスクは低いですが、絶対とは言えません）。
• 保守性: なぜテキストを隠しているのか、後からコードを見た人が理解しにくい場合があります。

現代のウェブ開発では、テキストを視覚的に非表示にするためには、よりアクセシビリティに配慮した他の手法（例えば、CSSでposition: absolute; left: -9999px;とoverflow: hidden;を組み合わせたvisually-hiddenクラスや、aria-label属性の使用など）が推奨されます。特に画像に代替テキストを提供する場合は、<img>タグのalt属性を使用するのが最もシンプルで標準的な方法です。

したがって、text-indentに負の値を使用する場合は、非常に大きな値にしてテキストを完全に非表示にするのではなく、後述する「ぶら下げインデント」のような、視覚的なデザイン効果のために小さな負の値を使用するケースが主となります。

5. text-indentの代表的な使用例

ここでは、text-indentが実際にどのように使われるか、いくつかの具体的なシナリオを見ていきましょう。

一般的な段落のインデント

最も一般的で基本的な使い方です。小説や記事など、連続する段落を持つ文章で、各段落の始まりを明確にするために使用します。

“`html

物語の始まり

遠い昔、小さな村がありました。その村には、美しい森が広がっており、人々は森の恵みを受けながら平和に暮らしていました。

ある日、森の奥深くから奇妙な音が聞こえてきました。それは今まで誰も聞いたことのない、不気味な響きでした。村人たちは不安を感じましたが、誰も森の奥へ行く勇気はありませんでした。

そんな中、若い狩人のエリックが立ち上がりました。「この音の原因を探らなければ、村に平和は戻らない」と彼は言いました。そして、エリックは一人、森の奥へと足を踏み入れたのです。

“`

css
.story {
text-indent: 2em; /* 段落の最初の行を2文字分インデント */
margin-bottom: 1em; /* 段落間に余白を入れる（任意）*/
}

このコードにより、各段落の最初の行が2文字分内側に字下げされ、伝統的な文章スタイルになります。2emという値は、フォントサイズの2倍、つまりアルファベットの「M」2つ分の幅に相当すると考えられ、文字数ベースのインデントとしてよく使用されます。

見出しのインデント（あまり一般的ではないが、例として）

通常、見出し（<h1>～<h6>）は左端に揃えられることがほとんどですが、デザインによっては最初の行をインデントしたい場合もあるかもしれません。text-indentはブロックレベル要素であれば適用できるため、見出しにも使用可能です。

“`html

インデントされた見出しの例

“`

css
h2 {
text-indent: 1.5em;
border-bottom: 1px solid #ccc;
padding-bottom: 0.5em;
}

これは一般的なデザインではありませんが、プロパティがどのように機能するかを示す例として有効です。

リストアイテムのテキストの整列

箇条書きリスト（<ul>や<ol>)の各項目(<li>)は、通常、行頭の記号や番号の後にテキストが続きます。デフォルトでは、テキストは次の行から記号/番号の下に揃うようになっています（list-style-position: outside;の場合）。しかし、テキスト全体をさらに右にずらしたい場合などにtext-indentが役立つことがあります。ただし、リストのインデントはpadding-leftやmargin-leftでコンテナごと調整することが一般的です。text-indentを<li>に直接適用すると、最初の行だけがさらにずれることになります。

一方で、リスト記号（::marker）を非表示にして、独自のインデントと記号をCSSで表現する場合などにtext-indentが活用されることがあります。

例：リスト記号を非表示にし、text-indentとpadding-leftで整列させる

“`html

• これはリストアイテムです。非常に長いテキストの場合、二行目以降の開始位置が重要になります。
• 別のリストアイテムです。

“`

“`css
ul {
list-style: none; / デフォルトのリスト記号を非表示 /
padding-left: 0; / ulの左パディングをリセット（ブラウザによってはデフォルトでパディングがあるため）/
}

li {
/ 先頭に「・」のようなものを表示させたい場合 /
/ 例: ::before 擬似要素を使う /
position: relative; / ::before の基準とする /
padding-left: 1.5em; / テキスト全体を右にずらす /
text-indent: -1.5em; / 最初の行を左にずらす /
margin-bottom: 0.5em;
}

li::before {
content: “・”; / 記号 /
position: absolute;
left: 0; / liのpadding-left分、左に配置される /
top: 0;
font-weight: bold;
}
“`

この例では、<li>要素全体にpadding-leftで余白を作り、そこに::beforeで記号を配置しています。そして、text-indent: -1.5em; で最初の行だけを左に（padding-leftの幅だけ）戻すことで、リスト記号のすぐ右からテキストが始まり、二行目以降はpadding-leftで設定した位置から開始される「ぶら下げインデント」のような効果を実現しています。

「ぶら下げインデント」（二行目以降を字下げする）を実現する方法

「ぶら下げインデント」（Hanging Indent または Outdent）とは、最初の行は左端から始まり、二行目以降のすべての行が指定した分だけ内側に字下げされる形式です。参考文献リストや用語集などで使われることがあります。

CSSでこれを実現する方法はいくつかありますが、最も一般的でブラウザ互換性が高いのは、text-indentとpadding-leftまたはmargin-leftを組み合わせる方法です。

方法1: text-indentとpadding-leftを組み合わせる

この方法は、要素全体にpadding-leftで余白を作り、そこにテキストを流し込みます。そして、text-indentに負の値を指定して、最初の行だけをその余白分だけ左に戻す、という仕組みです。

“`html

“`

css
.hanging-indent p {
padding-left: 3em; /* 全体の左側に3文字分の余白を作る */
text-indent: -3em; /* 最初の行を左に3文字分戻す */
margin-bottom: 0.5em;
}

このコードでは、<p>要素全体が左に3emのパディングを持ちます。テキストはまずこのパディングの右側から開始されます。しかし、text-indent: -3em;によって最初の行だけが左に3em移動し、結果的にパディングの開始位置（元の左端）から表示されます。二行目以降の行はtext-indentの影響を受けないため、padding-leftで設定された位置（元の左端から3em内側）から表示されます。

text-indentの負の値とpadding-leftの値は、通常同じ大きさにします。これにより、最初の行の開始位置と、二行目以降の開始位置の差が意図した通りになります。

方法2: text-indent: hanging; を使用する（ブラウザサポートに注意）

CSS Text Module Level 3 仕様では、text-indentプロパティに hanging というキーワード値を指定することで、ぶら下げインデントを直接表現できるようになりました。

css
/* 仕様上の hanging 値 */
.hanging-indent-spec p {
text-indent: 3em hanging; /* 最初の行以外のすべての行を3emインデント */
/* あるいは、単位を先に書いても良い */
/* text-indent: hanging 3em; */
margin-bottom: 0.5em;
}

この指定は、「最初の行はインデントせず、それ以降の行を3emインデントする」という意味になります。しかし、2023年現在、このhangingキーワードのブラウザサポートはまだ完全ではありません（特にFirefoxではサポートされていません）。

そのため、現時点では「方法1: text-indentとpadding-leftを組み合わせる方法」が、クロスブラウザ対応を考慮した場合のぶら下げインデントのより信頼できる実現方法となります。

画像置換テクニック（非推奨だが知っておくべき）

前述の「負の値を使う際の注意点」でも触れましたが、text-indent: -9999px;のような非常に大きな負の値は、テキストを画面外に移動させて視覚的に非表示にするために使われることがあります。

css
.logo {
background-image: url('logo.png'); /* 背景画像としてロゴを表示 */
width: 150px; /* ロゴ画像のサイズ */
height: 50px;
text-indent: -9999px; /* 中のテキストを画面外に移動 */
overflow: hidden; /* はみ出した部分を隠す */
display: block; /* ブロック要素にしないとwidth/heightが効かない場合がある */
}

HTML側では通常、以下のように記述します。

“`html

サイト名

“`

これにより、<h1>タグの中にある「サイト名」というテキストは、text-indentによって画面外に追いやられ見えなくなります。代わりに、background-imageで指定されたロゴ画像が表示されます。<h1>タグを使用することで、この部分がサイトのタイトルであることを検索エンジンやスクリーンリーダーに伝えることができます（ただし、スクリーンリーダーが隠されたテキストを読み上げる問題は残ります）。

なぜこの方法が使われたのか？

• SEO: 以前は、サイトの最も重要なキーワード（サイト名など）を<h1>タグに入れることがSEOに有利とされていました。デザイン上ロゴ画像を表示したいが、テキストもセマンティックにマークアップしたい、という場合にこの手法が取られました。
• フォント: ロゴを画像にすることで、特定のフォントに依存しないデザインを実現できます。

なぜ非推奨なのか？

• アクセシビリティ: スクリーンリーダーによっては隠されたテキストを読み上げたり、ユーザーがスタイルシートを無効にした場合に意味不明な巨大なテキストが表示されたりする問題があります。
• メンテナンス性: コードが直感的ではありません。「なぜこのテキストはこんなに大きな負のインデントを持っているんだ？」と疑問に思う可能性があります。
• 現代的な代替手段の存在:
  • <img>タグとalt属性: ロゴを<img>タグで表示し、alt属性にサイト名を記述するのが最も標準的でアクセシビリティに配慮した方法です。
    html
<h1><a href="/"><img src="logo.png" alt="サイト名"></a></h1>
  • CSSでテキストを隠すための別のクラス: よりセマンティックにテキストを隠すためのCSSクラス（例: Bootstrapの.sr-onlyや自作のvisually-hidden）は、text-indentよりも意図が明確でアクセシビリティの問題が少ない設計になっています。
    css
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
html
<h1><a href="/">サイト名<span class="visually-hidden"> サイト名</span></a></h1>
<!-- あるいは、もっとシンプルな構造でCSS背景画像と組み合わせる -->
<h1 class="site-title-with-logo">
<a href="/">
<span class="visually-hidden">サイト名</span>
</a>
</h1>
css
.site-title-with-logo a {
display: block;
width: 150px;
height: 50px;
background: url('logo.png') no-repeat center center;
background-size: contain;
}
    これらの理由から、画像置換にtext-indent: -9999px;を使用する方法は、特別な理由がない限り推奨されません。しかし、過去のコードや他のサイトで目にする可能性があるため、その意図と問題点を理解しておくことは重要です。

6. 他のCSSプロパティとの関係性

text-indentは、特定の条件下で機能したり、他のプロパティと組み合わせて使われたりします。ここでは、text-indentの挙動に影響を与える可能性のある他のプロパティとの関係を見ていきます。

displayプロパティとの関係

text-indentプロパティは、基本的にブロックレベル要素またはブロックレベル要素のようにテキストフローを扱う要素にのみ適用されます。

• display: block;: <p>, <h1>～<h6>, <div>, <li>などの要素はデフォルトでブロックレベル要素です。これらの要素にはtext-indentが問題なく適用されます。
• display: inline;: <span>, <a>, <strong>, <em>などの要素はデフォルトでインライン要素です。インライン要素はテキストの塊として扱われ、新しい行を開始しません。text-indentはインライン要素に適用しても効果がありません。
  html
<p><span>インライン要素</span>の例です。<span>ここもインデントされません。</span></p>
css
span {
text-indent: 2em; /* 効果なし */
background-color: yellow; /* 効果があるプロパティとの比較 */
}
• display: inline-block;: インライン要素のように横に並びますが、ブロックレベル要素のように幅や高さ、マージン、パディングなどを設定できる要素です。display: inline-block;が指定された要素には、text-indentが適用されます。これは、インラインブロック要素がテキストの塊として扱われつつも、内部的にはブロックレベルの整形規則を持つためです。
  html
<div class="container">
<span style="display: inline-block; width: 200px;">インラインブロック要素の例です。</span>
<span style="display: inline-block; width: 200px;">これもインデントされます。</span>
</div>
css
.container span {
text-indent: 1em; /* 効果あり */
border: 1px solid black;
margin: 5px;
}
• display: list-item;: <li>要素はデフォルトでdisplay: list-item;です。これもブロックレベル要素のように扱われるため、text-indentが適用されます。前述のリストアイテムの例のように使用できます。

まとめ: text-indentは、display: block;, display: inline-block;, display: list-item; など、ブロックレベルの整形コンテキストを生成する要素に適用できます。

directionプロパティ（LTR/RTL）との関係

ウェブページのテキストの方向は、directionプロパティまたはHTMLのdir属性によって設定できます。デフォルトはltr（Left-to-Right、左から右）です。アラビア語やヘブライ語などの言語ではrtl（Right-to-Left、右から左）が使用されます。

text-indentのインデント方向は、このテキストの方向によって変化します。

• direction: ltr; (デフォルト): 正の値は開始位置（左端）から右方向へインデントします。負の値は開始位置（左端）から左方向へインデントします。
• direction: rtl;: 正の値は開始位置（右端）から左方向へインデントします。負の値は開始位置（右端）から右方向へインデントします。

つまり、text-indentは常にテキストフローの開始位置（start edge）に向かって正の値でインデントし、終了位置（end edge）に向かって負の値でインデントすると考えることができます。

“`html

“`

css
[dir="rtl"] p {
text-indent: 2em; /* 右端から左に2emインデント */
margin-bottom: 1em;
border: 1px solid blue; /* 境界線で方向を確認 */
}

この例では、direction: rtl;が指定されているため、text-indent: 2em;はテキストの開始位置である右端から左方向へ（つまり内側へ）インデントを適用します。

多言語サイトなどでRTL言語を扱う可能性がある場合は、text-indentの挙動が方向によって変わることを理解しておく必要があります。

white-spaceプロパティとの関係

white-spaceプロパティは、要素内の空白文字（スペース、タブ、改行）の扱い方を制御します。このプロパティの値によっては、テキストの折り返しが発生しなくなったり、改行が厳密に解釈されたりします。

例えば、white-space: nowrap;を指定すると、テキストは折り返されずに一行で表示され続けます。この場合、その要素の最初の行は要素の内容全体となります。もし内容が親要素の幅を超えても、強制的に一行で表示されます。

css
.nowrap {
white-space: nowrap;
text-indent: 3em; /* 要素の内容全体が最初の行と見なされる */
overflow: hidden; /* はみ出しを隠す（任意） */
}

このように、white-spaceの設定によって「最初の行」がどのように定義されるかが変わる可能性があるため、text-indentの効果もそれに影響されます。ただし、通常の段落表示でwhite-space: normal;やwhite-space: wrap;を使用している限り、text-indentの挙動は変わりません。

::first-line擬似要素との組み合わせ

::first-line擬似要素は、ブロックレベル要素またはブロックレベル要素のように表示される要素の最初の整形済み行にスタイルを適用するために使用されます。text-indentプロパティは、この::first-line擬似要素に適用可能なプロパティの一つです。

“`html

この段落の最初の行に特別なスタイルを適用します。テキストが十分に長い場合、この擬似要素の効果を確認できます。二行目以降は通常のスタイルになります。

“`

“`css
.special-first-line {
/ 段落全体にはインデントなし /
/ text-indent: 0; /
}

.special-first-line::first-line {
text-indent: 2em; / 最初の行だけをインデント /
font-weight: bold; / 最初の行を太字にする（例） /
color: blue; / 最初の行の色を変える（例） /
}
“`

この例では、::first-lineを使って最初の行だけにtext-indentを適用しています。もし<p>要素自体にもtext-indentが指定されている場合、::first-lineに指定されたtext-indentの値が優先されます（継承されないプロパティのため、打ち消す場合は明示的に0などを指定する必要はありませんが、混乱を避けるために親要素のインデントを0にするか、詳細度で制御することを意識すると良いでしょう）。

この組み合わせを使うことで、「最初の行だけ他の行とは異なるインデントにする」といった細かいスタイリングが可能になります。例えば、段落全体はぶら下げインデントにしたいが、::first-lineで別のインデント値を指定してさらに調整するなど、より複雑なレイアウトを構築できます。

7. text-indentの発展的な値：hangingとeach-line

CSS Text Module Level 3 仕様では、text-indentプロパティに単なる長さやパーセンテージだけでなく、hangingとeach-lineというキーワード値を指定できるようになりました。これらの値は、より柔軟なインデントの制御を可能にしますが、前述の通り、現時点でのブラウザサポートはまだ限定的です。

これらのキーワードは、単独で使うのではなく、長さやパーセンテージの値と組み合わせて使用します。

text-indent: hanging;の詳細な解説

hangingキーワードは、指定したインデントを最初の行に適用せず、代わりにそれ以降のすべての行に適用します。これにより、「ぶら下げインデント」（Hanging Indent）を直接表現できます。

構文：
css
selector {
text-indent: length-percentage hanging;
}
/* または */
selector {
text-indent: hanging length-percentage;
}

例：
css
.hanging-spec p {
text-indent: 3em hanging; /* 最初の行はインデントせず、2行目以降を3emインデント */
margin-bottom: 0.5em;
border: 1px dashed green; /* 分かりやすいように境界線 */
}

この指定は、セクション5で解説したtext-indent: -3em;とpadding-left: 3em;を組み合わせた手法と同じ視覚的な結果を目指しています。ただし、仕様上のhangingキーワードを使った方法の方が、コードの意図がより明確になります。

• メリット: コードが直感的。「ぶら下げインデントにしたいんだな」という意図が分かりやすい。
• デメリット: ブラウザサポートがまだ不十分。特にFirefoxではサポートされていません（2023年現在）。将来的な普及が期待されますが、現時点ではクロスブラウザ対応を考えると前述のtext-indentとpaddingを組み合わせる方法がより安全です。

使用する際は、必ず対象ブラウザでのサポート状況（caniuse.comなどで確認）を確認し、必要であれば代替手段（text-indent + padding-left）を用意する必要があります。

text-indent: each-line;の詳細な解説

each-lineキーワードは、インデントをすべての行に適用します。通常、text-indentは最初の行にしか適用されませんが、このキーワードを使うと、テキストの各行が指定した分だけ字下げされます。

構文：
css
selector {
text-indent: length-percentage each-line;
}
/* または */
selector {
text-indent: each-line length-percentage;
}

例：
css
.each-line-spec p {
text-indent: 1.5em each-line; /* すべての行を1.5emインデント */
margin-bottom: 0.5em;
border: 1px dashed purple; /* 分かりやすいように境界線 */
}

この指定をすると、テキストが折り返されるたびに、その新しい行の開始位置がすべて左端から1.5em内側になります。

• メリット: 各行に均一なインデントを適用したい場合に便利。
• デメリット: こちらもブラウザサポートが限定的です。特に主流ブラウザでの完全なサポートはまだ広く普及していません（ Safariが比較的早くサポートしましたが、他のブラウザは追従が遅れています）。

each-lineキーワードを使うよりも、要素全体にpadding-leftやmargin-leftを適用する方が、同様の視覚的効果を得られ、かつブラウザ互換性も高いため、実用的にはそちらの方法がよく使われます。

キーワード値の組み合わせ:

hangingとeach-lineは同時に指定することも可能です。
css
selector {
text-indent: length-percentage hanging each-line;
}
この場合、「すべての行にlength-percentageを適用するが、最初の行はそのインデントからぶら下がる（=最初の行は通常位置に表示され、それ以降の行がインデントされる）」という意味になります。これは text-indent: hanging; と同じ効果になります。each-lineは単独では意味がなく、常にhangingと組み合わせて使用されるか、あるいは単独で指定された場合のデフォルトの挙動（最初の行のみ）を明示的に打ち消すために存在すると考えられます。しかし、仕様の解釈やブラウザ実装には差異がある可能性があり、これらのキーワード値の利用は現時点では実験的と考えるべきです。

結論として、hangingやeach-lineといったキーワード値は、将来的にtext-indentをより直感的に使えるようにするためのものですが、現状ではブラウザサポートの観点から、従来のプロパティの組み合わせ（例: text-indentとpadding-left）で同等のレイアウトを実現する方が安全です。

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

ウェブサイトのアクセシビリティとは、年齢、身体的・精神的な能力、使用環境などに関わらず、すべての人がウェブコンテンツにアクセスし、利用できるようにすることです。text-indentプロパティの使用は、適切に行われないとアクセシビリティに影響を与える可能性があります。

適切なインデントサイズ

過度なインデントは、特に狭い画面や拡大表示している場合に、テキストの行頭を見つけにくくし、可読性を損なう可能性があります。インデントのサイズは、テキストのフォントサイズとのバランスを考慮して決定する必要があります。一般的に、1em～3em程度のインデントがよく使われます。

単位の選択とユーザー設定への対応

セクション3で解説したように、pxのような絶対単位でtext-indentを指定すると、ユーザーがブラウザのフォントサイズ設定を変更してもインデント幅は変わりません。これにより、テキストが拡大された際にインデント幅が相対的に小さく見え、意図した読みやすさが得られなくなる可能性があります。

emやremのような相対単位を使用すると、インデント幅はテキストサイズに比例してスケーリングされます。ユーザーがフォントサイズを大きく設定した場合、インデント幅もそれに合わせて大きくなるため、インデントの効果が維持され、テキスト全体のバランスが保たれます。アクセシビリティの観点からは、remを使用することが強く推奨されます。

css
p {
text-indent: 2rem; /* ルートのフォントサイズに合わせてインデント */
}
これにより、ユーザーがブラウザ設定で基本フォントサイズを16pxから20pxに変更した場合、インデント幅も32pxから40pxに自動的に調整されます。

テキスト非表示の問題

セクション4、5で触れたtext-indent: -9999px;のような大きな負の値を使ってテキストを非表示にする手法は、アクセシビリティの観点から大きな問題となります。スクリーンリーダーの挙動は様々で、隠されたテキストを読み上げてしまう可能性があります。これは視覚障碍のあるユーザーにとって混乱を招き、コンテンツの理解を妨げます。また、キーボード操作で要素にフォーカスが当たった際に予期せぬ挙動を引き起こす可能性もゼロではありません。

テキストを視覚的に隠したいが、スクリーンリーダーには読ませたい場合は、より適切なCSSクラス（visually-hiddenなど）を使用するか、HTML構造やWAI-ARIA属性（aria-labelなど）を適切に使用すべきです。テキストを完全に隠したい場合は、そもそもHTMLに記述しない、あるいはdisplay: none;やvisibility: hidden;を使用することを検討します（ただし、これらはスクリーンリーダーからも隠されます）。目的に応じて適切な技術を選択することが重要です。

読みやすさへの影響

適切なtext-indentは段落の区切りを明確にし、文章の構造を視覚的に分かりやすくすることで読みやすさに貢献します。しかし、ウェブデザインにおいては、段落間に適切なマージン（margin-bottom）を入れることでも同様の効果を得られることが多く、text-indentの使用は必須ではありません。両方を組み合わせることも可能ですが、インデントとマージンの両方を使うと、段落間のスペースが広がりすぎる可能性もあるため、バランスが重要です。

特にモバイルデバイスのような狭い画面では、広すぎるインデントは一行あたりの文字数を減らしてしまい、かえって読みにくくなることもあります。レスポンシブデザインを考慮し、ブレークポイントごとにインデントの値を調整することも検討できますが、多くの場合はrem単位を使用するだけで様々な画面サイズに対応可能です。

最終的に、text-indentを使用するかどうか、どのような値を指定するかは、ターゲットユーザー、コンテンツの種類、全体のデザインスタイル、そしてアクセシビリティの要件を総合的に考慮して決定すべきです。特にアクセシビリティの観点からは、rem単位の使用、過度なインデントの回避、そしてテキスト非表示目的での使用を避けることが重要です。

9. ブラウザ互換性と確認方法

ほとんどのモダンブラウザ（Chrome, Firefox, Safari, Edgeなど）は、基本的なtext-indentプロパティの機能（長さやパーセンテージによるインデント、正負の値）を適切にサポートしています。したがって、一般的な用途であればブラウザ互換性をそれほど心配する必要はありません。

ただし、セクション7で解説したhangingやeach-lineといったキーワード値は、比較的新しい仕様であり、ブラウザによってサポート状況が異なります。これらのキーワード値を使用する際は、対象とするブラウザで期待通りの挙動をするかを確認する必要があります。

ブラウザ互換性を確認するためには、Can I Useのようなウェブサイトが非常に役立ちます。ここでtext-indentを検索すると、各ブラウザバージョンでのサポート状況が詳細に表示されます。

• 基本的なtext-indent (length/percentage): ほぼすべてのブラウザで完全にサポートされています。
• text-indent: hanging;: Safariなど一部のブラウザではサポートされていますが、Firefoxなどではサポートされていません。
• text-indent: each-line;: こちらもサポート状況は限定的です。

もし、hangingやeach-lineを使用したいが、すべてのターゲットブラウザでサポートされていない場合は、前述のtext-indentとpadding-leftを組み合わせる方法のような代替手段を検討する必要があります。あるいは、CSSの @supports ルールを使用して、特定のプロパティ値がサポートされているかどうかに応じて異なるスタイルを適用することも可能です。

“`css
/ デフォルトのスタイル（ブラウザサポートが限定的なhangingを使わない） /
.hanging-indent p {
padding-left: 3em;
text-indent: -3em;
}

/ もしtext-indent: hanging がサポートされていれば、こちらのスタイルを適用 /
@supports (text-indent: hanging 1em) { / サポートされているか確認 /
.hanging-indent p {
padding-left: 0; / デフォルトのpadding-leftを解除 /
text-indent: 3em hanging; / hanging キーワードを使用 /
}
}
``
この例では、まず広くサポートされているtext-indent/padding-leftの組み合わせでぶら下げインデントを実現しておき、もしブラウザがtext-indent: hanging`をサポートしていれば、そのより直感的な記述の方を適用するようにしています。これにより、古いブラウザでもレイアウトが崩れることを防ぎつつ、新しいブラウザではよりシンプルで意図が明確なコードを利用できます。

ただし、初心者のうちは、まず基本的なtext-indentプロパティと長さ/パーセンテージの値の組み合わせに慣れ、ブラウザ互換性の高い方法でレイアウトを実現することに注力するのが良いでしょう。発展的な値や@supportsのような高度なテクニックは、必要に応じて学習していくのが効果的です。

10. まとめとベストプラクティス

この記事では、CSSのtext-indentプロパティについて、その基本的な使い方から発展的な内容まで詳しく解説しました。最後に、重要なポイントをまとめ、推奨される使い方やベストプラクティスを確認しましょう。

重要なポイントの再確認

• text-indentは、ブロックレベル要素またはそれに準ずる要素（display: block;, inline-block;, list-item;など）の最初の行にインデントを適用するプロパティです。
• インライン要素（display: inline;）には効果がありません。
• 値には長さ（px, em, remなど）やパーセンテージ（%）を指定できます。
• 正の値はテキストを開始位置から内側へ移動させ、負の値は外側へ移動させます。
• direction: rtl; の場合、インデントの方向は逆になります（右から左へ）。
• 「ぶら下げインデント」は、text-indentの負の値とpadding-left（またはmargin-left）の正の値を組み合わせて実現するのが一般的でブラウザ互換性が高い方法です。
• hangingやeach-lineといったキーワード値は仕様に存在しますが、ブラウザサポートが限定的なため、使用には注意が必要です。
• text-indent: -9999px;のような大きな負の値を使ったテキスト非表示（画像置換）は、アクセシビリティや保守性の問題から非推奨です。より適切な代替手段を使用しましょう。
• text-indentは::first-line擬似要素にも適用できます。

推奨される使い方とベストプラクティス

• 単位はremを使う: 可読性とアクセシビリティのために、text-indentの値にはrem単位を使用することを強く推奨します。これにより、ユーザーのフォントサイズ設定にインデント幅が適切に追従します。
• 過度なインデントは避ける: 特にモバイルなど狭い画面での可読性を考慮し、インデントは文章の流れを妨げない適切なサイズに留めましょう。
• テキスト非表示には使用しない: 画像置換などの目的でtext-indentを使ってテキストを画面外に隠すのは避けましょう。<img>タグのalt属性や、visually-hiddenクラス、WAI-ARIA属性など、よりセマンティックでアクセシブルな方法を使用してください。
• ぶら下げインデントはtext-indent + padding-leftで: ブラウザ互換性を最優先するなら、text-indent: -value; padding-left: value;の組み合わせでぶら下げインデントを実現するのが最も信頼できます。
• 他のプロパティとの相互作用を理解する: 特にdisplayプロパティがtext-indentの適用に影響することを覚えておきましょう。
• 意図を明確に: コードを読む人がインデントの意図を理解できるよう、セマンティックなHTML構造と分かりやすいCSSセレクタを使用することを心がけましょう。

さらなる学習のために

この記事でtext-indentの基本的な使い方や主要な概念はカバーしましたが、CSSの世界は広大です。さらに深く学習したい場合は、以下のようなテーマを探求してみてください。

• CSSの様々な単位（ch, exなど）とその使い分け
• CSSのContaining Blockの概念と要素の配置・サイジングへの影響
• アクセシビリティに関するWAI-ARIA仕様の詳細
• レスポンシブデザインにおけるブレークポイントでのスタイル調整
• CSS Text Moduleの他のプロパティ（white-space, word-break, line-breakなど）

text-indentは比較的小さなプロパティですが、その使い方をマスターすることは、ウェブサイトのテキスト表示を洗練させ、ユーザー体験を向上させる上で非常に役立ちます。この記事が、あなたのCSS学習の一助となれば幸いです。

CSSの学習は実践が最も重要です。ぜひ、実際にコードを書いて、様々な値や単位を試したり、他のプロパティと組み合わせたりして、text-indentの挙動を自分の目で確かめてみてください。 Happy Coding!

---