0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

お母さんでもわかる「・」中点について

Last updated at Posted at 2022-08-20

はじめに

私はHTMLでリストを書くときに、キーボードで入力する「・」と「list-style-type: disc」を指定する違いがわからずどっちでもいいじゃんと思いながら記述していました。
しかし明確な使い分けがあったので共有したいと思います!

その使い分けとは

スクリーンショット 2022-08-20 13.17.48.png
スクリーンショット 2022-08-20 13.20.23.png

それは「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で調整 */
  }

まとめ

コードを記述しているときに「どっちでもいいや」というものはほとんどないと思う。
そんな中自分は、「どっちも変わらないと思うから楽な方で記述しよう」という考えを持っていたので、なぜこんな書き方をするのかを怠らず考えていきたい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?