箇条書きの先頭は基本は
- いぬ
- ねこ
- たぬき
↑こんな感じで黒丸になる。
その先頭の黒丸を四角に変えたい場合は、list-style-typeプロパティでsquareを指定すれば一発だ。
list-style-typeプロパティというのは、箇条書きリストの先頭の記号を変えるプロパティ。
初心者にとってCSSのプロパティはどれがどれだかが本当にわかりにくい。
私は下記のように訳して覚えている
list(箇条書きリストの)-style(見た目の)-type(形)
→日本語訳はめちゃくちゃだけど、意外と覚えやすいのだ。
squareを指定すれば□になるし、none(無し)を指定すれば先頭の記号を消すことも出来る。
今回は箇条書きリストの先頭を□にしたいので以下のように記述する
HTML
1 2 3 4 5 | <ul> <li>いぬ</li> <li>ねこ</li> <li>たぬき</li> </ul> |
CSS
1 2 3 | ul{ list-style-type:square; } |
そうすると↓のように先頭の記号が四角になる。
- いぬ
- ねこ
- たぬき
関連記事はこちら!