このページで解説するコードの実行結果。

一文字分 字下げ : text-indent: 1em;

桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。

この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。

奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。

マイナス値の指定 : text-indent: -2em;

桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。

この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。

奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
p {
    color:      navy;   /*  文字の色  */
    margin:     0 2em;  /*  外側の余白 */
    max-width:  30em;   /*  最大幅  */
}

text-indentの概要

字下げを設定する。<p>要素(段落)などで使うことが多い。

数値(+ 単位)で指定する。デフォルト値は0

まず、text-indent の設定が無い例。

HTML : 適用するHTML~竜馬がゆく(司馬遼太郎 著)より
<p class="sample">桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。</p>
<p class="sample">この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。</p>
<p class="sample">奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。</p>
実行結果

桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。

この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。

奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。

これを、1文字分 字下げする。

CSS : 1em
.sample  {
    text-indent: 1em;
}
実行結果

桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。

この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。

奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。

2文字分 字下げする。

CSS : 2em
.sample  {
    text-indent: 2em;
}
実行結果

桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。

この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。

奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。

マイナス値を指定することも可能。

CSS : -2em
.sample  {
    text-indent: -2em;
}
実行結果

桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。

この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。

奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。

Emmet : ti

記述Visual Studio Code
titext-indent: ;