はじめに
私はHTMLでリストを書くときに、キーボードで入力する「・」と「list-style-type: disc」を指定する違いがわからずどっちでもいいじゃんと思いながら記述していました。
しかし明確な使い分けがあったので共有したいと思います!
その使い分けとは
それは「list-style-type: disc」を指定することにより、改行位置を統一させることができる(2枚目の写真)ことです!
直接「・」を入力した方が簡単で記述も減りますが、見やすさで比べたら明らかに統一されている方がいいです!
具体的な書き方
index.html
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
style.css
ul {
list-style-type: disc; /* 中点 */
list-style-position: inside; /* ul範囲に中点を入れる */
text-indent: -18px; /* 上記だけでは改行が揃わないためインデント幅を指定する(必要に応じて大きさ変更) */
padding-left: 18px; /* -18px左によっているのでpaddingで調整 */
}
まとめ
コードを記述しているときに「どっちでもいいや」というものはほとんどないと思う。
そんな中自分は、「どっちも変わらないと思うから楽な方で記述しよう」という考えを持っていたので、なぜこんな書き方をするのかを怠らず考えていきたい。