SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.03.24
  • CATEGORY
TITLE

【CSS】list-styleプロパティについて!初心者の向け講座

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は、「【CSS】list-styleプロパティについて!」の講座になります。

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • リストに対してCSSをどのように記述方法が分からない方へ
  • list-styleプロパティについて初めて学ぶ方へ

今回は「ul、ol、liタグ」に対してlist-styleプロパティを適応させる解説になります。

list-styleプロパティについて

list-styleプロパティについて

list-styleプロパティについて簡単にご説明いたします。

list-styleプロパティ

  • list-style-typeリスト項目のマーカーの表示を変える方法
  • list-style-positionリスト項目のマーカーの位置を指定する方法
  • list-style-imageリスト項目のマーカーの画像を指定する方法
  • list-styleリスト項目のマーカーをまとめて指定する方法

list-style-typeでマーカーの表示を変える方法について

list-style-typeでマーカー表示を変える方法について

ulの黒丸、olの番号付きリストの表示を変更することは可能です。
その際にはCSSlist-style-typeを使用します。表示できるマーカーはブラウザによって異なります。

HTMLファイル

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>jQuery</li>
	<li>PHP</li>
</ul>

ulリストで使える「list-style-type」について

discを指定したリスト(デフォルト)になります。ulとliの箇条書きではこの黒丸が初期値です。

  • HTML
  • CSS
  • jQuery
  • PHP
ul {list-style-type: disc;}

circleを指定したリスト(白丸)になります。

  • HTML
  • CSS
  • jQuery
  • PHP
ul {list-style-type: circle;}

squareを指定したリスト(黒い四角)になります。

  • HTML
  • CSS
  • jQuery
  • PHP
ul {list-style-type: square;}

olリストで使える「list-style-type」について

decimalを指定したリスト
(1〜100の数字)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: decimal;}

decimal-leading-zeroを指定したリスト
(01〜100の二桁の数字)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: decimal-leading-zero;}

cjk-ideographicを指定したリスト
(漢数字)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: cjk-ideographic;}

lower-romanを指定したリスト
(小文字ローマ数字)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: lower-roman;}

upper-romanを指定したリスト
(大文字ローマ数字)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: upper-roman;}

lower-greekを指定したリスト
(小文字のギリシャ語)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: lower-greek;}

hiraganaを指定したリスト
(あいうえお順)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: hiragana;}

katakanaを指定したリスト
(アイウエオ順)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: katakana;}

hiragana-irohaを指定したリスト
(いろは順)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: hiragana-iroha;}

katakana-irohaを指定したリスト
(イロハ順)

  1. HTML
  2. CSS
  3. jQuery
  4. PHP
ol {list-style-type: katakana-iroha;}

マーカーを消す方法「list-style-type」について

noneを指定しマーカーを消します

  • HTML
  • CSS
  • jQuery
  • PHP
ul {list-style-type: none;}

list-style-typeについて

  • list-style-typeはマーカーの表示を変えるプロパティーと覚えておきましょう。
  • マーカーの種類が多いですがSEOには関係ありません。
  • マーカーを消す際にはnoneを使用します。

list-style-positionでマーカーの位置を指定する方法について

list-style-positionでマーカーの位置を指定する方法について

list-style-positionプロパティでは、リスト項目のマーカーの位置を指定します。
外側、内側の指定がおこなえます。

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>jQuery</li>
	<li>PHP</li>
</ul>

outsideでマーカーを外側に表示させる方法

outside(初期値)を指定しマーカーを外側に表示させる

  • HTML
  • CSS
  • jQuery
  • PHP
ul {
    list-style-position: outside;
	list-style-type: disc;
}
ul li {
	background-color: #f1f1f1;
}

insideでマーカーを内側に表示させる方法

insideを指定しマーカーを内側に表示させる

  • HTML
  • CSS
  • jQuery
  • PHP
ul {
    list-style-position: inside;
	list-style-type: disc;
}
ul li {
	background-color: #f1f1f1;
}

list-style-typeについて

  • list-style-positionはマーカーの位置を変えるプロパティーと覚えておきましょう。
  • outside(初期値)は外側の指定になります。
  • insideは内側の指定になります。

list-style-imageでマーカーの画像を指定する方法について

list-style-imageでマーカーの画像を指定する方法について

list-style-imageプロパティでは、リスト項目のマーカーの画像を指定します。
noneが初期値(画像を表示しない)になっておりますので、今回はnoneは紹介いたしません。

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>jQuery</li>
	<li>PHP</li>
</ul>

image: url()でマーカーの画像を指定する

  • HTML
  • CSS
  • jQuery
  • PHP
ul {
	list-style-image: url(画像パス);
}

各リストにクラス名を指定し違う画像を指定する
今回はクラス名でご紹介いたしますが、
擬似クラス「上からn番目の要素にスタイルを適用する方法」:nth-child(番号)でも可能です。

関連記事

【CSS】初心者向け擬似要素、擬似クラスについて理解しましょう!

【CSS】初心者向け擬似要素、擬似クラスについて解説しております。現場でよく使用されるbefore、afterなどの計11個の紹介しております、これをマスターすれば現場で問題ないでしょう。

  • サルくん
  • キリンくん
  • ゾウくん
  • クマくん
ul {
	background-color: #24422b;
	color: #ffffff;
}

ul li.icon01 {
    list-style-image: url(画像パス);
}

ul li.icon02 {
    list-style-image: url(画像パス);
}

ul li.icon03 {
    list-style-image: url(画像パス);
}

ul li.icon04 {
    list-style-image: url(画像パス);
}

list-style-imageについて

  • list-style-imageはマーカーの画像を変えるプロパティーと覚えておきましょう。
  • url画像パスを間違えないように入力しましょう。
  • liタグに各クラス名や擬似クラスを指定し違う画像も入れることもできます。

list-styleでショートハンドで記述する方法について

list-styleでショートハンドで記述する方法について

list-styleプロパティではリスト項目をまとめて指定ができます。
値を指定するに際には半角スペースで区切り、typepositionimageの順で
指定をおこないます。

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>jQuery</li>
	<li>PHP</li>
</ul>

表示と位置を指定してみましょう
type(表示を白丸に)、position(位置を内側に)の2点のみ指定の方法

  • HTML
  • CSS
  • jQuery
  • PHP
ul {
  list-style: circle inside;
}

表示と位置、画像を指定してみましょう
type(表示を非表示)、position(位置を内側に)、image(画像をアイコン)の3点を指定の方法

  • HTML
  • CSS
  • jQuery
  • PHP
ul {
  list-style: circle inside url(画像パス);
}

list-styleについて

  • list-styleはマーカーのショートハンドプロパティーと覚えておきましょう。
  • list-styleはマーカーのリスト項目をまとめて指定できます。
  • 値を指定するに際には半角スペースを忘れないようにしましょう。
  • typepositionimageの順で指定をおこないます。

前回の記事はHTMLについて解説しております。
「【HTML】ul、ol、liタグの使い方について!初心者の向け講座」をご確認ください。

関連記事

【HTML】ul、ol、liタグの使い方について!初心者の向け講座

【HTML】ul、ol、liタグの使い方について!記事を書いております。
初心者の向けに分かりやすく、ul、ol要素の違いや入れ子にする方法、改行のしたかについて
書いております。ここではHTMLの記述の仕方について学びましょう。

まとめ

今回はこれで以上です。
前回の記事と合わせて読んでもらえるとさらに理解が深まるとおもいます。

POINT
  • list-style-typeはマーカーの表示を変えるプロパティーと覚えておきましょう。
  • list-style-positionはマーカーの位置を変えるプロパティーと覚えておきましょう。
  • list-style-imageはマーカーの画像を変えるプロパティーと覚えておきましょう。
  • list-styleはマーカーのショートハンドプロパティーと覚えておきましょう。
  • list-styleはマーカーのリスト項目をまとめて指定できます。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top