三重県名張市伊賀市のホームページ制作/グラフィックデザイン

Web Studio DeRize(ディーライズ)

BLOG

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

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

箇条書きや注意書きなどの場合、行の最初に「※テキスト」などと記号がついたりします。そんなとき、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行目を左にずらしたい長さ;

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


関連するエントリー
ご相談・お見積り

制作のご相談・お見積り(無料)を
受け付けています。

制作についての不安や疑問など、どんなことでもお気軽にご相談ください。 制作会社様からの制作外注依頼もお待ちしております。

電話番号