2020-01-07 更新

注意書きなどで先頭に「※」などを置いた際のテキスト表示位置の調整(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を実際に設定して表示した文章。

※注意書き1行目
注意書き2行目
注意書き3行目

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

※※※注意書き1行目※※※
注意書き2行目
注意書き3行目

こんなことも。

※1 注意書き1行目
注意書き2行目

※2 注意書き1行目
注意書き2行目

最後に

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

CSS】関連記事