text-indentとは?字下げプロパティについての説明

こんにちは tanaka です。

cssプロパティ
text-indent の話です。

text-indent は
字下げに使います。

(指定できる値)
1em など

-1em
マイナスの数値も指定できる

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

text-indentの解説

字下げ

text-indent
は、
最初の文字を下げてくれるプロパティです。

text-indent: 1em;

em = フォントの大きさ(一文字分)
になります。

字下げ画像12
text-indent: 1em;

html

字下げ画像05

css

字下げ画像02

結果

字下げ画像1
<html>

<p class="indent01">
ああああああああああ<br>
いいいいいいいいいい<br>
うううううううううう<br>
</p>
<css>

.indent01 {
font-size: 32px;
text-indent: 1em;
}

例えば、
2文字分インデントの場合、
text-indent: 2em;

とすれば、
二文字分インデントになります。

マイナスの数値を使って2行目以降字下げもできる

padding で、
一文字分の空白を作る。

これにより、
全てが字下げ状態になります。

字下げ画像14

そこへ、
text-indent: -1em;
マイナス一文字にして
1行目だけ左へ戻します。

これで2行目以降字下げの完成。

字下げ画像16

html

字下げ画像05

css

字下げ画像04

結果

字下げ画像3
<html>

<p class="indent01">
ああああああああああ<br>
いいいいいいいいいい<br>
うううううううううう<br>
</p>
<css>

.indent01 {
font-size: 32px;
padding-left: 1em;
text-indent: -1em;
}

まとめ

字下げ

字下げは

字下げ画像12
padding-left: 1em;

以上、
text-indent
の話でした。

ありがとうございました。

タイトルとURLをコピーしました