- 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.
どうも、日本語で１文字分のように見えます。
マイナスの値をいれると、ぶら下げになるらしい。
pre.pre2
{
all: initial;
display: flex;
padding-left: 1em;
text-indent: -1em;
border: double 1px black;
}
と書いて喜寿すると以下のように表示されます。
※ぶら下げする。これを調べるには、行が2行以上ないといかんのでだらだらと文章を書くことになるのだよ。長々と書いているがいつ到達するかはわからないので、まだ書いています。
枠を書いているのでわかりやすいですが・・・。
マイナスなせいで、枠を左にはみでるわけです。段落全体を右に寄せたうえでぶら下げを行う必要がありそうです。
ということで「padding-left: 1em;」と組み合わせることで、意図通りになりました。
|
