CSSのtext-indentプロパティが効かない場合の対処法をご紹介！
CSSのtext-indentが効かない場合の対処法をサンプルコード付きでご紹介します。CSSのtext-indentが効かせるにはその効かせたい要素がインライン要素かブロックレベル要素かということに注目する必要があります。
text-indentプロパティを効かせたい
何行かに渡り文章を記述する時、最初の1マスを空け段落を分けて記述したいといった時がよくあります。
そういった時にHTML要素によってはtext-indentプロパティが効かないといった場合があります。
CSSのtext-indentプロパティが効かないといった場合の対処法を以下の項目で解説します。
text-indentプロパティが効かない場合の対処法
ではtext-indentプロパティが効かない場合の対処法について解説します。
基礎編
text-indentプロパティが効かない場合、対象のHTML要素がインライン要素である場合が考えられます。
text-indentプロパティはブロックレベル要素に対してのみ効果のあるプロパティです。
下記のサンプルコードを見てみましょう。
上記のようにspan要素はデフォルトではインライン要素なので、display: block;としtext-indentを設定することで、最初の1マスを空けることができました。
応用編
text-indentプロパティの応用的な使い方を解説します。
例えばtext-indentプロパティに大きな値を設定することで、背景のみにして文字を飛ばすということができます。
文字を飛ばすことができない原因
文字を飛ばす方法なのですが、text-indent: -9999px;とすることで、デフォルトでは文字を飛ばすことができるのですが、text-align: right;を設定するとこれでは文字を飛ばすことができません。
原因は左のインデントを増やしてしまっているからです。
文字を飛ばすことができないときの対処法
text-align: right;を設定すると文字を飛ばすには、インデントを右のインデントを増やして、飛ばす必要があります。
ですのでtext-indent: 9999px;、もしくはtext-indent: 100%;とするとうまくいきます。
サンプルコードを用意したので確認してみましょう。
このように背景のみで文字を飛ばすことができていることが分かります。
まとめ
いかがでしたでしょうか？
ぜひここで紹介した基本と応用の方法を用いて、text-indentプロパティを使ってみてください。
