BLOG

2行目以降を1文字下げる「css」text-indentの使い方

箇条書きや注意書きなどの場合、行の最初に「※テキスト」などと記号がついたりします。そんなとき、2行目以降を1文字下げたいと思ったことありませんか？インデザインなどDTPを扱っている人なら、特に気になるところかと思います。今回は注意書きなどのテキストを揃えつつ、記号だけを前に出すcssを紹介します。

2行目以降を1文字下げる「css」

上記のようにすると、2行目以降が1文字下がり、テキストの先頭が揃いました。考え方は「テキストの開始位置」を1em、つまり1文字分右に移動させていると考えてください。さらにtext-indentプロパティを使い、1行目の開始位置を左に1文字分移動します。

ただ、この方法だとSafariで見たとき、※の記号が1文字よりも小さいんですよね。なので少しズレてしまいます。そんな時はSafariのみに適用させるcssハックを適用し、text-indentで0.8文字分程度、左にズラしてあげましょう。

cssハックでSafariにのみ適応

っていうか本当はハックなんて使いたくないんですけど、今だに使わざる得ない…。全てのブラウザの仕様を統一してほしんもんですね。ということで、まとめますと…

text-indent: -1行目を左にずらしたい長さ;

ということですね。この方法は覚えておいて損はないと思います。是非、ご活用を！