一行目の見出し項目を目立たせるために、二行目以降の文字を字下げすることを「ぶら下がりインデント」と呼びます。これをスペースなどで表現するのではなく、CSSで表現する際の方法をご紹介します。
サンプルコード
HTML
1 | <p class="sampleIndent">見出し項目です サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> |
CSS
1 | .sampleIndent { |
2 | text-indent: -2.0em; |
3 | margin-left: 2.0em; |
4 | } |
解説
原理を解説しますと、まずマイナスの値のtext-indentで一行目を左方向にずらし、その後margin-leftで段落自体を右に寄せます。そうすることで、一行目だけが元の位置のままで、二行目以降が指定した値の分だけ字下げされるという仕組みです。注意点として、text-indentとmargin-leftの値は同じものを入力します。
使用する場面としては、リストなどで先頭に※印などの記号がつく場合や、箇条書きにする場合などが挙げられます。サンプルとして、いくつか使用が想定されるケースをご用意しましたので、ぜひご覧ください。
スペースなどで調整しなくても字下げが可能なので、これまでスペースで調整していた方は、使用してみてください。
