低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

ぶら下がりインデントについて

一行目の見出し項目を目立たせるために、二行目以降の文字を字下げすることを「ぶら下がりインデント」と呼びます。これをスペースなどで表現するのではなく、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の値は同じものを入力します。

使用する場面としては、リストなどで先頭に※印などの記号がつく場合や、箇条書きにする場合などが挙げられます。サンプルとして、いくつか使用が想定されるケースをご用意しましたので、ぜひご覧ください。

サンプルページ

スペースなどで調整しなくても字下げが可能なので、これまでスペースで調整していた方は、使用してみてください。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ