【38】インデント（字下げ）を指定する text-indentプロパティ

text-indentプロパティは、テキストの「インデント（字下げ）」を指定します。

インデント（字下げ）とは、新聞や本などで、文章の段落ごとに1行目の最初の文字を下げて「ここから新しい段落」とわかりやすくすること。
日本語以外でも行われている習慣です。

プログラミングでも「字下げ」を使って構造をわかりやすくしたりしますが、このプロパティでは、そっちじゃなく普通の文章に使う「字下げ」を扱います。

text-indentプロパティを使うと、インデントは「マージン」として扱われるんだって。
「マージン」なので「マイナスの値」も使えます。
詳細はこちら→【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）

本日のINDEX

1. text-indentプロパティの値
2. text-indentプロパティの指定サンプル
3. text-indent: -9999px はSEOスパムという説

参考：
・CSS Text Module Level 3 | W3C Working Draft
・text-indent - CSS | MDN

text-indentプロパティの値

text-indentプロパティの値は 。

text-indentプロパティの値
単位付き数値	0 がデフォルト値。 単位を付けた数値で指定。マイナスの値も使えます。
パーセンテージ	親要素の幅（width）に対してのパーセンテージで指定します。
キーワード	each-line：<br>要素などで強制的に改行した直後の行頭もインデントします。 hanging：インデントされる行が逆転します（1行目以外がインデントされる） ＊キーワードは単独で使えません。必ず「単位付き数値」か「パーセンテージ」と一緒に使います。
グローバル値	text-indent: inherit; 親の値を継承（コレ書かなくても継承するけど） text-indent: initial; 継承した親の値を解消しデフォルト値に戻す text-indent: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	テキストを含む要素

「キーワード」は単独では使えず、必ず「単位付き数値」か「パーセンテージ」と一緒に使います。こんなかんじです↓

text-indent: 1em each-line; /*強制改行された後の最初の行も 1em下げる*/
text-indent: 1em hanging; /*1行目以外の行を 1em下げる*/
text-indent: 1em hanging each-line; /*キーワードは両方指定することもできます*/

この2つのキーワードは CSS3 から追加されたものなんですが、今のところ対応しているブラウザが ほぼ無いようです。（参考：Can I use / 2018年8月記）
Chrome はフラグを使えば使えるようですが。

text-indentプロパティの指定サンプル

とにかく、text-indentプロパティの値をぜんぶ使ってみます。
text-indentプロパティを指定した要素内の「最初の行の先頭」に、指定したサイズ分インデントします。<br>で強制的に改行した行の始めはインデントしません。

キーワード「each-line」を併用すれば <br>で改行した行の始めにも適用されるはずですが、実装しているブラウザは今のところ無いようです（2018年8月記）

text-indent: 未指定（= 0 ）

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: -1em

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 10%

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em each-line

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em hanging

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em each-line hanging

このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

キーワードは、やっぱダメそうですね（2018年8月記）

サンプルの HTMLはこんなかんじです。text-indent はインラインで指定しています。

<div class="mihon">
<b>text-indent: 未指定（= 0 ）</b>
<p>
このプロパティは、ブロック内のテキストの各行に適用されるインデント（字下げ）を指定します。<br>
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。</p>
<p>
キーワードで他を指定しない限り、要素の最初の行だけに影響します。</p>
</div>

<div style=" text-indent:1em" class="mihon">（テキスト省略）</div>
<div style=" text-indent:-1em" class="mihon">（テキスト省略）</div>
<div style=" text-indent:10%" class="mihon">（テキスト省略）</div>
<div style=" text-indent:1em each-line" class="mihon">（テキスト省略）</div>
<div style=" text-indent:1em hanging" class="mihon">（テキスト省略）</div>
<div style=" text-indent:1em each-line hanging" class="mihon">（テキスト省略）</div>

サンプルの CSSはこちら。

.mihon {
	color:black;
	background:#ffc;
    font-size:15px;
    line-height:1.6;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 .7em;
	width:60%}
.mihon p {
	margin:.7em 0;
	padding:0}
.mihon b {
	display:block;
	color:#579961;
	text-indent:0}

text-indent: -9999px はSEOスパムという説

Webフォントが無い時代、タイトル部分（<h1>〜<h6>）に「タイポグラフィ的にふさわしい書体にするため」に画像を使うことがありました。
CSSで背景画像にして、その上にテキストを置き（これはSEOのため）、テキストが邪魔なので「text-indent: -9999px（または text-indent: 9999px）」として、テキストを画面から大きくずらして表示しないようにしたんです。
こんなかんじ↓

<!--これはあまり使わないほうが良い例です-->
<h2 class="title1">テキスト</h2>
<style>
.title1 {
	text-indent: -9999px; /*これでテキストが左に9999pxずれる（=読めない）*/
	background: url(image/title1.png) no-repeat;
	overflow: hidden;
	}
</style>

なんで「9999px」なのかは不明。（5桁は無理だったんですかね？）
ユーザーがブラウザのウィンドウサイズをどんなに大きくしても、画面に現れないほどのインデントが必要だったわけです。私も以前はよく使っていました。

ただ、9999pxも無駄にスペースを作るので、何個もあればページの読み込みも遅くなりますし、何よりも Googleが「隠しテキスト・隠しリンク」をSEOスパムと判断するので、あまり推奨されない使い方だと言われていました。
（Googleではインデントを使った方法をまったくダメとは言っておらず、グレーなかんじ）
「text-indent: 100%」を使う方法もあり、これは親要素の幅の100％と指定することで親要素の外に出しているので、まあ、少しパフォーマンス的には良いようです。

今は Webフォントがあるので、わざわざ画像を使わなくても ふさわしいフォントを選べるようになってきましたね。
タイトルを背景画像にすると、デバイスによっては表示がおかしく（解像度が低いなど）なったりするので、テキストのほうが扱いが楽です。

Webフォントについてはこちら→（ちょっとメモ）@font-face で Webフォントを使おう

次回予告

さて次回は、word-spacingプロパティを使おう。
これは、単語どうしの間隔を指定するプロパティです。日本語でも単語と単語の間に「半角スペース」を入れれば反応します。