2行目以降のテキストを字下げするCSS設定、インデントの方法 text-indent
下記のオレンジと緑の list を見比べてみてください。
CSS の text-indent を使うと、緑のlistように、2行目以降を字下げすることができます。
断然字下げした方が読みやすくありませんか。
- あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
- かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ
- さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ
- あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
- かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ
- さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ
CSSのマークアップは簡単で、たった２行。それで効果は抜群です。
試してみる価値はありますね。
それでは、その工程を紹介いたします。
list を字下げして読みやすくする
１、HTML で list のコードを作成します
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
２、CSS で text-indent の指定をします
ul li{
padding-left: 1em;
text-indent: -1em;
}
CSSの説明
リストを padding-left で1文字分(1em)右に寄せます。
text-indent で- 1em を指定し、1行目を1文字分左に戻しています。
全角・半角の組み合わせや見出しとするテキストの文字数によってブラウザによる見え方の違いなども出てくると思います。CSSの微調整は必要です。
コンテンツが多い場合はdl要素などで組むのがオススメです！
