投稿者 投稿日: カテゴリー EC・WEBノウハウ
リストタグを使って、リスト形式にすることはできたけど、アルファベットやひらがなで表示したいということありますよね。
そこで今回はそんなリストマーカーの種類を指定する、list-style-typeの使い方を紹介します。
まず、リストタグそのものについてあまり理解されていない方は、先にこちらをご確認下さい。
1.list-style-typeとは
list-style-typeは、リストマーカーの種類を指定するプロパティです。
リストマーカーとは、「●」や数字などのリストの先頭に表示される記号や数列のことを指します。
2.list-style-typeの指定方法
リストマーカーの指定はCSSを使って行います。
ここでは、例としてマーカーを表示しない方法を見ていきましょう。この形さえ覚えてしまえば、他のマーカーの指定方法も簡単にできます。
このように行います。
“list-style-type: none;”は、何も設定しないということを意味します。そのため、該当するテキストはリストスタイルで表示されますが、何の装飾もつきません。
簡単ですよね？
この形は覚えてしまいましょう。あとは、値の部分を変えるだけで好みのリストマーカーを指定することができます。
3.list-style-typeの指定方法を値別に紹介
それでは、list-style-typeの指定方法を下記の二つに分けて見ていきましょう。
- 記号別
- 数列別
まずは、記号別から見ていきます。
3-1.記号別
3-1-1.disc
黒丸で表示されます。
3-1-2.circle
白丸で表示されます。
3-1-3.square
黒四角で表示されます。
3-2.数列別
続いて、数列別に見ていきます。
3-2-1.decimal
算用数字で表示されます。
3-2-2.decimal-leading-zero
先頭に0をつけた算用数字で表示されます。
3-2-3.lower-roman
小文字のローマ数字で表示されます。
3-2-4.upper-roman
大文字のローマ数字で表示されます。
3-2-5.armenian
アルメニア数字で表示されます。
3-2-6.georgian
グルジア数字が表示されます。
3-3.アルファベット別
最後にアルファベット別に見ていきます。
3-3-1.lower-alpha
小文字のアルファベットで表示されます。
3-3-2.upper-alpha
大文字のアルファベットで表示されます。
まとめ
いかがでしたでしょうか？
実は、今回紹介した以外にもリストマーカーのデザインがあります。
ただし、ブラウザによって対応していないものもあるので、気を付けてくださいね。
齋藤 竹紘（さいとう・たけひろ）
株式会社オルセル 代表取締役 ／ 「うるチカラ」編集長
Experience｜実務経験
2007年の株式会社オルセル創業から 17 年間で、EC・Web 領域の課題解決を
4,500 社以上 に提供。立ち上げから日本トップクラスのEC事業の売上向上に携わり、
“売る力” を磨いてきた現場型コンサルタント。
Expertise｜専門性
技術評論社刊『今すぐ使えるかんたん Shopify ネットショップ作成入門』（共著、2022 年）ほか、
AI × EC の実践知を解説する書籍・講演多数。gihyo.jp
Authoritativeness｜権威性
自社運営メディア
「うるチカラ」で AI 活用や EC 成長戦略を発信し、業界の最前線をリード。
運営会社は EC 総合ソリューション企業株式会社オルセル。
Trustworthiness｜信頼性
東京都千代田区飯田橋本社。公式サイト alsel.co.jp および uruchikara.jp にて
実績・事例を公開。お問い合わせは
info@alsel.co.jp まで。
この記事を読んだ人は、こんな記事も読んでいます
