text-indent
: 字下げ CSSプロパティ
このページで解説するコードの実行結果。
text-indent: 1em;
桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。
この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。
奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。
text-indent: -2em;
桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。
この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。
奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。
なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。
text-indent
の概要
字下げを設定する。<p>
要素(段落)などで使うことが多い。
数値(+ 単位)で指定する。デフォルト値は0
。
まず、text-indent
の設定が無い例。
<p class="sample">桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。</p> <p class="sample">この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。</p> <p class="sample">奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。</p>
桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。
この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。
奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。
これを、1文字分 字下げする。
.sample { text-indent: 1em; }
桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。
この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。
奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。
2文字分 字下げする。
.sample { text-indent: 2em; }
桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。
この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。
奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。
マイナス値を指定することも可能。
.sample { text-indent: -2em; }
桂の感情は果然硬化し、席をはらって帰国しようとした。薩摩側も、なお藩の体面と威厳のために黙している。
この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。当夜の竜馬の発言は、ほとんどこの一言しかない。 あとは、西郷を射すように見つめたまま、沈黙したからである。
奇妙といっていい。これで薩長連合は成立した。歴史は回転し、時勢はこの夜を境に討幕段階に入った。
Emmet : ti
記述 | Visual Studio Code |
---|---|
ti | text-indent: ; |