【CSS】箇条書きの先頭記号を四角にするにはlist-style-type:squareを使う!

箇条書きの先頭は基本は

  • いぬ
  • ねこ
  • たぬき

↑こんな感じで黒丸になる。

その先頭の黒丸を四角に変えたい場合は、list-style-typeプロパティでsquareを指定すれば一発だ。

list-style-typeプロパティというのは、箇条書きリストの先頭の記号を変えるプロパティ。

初心者にとってCSSのプロパティはどれがどれだかが本当にわかりにくい。

私は下記のように訳して覚えている

list(箇条書きリストの)-style(見た目の)-type(形)

→日本語訳はめちゃくちゃだけど、意外と覚えやすいのだ。

squareを指定すれば□になるし、none(無し)を指定すれば先頭の記号を消すことも出来る。

今回は箇条書きリストの先頭を□にしたいので以下のように記述する

HTML

CSS

そうすると↓のように先頭の記号が四角になる。

  • いぬ
  • ねこ
  • たぬき

 

関連記事はこちら!

箇条書きリストを横並びにするにはdisplay:flex;を使う!

おすすめの記事