「text-indent」は、段落の最初の行のインデント(字下げ)幅を指定します。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1 3.0で拡張 | ブロック要素 | する |
構文 | |
---|---|
text-indent : length || [hanging | each-line]; |
|
プロパティ/設定値 | 意味 |
text-indent : 10px; text-indent : 2em; text-indent : 10%; |
インデント幅を指定。負の値も指定可能。 「長さ・大きさの単位」参照 |
text-indent : hanging; | 最初の行以外のすべての行がインデントされる。 通常のインデントと逆になる。 |
text-indent : each-line; | 最初の行だけでなく,強制改行後の行はすべてインデントされる。 ただし,自動改行された行はインデントされない。 |
デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css-length-em{text-indent : 3em;}
.css-length-px{text-indent : -15px;}
.css-hanging{text-indent : 10ex hanging;}
.css-each-line{text-indent : 10ex each-line;}
<!-- html -->
<div class="common">
<div class="cssTitle">text-indent:3em;</div>
<div class="css-length-em">
「text-indent:3em」を指定なので、1行目が3文字分インデントされる。2行目以降は、インデントされない。
</div>
<div class="cssTitle">text-indent:-15px;</div>
<div class="css-length-px">
「text-indent:-15px」を指定なので、1行目が15px分前方へインデントされる。2行目以降は、インデントされない。
</div>
<div class="cssTitle">text-indent:hanging;</div>
<div class="css-hanging">
「text-indent:hanging」を指定なので、1行目はインデントなし。2行目以降は、インデントされる。
</div>
<div class="cssTitle">text-indent:each-line;</div>
<div class="css-each-line">
「text-indent:each-line」を指定なので、強制改行の2行目以降もインデントされる。<br>
自動改行は、インデントされない。
</div>
</div>
※CSS3で追加された hanging と each-line は、ほとんどのブラウザが未対応のようです。
現時点(2017/03)で、動作確認できていません。
【W3Cのtext-indent仕様書】
https://www.w3.org/TR/css-text-3/#text-indent-property
関連するCSS(STYLE) | |
---|---|
text-align | 横(水平)方向の文字位置 |
text-decoration | 文字の装飾線の表示 |
text-decoration-line | 文字の装飾線の位置を指定 |
text-decoration-style | 文字の装飾線の種類を指定 |
text-decoration-color | 文字の装飾線の色を指定 |
text-emphasis | 圏点スタイルをまとめて指定 |
text-emphasis-color | 圏点の色を指定 |
text-emphasis-position | 圏点の位置を指定 |
text-emphasis-style | 圏点の形を指定 |
text-justify | 両端揃えの調節方法 |
text-overflow | オーバーフローしたテキストの省略表示 |
text-shadow | 文字の影付け |
text-transform | 字形の変換 |
text-underline-position | 文字下線の位置を指定 |