html CSS

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

箇条書きリストのCSS

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

箇条書きリストとは

Reino
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(=値)にする」

ということ。

カエルくん
わからない...。
コピペすればいいからわからなくても大丈夫 笑
Reino

《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の場合はこのように「数字」が付きます。
  • この記事を書いた人
  • 最新記事
Reino

Reino

佐賀県唐津市生まれ。東京育ちのフリーランス。
2013年小学館CanCam新世代モデルセミファイナリスト。
現役のときは青山学院大学、現在は慶應義塾大学で人生2回目の大学生、哲学を学んでいます。
SEOコンサル、Webマーケター、Webデザイナー、広告運用代理などのマルチスキルを生かしたWeb集客のお仕事が得意😄
個人でリカレント教育のメディアも運営しています。

プライベートブログ→美容やサガン鳥栖やファッション

私の別の顔😎→ UK Rockをこよなく愛するバンドThe Charlene.(シャーレイン)のボーカルMiuとして、作詞&作曲の大部分を手がけています。CDはタワレコなどにて全国発売中。詳しくはこちら

-html, CSS

© 2020 mieux