CSSの文章にインデント(字下げ)を設定するサンプルです。
text-indentプロパティを使用します。
目次
text-indentのサンプル
text-indentのサンプルです。
インデント(字下げ)を指定します。
<style>
#p1{} /* インデント設定なし */
#p2{text-indent:25px;} /* 25pxで指定 */
#p3{text-indent:-25px;} /* -25pxで指定 */
p{border:1px solid #000;width:250px;height:50px;
margin-bottom:10px;text-indent:10px;background:LightCyan;}
</style>
<p id="p1">インデントなしです</p>
<p id="p2">インデント25pxです</p>
<p id="p3">インデント-25pxです</p>以下は、実行結果です。
text-indentプロパティの仕様
| text-indent : 値 |
| 値 | 説明 |
|---|---|
| 数値+単位 | 指定した単位で設定します。 |
| 数値+% | 包含ブロックの幅に対する割合です。 |
| 値を継承する | |
- 文章にインデント(字下げ)を設定します。
- 適用の対象はブロック要素です。
- 初期値は0です。
- マイナスの値を指定することができます。その場合左にずれます。
- 以下はMDNのtext-indentプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/text-indent
関連の記事
CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える時の改行(overflow-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)
CSS 文字の太さを指定するサンプル(font-weight)
CSS 文字を斜体にするサンプル(font-style)