今回は「CSSでテキストの行頭を揃える方法」を紹介したいと思います。
テキストを箇条書きするときに使える手法です。
【CSS】テキストの行頭を揃える方法
デモはこちら。
しっかりテキストの行頭が揃っていることが分かると思います。
HTML
<!-- 行頭を揃える -->
<ul>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
</ul>
ulとliタグでリストを作成します。
CSS
/* 行頭を揃える */
ul {
width: 300px;
background-color: red;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
counter-reset: item;
}
ul li {
line-height: 1.3;
padding-left: 0.5em;
text-indent: -0.5em;
}
ul li::before {
counter-increment: item;
content: counter(item);
}
ul li:not(:last-child) {
margin-bottom: 20px;
}
テキストの行頭を揃えるために、「padding-left: 0.5em;」で余白を作り「text-indent: -0.5em;」で余白を引いてあげます。
そうすることで、行頭が揃うようになります。
数値は適宜変更してください！
まとめ
以上が、「CSSでテキストの行頭を揃える方法」でした。
