【HTML/CSS】テキストの2行目を1行目と揃えたい(ぶら下げインデント)

文頭に「・」や「※」、アイコンを付けることはよくありますよね。

・サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

ただ、2行目以降が1行目と揃うといいのにな、と思いませんか？

文頭を揃えるだけで見栄えがいい！！

というわけで、さっそく試してみましょう。

インデント（字下げ）の方法
文頭にアイコンを使う場合
疑似要素にアイコンを使う場合
まとめ

インデント（字下げ）の方法

インデントって、スペース入れればいいんじゃないの？

spica

スペースはNGです！

ホームページの見た目はCSSで整えます。

Wordなどではおなじみの「ぶら下げインデント」を、CSSでもやってみましょう。

CSSへの記述はたった2つだけです。

p {
text-indent: -1em;
padding-left: 1em;
}

分かりやすく解説をしていきます。

text-indent: -1em;

「text-indent」とは、1行目の字下げを指定のことです。

「1em」とは、1文字分のことです。

ですから、「text-indent: 1em;」と指定すると、「1行目を1文字分字下げする」ということになります。

試しに「text-indent: 1em;」を指定してみましょう。

p {
text-indent: 1em;
}

アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。

1行目が1文字分下がっているのが分かりますね。

では、今度は「text-indent: -1em;」を指定してみましょう！

p {
text-indent: -1em;
}

「-1em」としたことで、1行目が1文字分飛び出してしまいました！

padding-left: 1em;

「text-indent」は1行目だけに効果があるので、2行目以降の調整には「padding-left」を使います。

「padding」は、コンテンツ周囲の空きを指定するプロパティです。

これはpadding: 0;です

これはpadding: 20px;です

「padding-left: 1em;」として指定すると、

p {
padding-left: 1em;
}

左側に1文字分の空きができましたね！

text-indent: -1em; padding: 1em;を組み合わせる

p {
text-indent: -1em; 
padding-left: 1em; 
}

1行目の1文字目が左に飛び出て、2行目以降は揃っています。
ですので、文頭になにか記号を入れると、

◆アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。

ぶら下げインデント、成功しましたね！

「text-indent: -1em;」で1行目を左にずらし、
「padding-left: 1em;」で全体を右にずらすんだね！

spica

そうです！
なので、記号を文頭にいれることによって、2行目以降が1行目と揃うんです。

「検出力」と「快適動作」を追求したウイルス対策ソフト

文頭にアイコンを使う場合

「1em」は「1文字分」とお伝えしましたが、ではアイコンを使うとどうなるでしょうか。

今度は崩れてしまいました。

Font Awesomeのアイコンがinline-block要素のため、親要素のtext-indentを継承してしまい、表示崩れを起こしているようです。

アイコンに「text-indent: 0;」と、表示の調整用に「text-align: center;」と「width: 1.2em;」を設定してみます。

アイコン周りにゆとりを持たせるため、親要素のtext-indentとpadding-leftも調整しました。

「text-indent」と「padding-left」の値は必ず同じにしましょう！

p {
text-indent: -1.5em;
padding-left: 1.5em;
}
.list-icon {
text-indent: 0;
text-align: center;
width: 1.2em;
}

きれいに揃いました！！

spica

アイコンを設置するときは少しコツがいりますね。

ブラウザで確認しながら数値を調整しましょう。

疑似要素にアイコンを使う場合

リスト形式でしたら、アイコンは疑似要素に設定したいですよね。

「::before（または::after）」に「margin-left」と「margin-right」を設定します。
marginの数値はブラウザを見ながら少しずつ調整しましょう。

p {
text-indent: -1.5em; 
padding-left: 1.5em;
}
p::before {
content: '\f2bd';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-left: 2px;
margin-right: 1px;
}

HTMLだとコードがごちゃつくな～って時には、疑似要素にアイコンを設定してみてくださいね！

まとめ

いざという時に知っていると便利なぶら下げインデント。

これを使えるだけで、サイトの見栄えがぐっと良くなります！

アイコンの種類によっては、「〇〇em」「〇〇px」で細かな調整が必要です。

CodePenでいろいろ試してみてくださいね。

See the Pen Untitled by spica (@spica_blog) on CodePen.