【CSS】ぶら下げインデントにするには【覚え書】

こんにちは (^^)/
必要になるとHTML&CSS事典を引っ張り出す★さやびーでございます。

今回のお題は「インデント」です。

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

私の希望はこちら  「※」記号だけが飛び出た感じにしたいんです。

記号以外のテキスト左端、つまり2行目以降を一文字分字下げしたいんです。

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をコピーしました