ウェブのページで注意事項や注釈などの文章を作るときに、文頭に米印や点マークなどの記号を書くことが多いと思いますが、何も対策をしないと2行目以降の文字が文頭の記号と被ってしまいます。
目立たせる文章を作る目的のはずが普通の文章とあまり変わらない見た目になってしまうので、記号と被らないよう2行目以降をインデント（字下げ）するCSSをご紹介します。
どのような内容か見てもらうとわかりやすいと思いますので以下の表をご覧ください。
2行目以降のインデント用CSS
| 字下げなし | 2行目以降の字下げあり |
|---|---|
|
※最初の文字です |
※最初の文字です |
左側の文章だと最初の記号と他の文字が被っていて記号があまり目立ちませんが、右側は1行目の米印が1文字分抜き出ているので文章が読みやすいです。
対応コードと説明
padding-left: 1em;
text-indent: -1em;
最初にpadding-leftの1emで全体が1文字分右にずれるので左に1文字スペースが空いた状態になります。
text-indentはブロックの最初の文字を字下げするCSSなので、これをマイナスに記述することで字下げの反対の左側へずれます。
paddingで全体が右に、indentをマイナスすることで最初の文字だけが左にずれることで記号だけが突出しています。
番号や複数文字への応用
上でご紹介した米印だけでなく「※1」などの数字付や、「(1)」のようないくつかの文字を組み合わせた場合にも対応できます。
| 番号付き米印 | 組み合わせ |
|---|---|
|
※１最初の文字です |
（１）最初の文字です |
対応コードと説明
左側の※と数字はこちらのコードで対応。
text-indent: -2em;
padding-left: 2em;
右側の数字とカッコの組み合わせはこちらで対応できます。
text-indent: -3em;
padding-left: 3em;
