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

こんにちは (^^)/

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

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

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

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

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

【初心者向け】ブログの始め方完全ガイド！立ち上げから収入を得る方法まで

インデント（字下げ）

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

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

.indent{
   text-indent:1em;
}

.indent{
   text-indent:100px;
}

インデントには負の値を指定することもできます。
その場合は反対側に移動するため、ブロックからはみ出てしまいます。

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

ぶら下げインデント

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

これを表現するにはtext-indentに「負の値を指定すれば良いじゃん！」と思いますが、前項のサンプルで示したように、負の値を指定するとそのマイナス分が段落ブロックの左方向に移動してしまいます。

そこで、左にズレる分は左側余白を設定できるpadding-leftプロパティで調整します。

1文字分を左にずらすなら、1文字分の左余白を作ったうえで設定する、ということです。

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

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