(例)【CSS】text-indentの使用方法
See the Pen
indent by linlin (@linlin098765)
on CodePen.
<h5>text-indent:100px; を指定</h5>
<p class="sample" style="text-indent:100px;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:100px;">
There are three apples on the desk.
</p>
<h5>text-indent:2em; を指定</h5>
<p class="sample" style="text-indent:2em;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em;">
There are three apples on the desk.
</p>
<h5>text-indent:2em each-line; を指定</h5>
<p class="sample" style="text-indent:2em each-line;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em each-line;">
There are three apples on the desk.
</p>
<h5>text-indent:2em hanging; を指定</h5>
<p class="sample" style="text-indent:2em hanging;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em hanging;">
There are three apples on the desk.
</p>
p.sample {
width:200px;
background-color:gray;
}
【CSS】text-indent:テキストのインデント幅を調整する
CSSのtext-indentは、テキストの1行目のインデント幅を調整するプロパティです。インデント幅には、負の値も指定可能です。
- px,ex,em等
単位でインデント幅を指定 - %
ブロックに対する%で指定 - each-line
1行目だけでなく、改行後もインデントをする - hanging
1行目以外をインデントする