過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>text-indent</strong> はブロック要素内の<strong>最初の行</strong>に対する字下げ（インデント）幅を指定する CSS プロパティ</li><li>単位は <code>px</code> / <code>em</code> / <code>%</code> など。% は包含ブロックの幅基準</li><li>負の値で「左にはみ出す」表現も可能。古典的な<strong>画像置換テクニック</strong>に使われた</li><li><code>hanging</code> キーワードで字下げを反転、<code>each-line</code> で<strong>強制改行ごと</strong>に適用</li><li>日本語段落で 1 文字下げたいなら <code>text-indent: 1em</code> がもっとも自然</li></ul></td></tr></table>
<h2>text-indent とは</h2>

<p><strong>text-indent</strong> は、ブロック要素内の<strong>最初の行</strong>のテキストをどれだけ字下げするかを指定する CSS プロパティです。論文や小説などで使われる「段落の冒頭 1 文字下げ」を CSS で再現するときの定番です。</p>

<h2>基本構文</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">セレクタ {
  text-indent: 値;
}

/* 例: 段落の冒頭を 1 文字下げる */
p {
  text-indent: 1em;
}</code></pre>
<h2>使える単位</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>単位</th><th>意味</th></tr></thead>
<tbody>
<tr><td><code>px</code></td><td>固定ピクセル。フォントサイズに追従しない</td></tr>
<tr><td><code>em</code></td><td>当該要素のフォントサイズ基準。<strong>1em = 文字 1 個分</strong></td></tr>
<tr><td><code>rem</code></td><td>ルート要素のフォントサイズ基準</td></tr>
<tr><td><code>%</code></td><td>包含ブロックの幅基準（要素自身の幅ではない）</td></tr>
<tr><td><code>ch</code></td><td>「0」の幅基準。等幅フォントで字数指定に便利</td></tr>
</tbody>
</table>

<h2>日本語段落の典型</h2>

<p>日本語の本文は「冒頭 1 字下げ」が一般的です。<code>1em</code> 指定が読みやすく、フォントサイズが変わっても比率が保たれます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">article p {
  text-indent: 1em;
  line-height: 1.8;
  margin-bottom: 0.5em;
}</code></pre>
<h2>負の値（左にはみ出す）</h2>

<p>負の値を指定すると、最初の行が要素の左端より<strong>外側にはみ出して</strong>表示されます。リストの「・」の代わりに見出し記号を使う表現や、画像置換テクニックで使われます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.hanging-quote {
  padding-left: 1.5em;
  text-indent: -1.5em;  /* ぶら下げインデント */
}
/* 出力:
   "First line is not indented,
    but the rest are aligned." */</code></pre>
<h2>古典的な画像置換テクニック</h2>

<p>かつてはロゴ画像の上にテキストを置く際、テキストを<strong>画面外に飛ばす</strong>ため大きな負の値を使うテクニックがありました。SEO・アクセシビリティの観点では現代では非推奨で、aria-label など別の手段が推奨されます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.logo {
  background: url(logo.png) no-repeat;
  width: 200px;
  height: 60px;
  text-indent: -9999px; /* 画面外に飛ばす */
  overflow: hidden;
}</code></pre>
<h2>hanging キーワード</h2>

<p>CSS Text Level 4 で <code>hanging</code> キーワードが追加されました。指定すると<strong>意味が反転</strong>し、最初の行を字下げせず、それ以降の行を字下げします。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.hanging {
  text-indent: 2em hanging;
}
/* 1 行目: そのまま
   2 行目以降: 2em 字下げ */</code></pre>
<h2>each-line キーワード</h2>

<p><code>each-line</code> は強制改行（<code><br></code> や段落の暗黙改行）ごとに字下げを適用します。文章途中で改行が入る詩のレイアウトなどで便利です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.poem p {
  text-indent: 1em each-line;
}</code></pre>
<h2>% 指定の挙動</h2>

<p><code>%</code> は<strong>包含ブロックの幅</strong>を基準にします。要素自身の幅ではない点に注意してください。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.container {
  width: 600px;
}
.container p {
  text-indent: 10%; /* 600px の 10% = 60px */
}</code></pre>
<h2>typical use cases</h2>

<h3>段落の冒頭字下げ（標準）</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">article > p {
  text-indent: 1em;
}</code></pre>
<h3>最初の段落だけ字下げしない（雑誌スタイル）</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">article > p:first-of-type {
  text-indent: 0;
}
article > p {
  text-indent: 1em;
}</code></pre>
<h3>ぶら下げインデント（コードリストの注釈など）</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.note {
  padding-left: 2em;
  text-indent: -2em;
}</code></pre>
<h2>注意点</h2>

<h3>インライン要素には効かない</h3>

<p>text-indent は<strong>ブロックレベル要素のみ</strong>有効です。インライン要素（<code><span></code> など）に指定しても効果はありません。</p>

<h3>ボタン・フォーム部品はやや特殊</h3>

<p><code><input type="text"></code> や <code><button></code> にも効きますが、ブラウザ実装が分かれるため、入力欄の左パディングは <code>padding-left</code> を使う方が無難です。</p>

<h3>flex / grid アイテムの注意</h3>

<p>flex / grid の子要素はブロック扱いになるので text-indent は機能しますが、内部のテキストノードが折り返さないと効果が見えません。期待通りでないときは display を確認してください。</p>

<h2>アクセシビリティ</h2>

<p>負の大きい値（<code>-9999px</code> など）でテキストを画面外に飛ばす手法は、画面リーダーには読み上げられるものの、<strong>SEO 観点で隠しテキスト扱い</strong>を受けるリスクがあります。現代では以下が推奨されます。</p>

<ul>
<li>アイコンボタンには <code>aria-label</code> や visually-hidden ユーティリティ</li>
<li>背景画像の代替テキストには <code>img + alt</code> を選ぶ</li>
<li>装飾だけのテキスト隠しは <code>position: absolute; clip-path: inset(50%);</code> 等の安全なテク</li>
</ul>

<h2>padding-left との違い</h2>

<p><code>text-indent</code> と <code>padding-left</code> はどちらも「左側に空きを作る」効果がありますが、対象範囲が異なります。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>プロパティ</th><th>影響範囲</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code>text-indent</code></td><td>最初の行のテキストのみ</td><td>段落の冒頭字下げ</td></tr>
<tr><td><code>padding-left</code></td><td>全ての行（要素のコンテンツ領域全体）</td><td>左に均一なスペース</td></tr>
<tr><td><code>margin-left</code></td><td>要素自体の左マージン</td><td>要素全体を右にずらす</td></tr>
</tbody>
</table>

<p>「2 行目以降も含めて全部下げたい」場合は <code>padding-left</code> または <code>margin-left</code>、「1 行目だけ字下げ」したい場合は <code>text-indent</code> と覚えると整理しやすいです。</p>

<h2>古いブラウザでの対応</h2>

<p><code>text-indent</code> 自体は CSS1 から存在する古典的なプロパティで、対応していないモダンブラウザはまずありません。一方 <code>hanging</code> や <code>each-line</code> キーワードは比較的新しい仕様で、IE11 や古い Safari では未対応です。ターゲットブラウザの対応状況は<strong>caniuse.com</strong> で確認しましょう。</p>

<h2>よくあるトラブル</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>症状</th><th>原因と対処</th></tr></thead>
<tbody>
<tr><td>字下げされない</td><td>インライン要素に指定している / 親で 0 に上書きされている / display:flex の中で意図しない構造になっている</td></tr>
<tr><td>2 行目以降も下がる</td><td>仕様通り（最初の行のみ字下げ）。<code>each-line</code> キーワード追加で改行ごと適用</td></tr>
<tr><td>% が想定と違う幅</td><td>包含ブロック幅基準。要素自身の幅ではない点に注意し、直接親要素の幅で計算</td></tr>
<tr><td>flex 子要素で効かない</td><td>子要素がインライン化されている。<code>display:block</code> や子要素のラップ構造を確認</td></tr>
<tr><td>負の値で文字が消える</td><td>overflow:hidden + 大きな負の値で画面外に押し出している。アクセシビリティ的に推奨されないので別手段に置き換え</td></tr>
<tr><td>hanging キーワードが効かない</td><td>古いブラウザ（IE 系）は未対応。padding-left + 負の text-indent で代替</td></tr>
</tbody>
</table>

<h2>FAQ</h2>

<p><strong>Q: 改行（br）の後も字下げしたい</strong><br />
A: <code>each-line</code> キーワードを追加すると、強制改行ごとに字下げが適用されます。</p>

<p><strong>Q: ぶら下げインデントの推奨実装は？</strong><br />
A: <code>padding-left</code> と負の <code>text-indent</code> の組み合わせが最も互換性が高い書き方です。</p>

<p><strong>Q: 字下げ量を文字数で指定したい</strong><br />
A: <code>em</code> 単位を使えば「N 文字分」と読めます。等幅フォントを前提とするなら <code>ch</code> でも可。</p>

<h2>関連</h2>

<ul>
<li><a href="/article/10656">テキスト</a> &mdash; 親カテゴリ</li>
<li><a href="/article/10665">text-decoration関連のプロパティ</a> &mdash; 装飾線</li>
<li>padding-left &mdash; 全行への字下げ</li>
<li>letter-spacing &mdash; 文字間隔</li>
<li>line-height &mdash; 行間隔</li>
</ul>