【CSS】ぶら下げインデントにする指定方法

こんにちは (^^)/

文章の読みやすさを考えたとき、インデントを使うのは有効です。今回は、インデントをCSSで表現する方法を、考えてみたいと思います。

ということで、CSS今回のお題は「インデント」です。

といっても、私が目指すのは、こちら 　「※（米印）」だけが飛び出た感じにしたいんです。

行頭の1文字分を右側にずらす「インデント」は、CSSのtext-indentプロパティで指定できるというので使ってみましたが、これだと1行目の文字をずらすだけです。

Wordでは「ぶら下げインデント」として機能が備わっていますが、これをCSSで表現するにはどうしたらいいのかと悩みました。

欲しいドメインを「お名前.com」で手軽にチェック

インデント（字下げ）

text-indentプロパティを使うと、1行目のインデント幅を指定することができます。

幅の指定には、em、px、%、などが使えます。

.indent{
   text-indent:1em;
}

.indent{
   text-indent:50px;
}

ぶら下げインデント

「ぶら下げインデント」は、段落の2行目以降の開始位置を揃えることです。

これを表現するにはtext-indentに負の値を指定することで可能です。

▼ ネガティブマージン

.indent{
   text-indent:-1em;
}

－ □ ×

※インデントとは、文章の行頭に空白を挿入して先頭の文字を右にずらすことです。ぶら下げインデントは「2行目インデント」と言われることもあり、文章の2行目以降の開始位置を動かします。

背景に色を付けると…

－ □ ×

※インデントとは、文章の行頭に空白を挿入して先頭の文字を右にずらすことです。ぶら下げインデントは「2行目インデント」と言われることもあり、文章の2行目以降の開始位置を動かします。

「※」がボックスからはみ出してます。

マイナス値を指定することを
ネガティブマージンって言うんだブー

さて、、、インデントにマイナス指定するだけでも十分に2行目以降を揃えることができていますが、

上の結果でもわかるように、マイナス分はボックスからはみ出してしまいます。

これだと、ボックスに枠線や背景色を設定したときに「※」マークは外にはみ出しちゃいますね。

そこで！

この不都合を調整するには、ボックスの左内側余白を指定するpadding-leftプロパティを使います。

1文字分を左にずらすなら、ボックス内の左内側余白を、1文字分広めにとればいいのです。

/*ぶら下げインデント*/
.hanging-indent{
   padding-left: 1em; /* 要素内余白 */
   text-indent: -1em; /* インデント */
}

これで、左端を気にせず作業ができますね！