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

CSS

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

2018年10月06日 12:00 

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

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

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



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

 

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

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

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

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

 

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

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

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

インデントとは行頭に空白を設けて文字開始位置を他行よりも下がった位置から始めた文字組みのことを、インデントと言います。

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

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

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

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

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

 

まとめ

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

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

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!