HTML - CSS - text-indent 字下げ・ぶら下げ

 
1. 概要
2. やってみる

1. 概要

 テキストのインデント。日本語で言えば、字下げとぶら下げですわな。  詳細は「text-indent - CSS: カスケーディングスタイルシート | MDN」をご参照ください。

text-indent: 値;
 で定義します。

2. やってみる

 やってみます。

pre.pre1
{
	all: initial;
	display: flex;
	text-indent: 1em;
	border: double 1px black;
}

 とスタイルを定義して


<pre class="pre1">
字下げする。これを調べるには、行が2行以上ないといかんのでだらだらと文章を書くことになるのだよ。長々と書いているがいつ到達するかはわからないので、まだ書いています。
</pre>
 と書くと下記のように表示されます(わたしのブラウザでは、文字幅以外は意図通り)。
字下げする。これを調べるには、行が2行以上ないといかんのでだらだらと文章を書くことになるのだよ。長々と書いているがいつ到達するかはわからないので、まだ書いています。

 わかりやすいように枠線をつけております。
 ちょっと意外だったのが、等幅フォントを使用しているので、日本語で書く場合「2em」必要かと思っていたら「1em」でインデントできている。

 HTML の内容は省略しますが・・・。英字のみと英字日本語まじりだとどうなるのか試してみます。

only alphabet. When there are no lines more than 2 lines, I don't go, so to check this leisurely, if, sentences will be written. For a long time it's being written, but I don't know when to reach, so it's being still written. It was translated in exicte to say so.

half alphabet. 前半がアルファベットで後半が日本語の例です。これを調べるには、行が2行以上ないといかんのでだらだらと文章を書くことになるのだよ。長々と書いているがいつ到達するかはわからないので、まだ書いています。

前半が日本語で、後半がアルファベットの場合。half alphabet. When there are no lines more than 2 lines, I don't go, so to check this leisurely, if, sentences will be written. For a long time it's being written, but I don't know when to reach, so it's being still written. It was translated in exicte to say so.

 どうも、日本語で1文字分のように見えます。



 マイナスの値をいれると、ぶら下げになるらしい。


pre.pre2
{
	all: initial;
	display: flex;
	padding-left: 1em;
	text-indent: -1em;
	border: double 1px black;
}
 と書いて喜寿すると以下のように表示されます。
※ぶら下げする。これを調べるには、行が2行以上ないといかんのでだらだらと文章を書くことになるのだよ。長々と書いているがいつ到達するかはわからないので、まだ書いています。

 枠を書いているのでわかりやすいですが・・・。
 マイナスなせいで、枠を左にはみでるわけです。段落全体を右に寄せたうえでぶら下げを行う必要がありそうです。
 ということで「padding-left: 1em;」と組み合わせることで、意図通りになりました。