こんにちは、Mochiです。
リストってどうやって装飾するんだろう？リストの点ってどうやって消すんだっけ？🤔
そんな方に向けて、リストの装飾方法をわかりやすく解説します。ぜひ、学んでいきましょう！
🎨list-style：リストマーカーを装飾
list-styleプロパティを使うことで、<ul>タグや<ol>タグのリストマーカーの装飾ができます。リストマーカーとは黒点のような、リストの先頭に表示される記号のことを表します。簡単にリストマーカーを装飾したい場合はlist-styleプロパティが役立ちます。
<ul>、<ol>タグってなんだっけ？という方は記事「HTMLでリストを作るul・ol・liタグをわかりやすく解説」を読むのが、深い理解につながるためおすすめです！
では早速list-styleプロパティを使って、リストを装飾していきましょう。まずはリストマーカーの種類を変更してみましょう。
list-type：リストマーカーの種類
list-styleプロパティにtypeを指定することでリストマーカーの種類を変更することができます。
ul {
list-style: square;
}
squareを指定することで、黒点を黒の四角形に変更することができます。
では、どのような種類が用意されているのか見ていきましょう。
まず、箇条書きリスト（<ul>タグ）のリストマーカーの種類には以下のようなものがあります。
ul {
list-style: none;
}
ul {
list-style: disc;
}
ul {
list-style: circle;
}
ul {
list-style: square;
}
次に、番号付きリスト（<ol>タグ）のリストマーカーの種類には以下のようなものがあります。
ol {
list-style: decimal;
}
ol {
list-style: decimal-leading-zero;
}
ol {
list-style: lower-alpha;
}
ol {
list-style: upper-alpha;
}
ol {
list-style: lower-roman;
}
ol {
list-style: upper-roman;
}
よりマニアックな種類も紹介します。
ol {
list-style: hiragana;
}
ol {
list-style: katakana;
}
ol {
list-style: hiragana-iroha;
}
ol {
list-style: katakana-iroha;
}
ol {
list-style: cjk-ideographic;
}
ol {
list-style: lower-greek;
}
ol {
list-style: hebrew;
}
ol {
list-style: armenian;
}
ol {
list-style: georgian;
}
以上がリストの種類です。紹介したものが全ての種類ではないですが、皆さんが使いたいものは網羅されていると思います。
では、次はリストマーカーの位置を変更してみましょう。
list-position：リストマーカーの位置
list-styleプロパティにpositionを指定することでリストマーカーの位置を変更することができます。
ul {
list-style: outside;
}
ul {
list-style: inside;
}
outsideを指定することで、リストマーカーがボックスの外側に付きます。insideを指定することで、リストマーカーがボックスの内側に付きます。色付けすることによって、違いは明確です。
🎉まとめ
list-styleプロパティを使ったリストマーカーの装飾方法を解説しました。今回学んだtypeとpositionは同時に指定することができます。
.type-position {
list-style: hiragana inside;
}
皆さんは今回学んだことによって、リストを自分好みに修飾できるようにスキルアップしました！素晴らしいです👏
適切な箇所をリストで書くことによって読者は読みやすく感じるため、重要な装飾です。ぜひ今回学んだことを自身の手で試してみてください！
CSSを覚えていき、後々はもっと稼げるようになりたいという方は次の記事を参考にしてみてください。
🫱 ゼロからプログラミングで稼げるようになるまでのロードマップ
また、もっと効率的なプログラミングの学び方を知りたい方は次の記事も読んでみるのがおすすめです。
🫱 プログラミングの効率的な学び方｜エンジニアの実体験から
