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

2019年9月25日 2020年12月10日

箇条書きの先頭は基本は

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

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

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

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

プログラミング小僧は、

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

を決めるプロパティと覚えている
→日本語訳はめちゃくちゃだけど、意外と覚えやすいのだ。

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

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

HTML

<ul>
  <li>いぬ</li>
　<li>ねこ</li>
　<li>たぬき</li>
</ul>

<ul>

</ul>

CSS

ul{
  list-style-type:square;
}

ul{

list-style-type:square;

}

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

ちなみに今回はulタグにlist-style-typeを入れたが、liタグに直接入れてもOKだ。

ちなみに現役のプログラマーによると、応用を聞かせたり、デザインの幅を利かせるために、現場ではulタグやliタグに直接プロパティを指定するよりは、classを設定して、プロパティを指定するのが多いらしい。

カテゴリー