CSSでリストの先頭に数字や「・」、画像などを表示!

CSSでリストの先頭に数字や「・」、画像などを表示!
この記事は約7分で読めます。
広告

リストの先頭に「1. 2. 3.」や「・」や画像を付けて、リストを分かりやすくしたいや、デザイン性を付けたい時などに便利な方法のご紹介です。
特に難しいことはしてないけど種類が結構あるので、選んで自分の好きなスタイルを付けてね!

リストの前に数字(1. 2. 3. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: decimal;
}

リストの前に2ケタの数字(01. 02. 03. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: decimal-leading-zero;
}

リストの前に小文字アルファベット(a. b. c. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: lower-alpha;
}

リストの前に大文字アルファベット(A. B. C. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: upper-alpha;
}

リストの前に黒丸(•)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: disc;
}

リストの前に白丸(◦)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: circle;
}

リストの前に黒い四角(▪)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: square;
}

リストの前に小文字のローマ数字(ⅰ. ⅱ. ⅲ. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: lower-roman;
}

リストの前に大文字のローマ数字(Ⅰ. Ⅱ. Ⅲ. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: upper-roman;
}

リストの前にギリシャ文字(α. β. γ. …)

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: lower-greek;
}

リストの前に好きな文字

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-type: "@";
}

リストの前に好きな画像

  • Agri Tech(アグリテック)農業における最新技術を活用して、効率的な農業を実現する取り組みです。
  • Ed Tech(エドテック)教育分野における技術の導入により、教育の質を向上させる試みです。
  • Fin Tech(フィンテック)金融サービスにおける情報技術の活用を指します。
li {
  list-style-image: url(https://hajimete.org/wp-content/uploads/2023/09/marker.png);
}

コメント

タイトルとURLをコピーしました