VIDEO LESSON

CSSのtext-indentの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:21動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、テキストインデントです。
0:06これは、段落の最初の行だけを右へずらして字下げするプロパティです。
0:12たとえば文章の書き出しだけが一文字分下がり、二行目以降は左端からそのまま始まります。
0:18小説やレポートで段落の始まりを分かりやすくする、あの形を作る指定です。
0:24今回は、ワンエムとゼロを中心に比べながら、値の書き方、割合の考え方、そしてパディングとの違いまで、
0:29初心者向けに分かりやすく解説します。
0:34段落が切り替わったことが一目で伝わるため、長い文章でも読み手が区切りを見失いにくくなります。
0:41まず基本の書き方です。
0:43セレクターのあとにプロパティ名、テキストインデントを書き、コロンを挟んで値を入れ、
0:47最後にセミコロンを付けます。
0:51スライドの例ではワンエムを指定しています。
0:54エムは文字の大きさを基準にした単位で、ワンエムはおよそ一文字分の幅です。
1:00これで対象の段落の先頭行だけが一文字分下がります。
1:03エイチティーエムエル側でクラス、デモを持つ要素が対象になるので、セレクターとクラス名が合っていることが前提です。
1:12まずはこの一行を書き、最初の行だけがずれることを確認してみましょう。
1:17値の読み方を見ていきます。
1:19テキストインデントには長さを指定でき、代表例がワンエムです。
1:24文字サイズを基準にするので、文字を大きくすれば字下げ幅も一緒に広がり、バランスが崩れにくいのが利点です。
1:33ピクセルやレムといった他の長さの単位でも指定できます。
1:38またマイナスの値を書くと、先頭行が左側へはみ出す形にもできます。
1:43ただし本文で使うのは通常のプラスの字下げが基本です。
1:47まずはワンエムを基準に、読みやすい幅を探す感覚をつかみましょう。
1:53逆に、幅を決め打ちしたい場面ではピクセル指定が分かりやすく、運用ルールに合わせて選べます。
2:00長さのほかに、割合でも指定できます。
2:04たとえばテンパーセントと書くと、字下げ幅は包含ブロック、つまり段落が入っている箱の幅の十分の一になります。
2:13親の幅が広がれば字下げも広がるため、画面幅によって見え方が変わる点に注意してください。
2:21もう一つのゼロは、字下げをしない指定です。
2:24先頭行も二行目以降と同じ左端から始まります。
2:28このゼロが、このプロパティの初期値でもあります。
2:33記事の実例でも、ワンエムとゼロを切り替えて違いを比べます。
2:38固定したいなら長さ、可変でよいなら割合、と使い分けましょう。
2:43基本情報を確認します。
2:45テキストインデントの初期値はゼロで、字下げはありません。
2:49そしてこのプロパティは継承します。
2:51親要素に指定すれば、中の段落にも同じ字下げが引き継がれるということです。
2:56関連する値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値であるゼロに戻す指定です。
3:03アンセットは、継承するプロパティではインヘリットとして扱われます。
3:08ブラウザーの既定スタイルで見えている値と仕様上の初期値は同じとは限らないので、
3:12最終的には開発者ツールで確認する習慣を付けましょう。
3:17ここからは記事の実例です。
3:19エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
3:27デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
3:32折り返して複数行になる長さにしてあります。
3:37複数行あることが大切で、最初の行だけが下がり、二行目以降が元の位置に残る様子を観察できます。
3:45頭の部分では、スタイルシートをリンクで読み込んでください。
3:50比べるのはテキストインデントだけなので、文章や構造などの土台は変えずに固定します。
3:57土台のシーエスエスです。
3:58ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
4:04ここで最後の行にテキストインデント、ワンエムを指定すると、最初の行だけが一文字分下がって始まり、
4:10二行目以降は枠の内側の左端にそろいます。
4:15次に最後の行だけをゼロへ換えると、先頭行も左端から始まる通常の形に戻ります。
4:21変わるのはこの一行だけです。
4:23ファイルを保存してブラウザーを再読み込みし、行ごとの開始位置に注目して比べてください。
4:30自分の目で確かめることが理解への近道です。
4:33二行目以降の左端がそろっているかどうかも一緒に見ると、最初の行だけが動いたことがはっきり分かります。
4:40活用場面を整理します。
4:42代表的なのは、日本語の文章での段落字下げです。
4:46段落の書き出しを一文字分下げることで、段落の区切りが視覚的に分かりやすくなり、
4:51小説やレポートのような読み物らしい見た目になります。
4:56シーエスエスで指定すれば、本文のすべての段落に一括で同じ字下げを付けられ、
5:01あとから幅を変えたり外したりも簡単です。
5:06反対に、見出しの直後や箇条書きなど、字下げが不要な場所ではゼロに戻す指定を用意しておくと整います。
5:14文章の種類に合わせて、付ける場所と付けない場所を分けるのがコツです。
5:19効かないときと間違えやすい点を確認します。
5:22一番の注意点は、パディングとの違いです。
5:25パディングは段落全体を内側へ動かしますが、テキストインデントは最初の行だけを動かします。
5:32目的が違うので代わりにはなりません。
5:35また、本文に全角空白を入れて字下げする方法と、シーエスエスで字下げする方法を混在させると、
5:40二重に下がったり段落ごとにばらついたりします。
5:45どちらか一方にそろえましょう。
5:48そのうえで開発者ツールを使い、ネットワーク、エレメンツ、スタイルズ、コンピューテッドの順に調べ、
5:53最後に狭い画面幅でも読めるか確認します。
5:58また三百二十ピクセル程度の狭い画面や文字拡大でも、字下げが邪魔にならず読めるかを確認してください。
6:06ブラウザー互換性を確認します。
6:08記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
6:14エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、とても古くから対応しています。
6:19アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
6:24今回比べたワンエムやゼロといった基本の指定は、安心して使えると考えてよいでしょう。
6:30ただし、プロパティが使えることと、すべての値や構文が使えることは別です。
6:35新しい書き方を使うときは、値ごとの対応も確認してください。
6:39最後に練習とまとめです。
6:41まとめます。
6:41テキストインデントは、段落の最初の行だけを字下げする設定で、初期値はゼロ、
6:45継承はしました。
6:48ワンエムでは先頭行だけが一文字分下がり、ゼロでは字下げがなくなります。
6:53割合で指定する場合は、包含ブロックの幅が基準になる点も大切でした。
6:58練習として、まずワンエムとゼロの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
7:06お疲れさまでした。
7:07関連するテキストトランスフォームやホワイトスペースも一緒に学ぶと、文字まわりの理解が深まります。
7:14値の指定を一つずつ変える練習を重ねると、原因と結果の結び付きが追いやすくなります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

text-indentの役割と主な指定値を解説。最初の行だけが字下げされ、2行目以降は元の位置に残ります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのtext-indentの使い方：指定値・実例・効かない原因とブラウザー互換性 →