概要へ移動

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

一文字分 字下げ : 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>
実行結果

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

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

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

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

CSS : 1em
.sample  {

    text-indent: 1em;

}
実行結果

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

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

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

２文字分 字下げする。

CSS : 2em
.sample  {

    text-indent: 2em;

}
実行結果

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

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

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

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

CSS : -2em
.sample  {

    text-indent: -2em;

}
実行結果

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

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

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

Emmet : ti

記述Visual Studio Code
titext-indent: ;