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

こんにちは (^^)/

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

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

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

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

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

インデント(字下げ)

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

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

.indent{
   text-indent:1em;
}

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

.indent{
   text-indent:100px;
}

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

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

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

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

ぶら下げインデント

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

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

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

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

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

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

わかりやすく背景色を消すと…

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

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

タイトルとURLをコピーしました