リスト内のテキスト改行をインデントですっきり見せるためのテクニック

こんにちは！社員Aです👩

弊社では10/4〜10/7まで社員旅行でタイに来ており、このブログは事前投稿しているものなのですが、旅の記録などは随時Instagramにアップしておりますので、ぜひご覧ください！

www.instagram.com

ゆにメモ │ ユニバースのWEB技術・カスタマイズブログ (@universe.fukuoka) • Inst...

https://www.instagram.com/universe.fukuoka/

23 Followers, 0 Following, 6 Posts - See Instagram photos and videos from ゆにメモ │ ユニバースのWEB技術・カスタマイズブログ (@universe.fukuoka)

さて、今回はリスト内のテキスト改行ですっきり見せるためのテクニックをご紹介します。

リスト内で改行すると、見栄えが悪くなる…

リスト内のテキストが長文だった場合、画面幅が縮まるとテキストの途中で改行されてしまい、見栄えが悪くなってしまいます。

list-style-type:none;などを指定していると、起きてしまいます。下記が実例です。

テキストが折り返しても、行頭を揃えるためのテクニックをご紹介します。

2行目以降を1文字下げるインデント

この行頭を揃えるためには、2行目以降を1文字下げるCSSの「インデント」機能を使います。

インデントはWordなどの文章でもよく使われる機能ですね。

リストに対して、下記のCSSを記述します。

ul li{
	padding-left:1em;
	text-indent:-1em;
}

上記は、まずpadding-leftで全体を右に寄せ、text-indentで1行目の行頭だけが左に飛び出るような仕組みになっています。

このCSSを記述することにより、リスト内の行頭を揃えることができました。

行頭の文字や画像のサイズによって、1emの部分は調整が必要です。

リスト内だけでなく、pタグやdivタグなどのテキスト内でも活用できます！

まとめ

CSSをたったの2行追記するだけで、見栄えもよく可読性も上がりました。

特にスマホ版などの画面が小さいデバイスで折り返されてしまうテキストやリストで活用できます。