《html+CSS》箇条書きリストの・を変更するlist-style-typeのコピペ

箇条書きリストのCSS

今回は、何かと出番の多い「ul li」で作った箇条書きリストの「・」の部分をlist-style-typeで変えるCSSのまとめなり(´ω`)✧

箇条書きリストとは

CSSなしのデフォルトだとこんな感じ。

ul liの基本のhtml

• ul liの箇条書きリストです。
• ul liの場合はこのように「・」が付きます。

ol liの基本のhtml

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

《CSS》list-style-typeとは

list-style-typeは、箇条書きリストの先頭についている「・」や「数字」の見た目を変えるCSSのプロパティです。

list-style-type: XXXXXX;

プロパティの「XXXXXX」の部分を変更することで見た目を変えることができます。

つまり、

「ul(ol)タグの中（＝セレクタ）のlist-style-type（＝プロパティ）をXXXXXX（＝値）にする」

ということ。

わからない...。

コピペすればいいからわからなくても大丈夫 笑

《CSS》list-style-typeのコピペ一覧

箇条書きリストの「・」や「数字」を消したい

箇条書きリストの「・」や「数字」を消したいときは、list-style-type: none;を指定します。
これはulでもolでも共通です。

ul {list-style-type: none;}

ol {list-style-type: none;}

を先ほどの、ul liとol liの基本のhtmlに使うとこうなります。

• ul liの箇条書きリストです。
• ul liの場合はこのように「・」が付きます。

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

消えた！

箇条書きリストul liの「・」を変更したい

箇条書きリストを「・」にしたい

ul liの箇条書きリストでは「・」が初期値です。
通常何もしなければ「・」になっていますが、Word Pressテーマによっては何かしらのデフォルト値がセットされているかもしれません。
その場合は、

ul {list-style-type: disc;}

CSSの値に「disc」を指定してあげれば「・」になります。

• ul liの箇条書きリストです。
• ul liの場合はこのように「・」が付きます。

箇条書きリストを「circle（白抜きの丸）」にしたい

白抜きの丸にしたいときにはCSSの値に「circle」を指定します。

ul {list-style-type: circle;}

• ul liの箇条書きリストです。
• ul liの場合はこのように「・」が付きます。

箇条書きリストを「square（四角）」にしたい

四角にしたいときにはCSSの値に「square」を指定します。

ul {list-style-type: square;}

• ul liの箇条書きリストです。
• ul liの場合はこのように「・」が付きます。

箇条書きリストol liの「数字」を変更したい

箇条書きリストを「普通の数字」にしたい

ol liの箇条書きリストでは「普通の数字」が初期値です。
通常何もしなければ「普通の数字」になっていますが、Word Pressテーマによっては何かしらのデフォルト値がセットされているかもしれません。
その場合は、

ol {list-style-type: decimal;}

CSSの値に「decimal」を指定してあげれば「普通の数字」になります。

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「二桁の数字」にしたい

01、02、03などの「二桁の数字」にしたいときにはCSSの値に「decimal-leading-zero」を指定します。

ol {list-style-type: decimal-leading-zero;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「小文字のローマ数字」にしたい

「小文字のローマ数字」にしたいときにはCSSの値に「lower-roman」を指定します。

ol {list-style-type: lower-roman;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「漢数字」にしたい

「漢数字（一、二、三……）」にしたいときにはCSSの値に「cjk-ideographic」を指定します。

ol {list-style-type: cjk-ideographic;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「大文字のアルファベット」にしたい

「大文字のアルファベット（A、B、C…）」にしたいときにはCSSの値に「upper-latin」を指定します。

ol {list-style-type: upper-latin;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「小文字のアルファベット」にしたい

「小文字のアルファベット（a、b、c……）」にしたいときにはCSSの値に「lower-latin」を指定します。

ol {list-style-type: lower-latin;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「ひらがなのあいうえお順」にしたい

「ひらがなのあいうえお順」にしたいときにはCSSの値に「hiragana」を指定します。

ol {list-style-type: hiragana;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「カタカナ」にしたい

「カタカナ」にしたいときにはCSSの値に「katakana」を指定します。

ol {list-style-type: katakana;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「いろはにほへと」にしたい

「いろはにほへと」にしたいときにはCSSの値に「hiragana-iroha」を指定します。

ol {list-style-type: hiragana-iroha;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「イロハニホヘト」にしたい

「いろはにほへと」にしたいときにはCSSの値に「katakana-iroha」を指定します。

ol {list-style-type: katakana-iroha;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。

箇条書きリストを「ギリシャ文字」にしたい

「ギリシャ文字」にしたいときにはCSSの値に「lower-greek」を指定します。

ol {list-style-type: lower-greek;}

1. ol liの箇条書きリストです。
2. ol liの場合はこのように「数字」が付きます。