CSS3のtext-indentプロパティを使用したテキストのインデントの詳細説明
text-indentプロパティは、テキストのインデントを設定するために使用され、各行の最初の文字の前に空白の距離を追加します。
文法:
text-indent: length | percentage | inherit;
値:
- 長さ:pxやemなどの単位で設定されたインデントの値を指定します。正の値は右に、負の値は左にインデントされます。
- パーセンテージ:親要素の幅を基準に設定されたインデントの割合。正の値は右にインデントされ、負の値は左にインデントされます。
- text-indentプロパティの値を親要素に継承します。
例:
p {
text-indent: 2em;
}
上記の例では、段落の最初の行のテキストを2文字分インデントします。
注意点:
- text-indentは最初の行のテキストにのみ影響し、他の行のテキストには影響しません。
- テキストが改行されると、改行された行にもtext-indentプロパティが適用されます。
- text-indentプロパティはインライン要素には効果がなく、ブロック要素にのみ有効です。
- テキストに改行(\n)やタグが含まれている場合、各行の最初の文字にtext-indent属性が適用されます。
以上より、text-indentプロパティは、テキストのインデントを設定するために使用され、テキストが表示される際により良い読みやすさやレイアウト効果を持たせることができます。