どうも。
はじめてということもあり、前回のフレックスボックスの記事を書くのにけっこう時間がかかってしまったので今回は小ワザを。
箇条書きなどのリストでの表現は、文章をわかりやすくするためによく使われますが、2行目以降の改行時に文の先頭が揃わないと、見た目が乱れて読みづらくなります。
本記事では、箇条書きやリストの2行目以降、改行時に文の先頭を揃える方法を解説します。
箇条書きで2行目以降の文の先頭を揃える（2行目以降を1文字下げる）css text-indent プロパティの特徴と解説
結論となるコードはこちら。
<ul>
<li>・Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
<li>・Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
<li>・Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li>
</ul>ul {
li {
padding-left: 1rem;
text-indent: -1rem;
}
}それでは解説。
今回のポイントはテキスト内に”・”が入っているところと、一文ずつliタグに囲われているところです。
cssの方は、padding-left: 1rem; で1rem分スペースを空けて、
text-indent: -1rem;で”・”だけズラすといった具合です。
単位はemでも同じような見た目にはなりますが、フォントサイズによってはremの方が綺麗になるかと思います。
デザインによっては擬似クラスを使わないと表現できないものもありますが、一番簡単な方法はコレだと思うので紹介してみました。
