text-indentプロパティの説明
CSSのtext-indentプロパティは、テキストの一行目に挿入するインデントの幅を指定します。この機能は、一般的な組版に見られる段落の字下げを再現する時などに使用されます。
具体的には、ボックスのコンテンツ・エリアの行の先頭に指定できる空白の幅を調整できます。既定値では0になっているため、値を変更しなければ字下げは行われません。
text-indentに指定できる値
<length>- CSSで使用できる長さを表す単位つきの値です。一般的な字下げを行う場合は、
emの単位が適しています。 <percentage>- 包含ブロックの幅に対する割合で、インデントの幅を調整します。
each-line（β）- 強制的な改行が発生した場合、後の各行もコンテンツの先頭と同様に字下げします。ただし自動的な折り返しに対しては字下げを行いません。
hanging（β）- 先頭以外の全ての行を字下げします。
text-indentの使い方とサンプルコード
text-indentプロパティの構文は以下の通りです。
/* <length>値 */
text-indent: 1em;
text-indent: 1rem;
text-indent: 16px;
/* <percentage>値 */
text-indent: 5%;
text-indent: 10%;
/* キーワード値 */
text-indent: 1em each-line;
text-indent: 1em hanging;
text-indent: 1em each-line hanging;
/* グローバル値 */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: unset;
text-indentの実例
それでは実際にtext-indentプロパティの書き方を見ていきましょう。以下の例は、単純な字下げを行った場合の挙動です。ニュースメディアやブログなど文章を扱うサイトであれば、一文字下げの指定がよく使われます。
<div class="samp_box">
<section class="ti_1">
<h1>text-indent: 1em;</h1>
<p>日本語の字下げを確認します。この段落はスタイルシートを使って字下げを行っています。段落の最初に全角スペースを挿入する必要はありません。</p>
<p>Text indent sample paragraph. Text indent sample paragraph. Text indent sample paragraph. Text indent sample paragraph.</p>
</section>
<section class="ti_2">
<h1>text-indent: 2em;</h1>
<p>日本語の字下げを確認します。この段落はスタイルシートを使って字下げを行っています。段落の最初に全角スペースを挿入する必要はありません。</p>
<p>Text indent sample paragraph. Text indent sample paragraph. Text indent sample paragraph. Text indent sample paragraph.</p>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
}
.ti_1 p {
text-indent: 1em;
}
.ti_2 p {
text-indent: 2em;
}
縦書きの文章で字下げを行う
小説のような縦書きの文書をウェブで表現してみましょう。もちろん、出版物の形式を厳密に再現しようとすると複雑なプロパティの指定が必要になりますが、最低限の仕組みであれば次のような記述で達成できます。
<div class="vtext_box">
<section>
<h1>第一章</h1>
<p>私はこの文書を<em>何も考えず</em>に書き始めた。言葉は言の葉と言われるように積み重ねることで意味を織り成す。それは時間の矢と同じで、先へ読み進めることでしか達成できない。</p>
<p>もし去年の今ごろ、自分は何をしていたのだろうかと振り返れば、その思い出すという行為自体が時間の流れに乗っているのだ。</p>
<p><em>あなたが</em>、と言われて、あなたがあなたを意識した時、あなたは時間から少しだけ自由になれる。</p>
<p>さて、ここで少し考えてみよう。今あなたは時間を使って文章を読んでいる。読んでいる文章は単なる模様に過ぎないが、なぜそこから意味を読み取れるのだろうか。</p>
<p><em>文字は情報を可視化したものだから</em>、と言い切ってしまえば話は簡単だが、情報が<em>それそのもの</em>を指していると、なぜ分かるのだろうか。このあたりは哲学の領域である。興味を持ったら探求してみると良いだろう。</p>
<p>時間には空間が不可欠であるように、情報には認識が必要である。ならば、単に無意識的な時間を過ごすのではなく、空間の相互作用によって生まれるものが何か、突き止めようとする好奇心が情報の本質を理解することではないだろうか。</p>
</section>
<section>
<h1>第二章</h1>
<p>第二章は<em>ありません</em>。</p>
</section>
</div>
.vtext_box {
overflow: auto;
width: 100%;
padding: 1rem;
background: #eee;
line-height: 1.5;
writing-mode: vertical-rl;
}
.vtext_box > section {
overflow: auto;
padding: 1rem 0 1rem 1rem;
background: #fff;
font-family: serif;
}
section > h1 {
margin: 0 1rem 0 0;
font-size: 1.5rem;
}
section > p {
margin: 0 1rem 0 0;
text-indent: 1em;
}
p > em {
font-style: normal;
text-emphasis: filled sesame;
}