【CSS】text-indentを活用した2行目以降を回り込みさせない箇条書きの作り方

コーディング

以前、olタグやulタグなどのリストタグの使い方について紹介いたしました。
（関連記事：【HTML】リスト用タグ(ul・ol・dl)の使い分け）

今回はリストタグで作った箇条書きリストをより見やすくするためのcssを使ったちょっとした工夫をご紹介します。

箇条書きや注意書きを書く際に、文章の先頭に「1」や「※」などの数字や記号を付けることもありますが、何もしないと2行目以降の1文字目が記号の下に回り込んでしまい読みにくくなってしまいます。

箇条書きの2行目の回り込み例

【個人情報の第三者提供について】
当社は、個人情報保護法その他の法令に基づき開示が認められる場合を除くほか、あらかじめお客様の同意を得ないで、個人情報を第三者に提供しません。但し、次に掲げる場合は上記に定める第三者への提供には該当しません。
・当社が利用目的の達成に必要な範囲内において個人情報の取扱いの全部又は一部を委託する場合
・合併その他の事由による事業の承継に伴って個人情報が提供される場合

これは当社のプライバシーポリシーの一部分ですが、箇条書き部分が長文になると黒丸の下に文字が回り込んで、1文1文がわかりにくいです。

ですが、cssのtext-indentタグとpaddingタグを使うことで黒丸の下に回りこむことなく、読みやすいリストを簡単に作ることができます。

text-indent=字下げ

cssのtext-indentタグは1文字目を字下げする効果があります。
原稿用紙の作文でいうところの段落の始めは1文字空ける、そんなイメージです。

STEP1　text-indentで1文字分空ける

以下では見出し、通常テキスト部分はpタグで作り、箇条書き部分はulタグを使っています。
そしてliタグに対して、text-indent:-1em;をかけています。
これにより、黒丸を含む1文字目が1文字分左に寄っています。
（マイナスをつけると左に寄ります）

See the Pen text-indent by spiqa design (@spiqa_design) on CodePen.

※pタグとulタグの余白はリセットしています。

STEP2　paddingタグで右に戻す

次はpaddingタグで左に寄った分を右に戻します。

See the Pen text-indent＆padding by spiqa design (@spiqa_design) on CodePen.

padding-leftに1emをかけて左側に1文字分余白をつけると、text-indentで1文字ズレた分がキレイに揃います。

まとめ

力業で疑似要素や背景画像を使ったりすればできますが、この方法を使えばcss2行で完結に書くことができます。

また、この2行目に回り込みをさせない箇条書きリストはプライバシーポリシーや利用規約だけでなく、よくある質問のQ&Aなどでも活用できます。
先頭の記号も黒丸や数字だけでなく、Font Awesomeのようなアイコンツールを使うことでグッとデザインの幅が広がるので是非ご活用ください。

この記事をシェアする