プログラミング・ITCSS

Blog Article

CSSで点や番号などのリストマーカーを装飾する方法をわかりやすく解説

こんにちは、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;
}

list-styleプロパティにtypeとpositionを同時に指定した例
皆さんは今回学んだことによって、リストを自分好みに修飾できるようにスキルアップしました!素晴らしいです👏

適切な箇所をリストで書くことによって読者は読みやすく感じるため、重要な装飾です。ぜひ今回学んだことを自身の手で試してみてください!

CSSを覚えていき、後々はもっと稼げるようになりたいという方は次の記事を参考にしてみてください。
🫱 ゼロからプログラミングで稼げるようになるまでのロードマップ

また、もっと効率的なプログラミングの学び方を知りたい方は次の記事も読んでみるのがおすすめです。
🫱 プログラミングの効率的な学び方|エンジニアの実体験から

🤗おすすめ

本で体系的にCSSについて学びたいという方にはこちらの本をおすすめします。HTML・CSSの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。HTMLやCSSなど、ぜひ気になるWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容