注意書きなどで先頭に「※」などを置いた際のテキスト表示位置の調整（text-indent、padding-left）

Webで文章を書く際に文章の開始を1文字分開けて書き出したい場合はCSSのインデント「text-indent」を調整するかと思いますが、逆に先頭に1文字置いて、以降の行はその先頭の文字分開けて表示したいことがあります。

Webの開発経験は長いですが、意外とそういった機会がこれまでなく、そういえばどうするんだろうと思ったら意外と簡単にできるようで、ちょっとだけ感動しました。

今回やりたいのは注意書きの文章で、先頭に「※」を置いて、以降の行のインデント位置を「※」の1文字分字下げして表示することです。

リスト（ul、li）とかだと勝手にやってくれる、あれです。

やりたいことを実現するためのCSSは以下の通り。

.sample-css-class{
    padding-left: 1em;
    text-indent: -1em;
}

ポイントはまず全体の文章を1文字分右に寄せておき（padding-left:1em）、その上で通常字下げで利用するインデントの設定で、マイナスを設定して先頭の行を左に寄せています（text-indent:-1em）。

ちなみに「em」はフォントサイズに合わせた1文字分のサイズになります。

以下、上記のCSSを実際に設定して表示した文章。

※注意書き１行目
注意書き２行目
注意書き３行目

emを調整することで以下のようなことも可能です。

※※※注意書き１行目※※※
注意書き２行目
注意書き３行目

こんなことも。

調整が簡単なので、色々と使えそうです。