Title

リスト要素のスタイルを指定する

目次 (INDEX)

list-styleとは

list: 読み: リスト
意味: 表、一覧表
style: 読み: スタイル
意味: 様式、やり方

目次に戻る

list-styleプロパティの概要

このプロパティはHTML文章中のリスト要素のマーカーのスタイルを設定するために用いられます。

list-styleプロパティは、リストス要素のマーカースタイルの一括プロパティであり、派生する個別プロパティに以下の3つが存在します。

list-style-type
list-style-position
list-style-image

つまり、list-styleプロパティに、この個別プロパティの設定値を個別指定、または半角スペースで区切り三つの値を同時に指定することで細かな設定をすることができます。値の記述は任意の順番で問題ありません。省略された値には初期値が設定されます。

目次に戻る

実機サンプルとサンプルコード

このプロパティの設定値を個別指定、または半角スペースで区切り三つの値を同時に指定することができます。省略された値は初期値になります。

list-style-typeプロパティとlist-style-imageプロパティの二つを指定した場合には、 list-style-imageの値が優先され、画像が利用できない場合にlist-style-typeの値が適用されます。

<ul> <li>リスト項目</li> <li>リスト項目</li> <li>リスト項目</li> </ul>

構文

この構文で記載している各値は、設定する順番が入れ替わっても問題ありません。

list-style-type
list-style-position
list-style-image

セレクター{list-style: typeの値 positionの値 imageの値;}

初期値: disc outside none

list-styleプロパティは以下の3つの個別プロパティを一括で設定することができる総合プロパティです。各個別プロパティの初期値が総合プロパティの初期値でもあります。

list-style-type: disc;
list-style-position: outside;
list-style-image: none;

つまり、list-styleプロパティの初期値は「disc」,「outside」,「none」となります。

個別プロパティの一つ目のstyle-typeは、リストの先頭に付くマークの種類を指定するプロパティです。値は、discです。 discは円盤や円板ディスクなどの意味があり、サンプルのように・「点」で表示されます。

個別プロパティの二つ目のstyle-positionは、マークの位置を指定します。初期値の値は　outsideです。 outsideの意味は外側、外部などの意味があります。

個別プロパティの三つ目のstyle-imageは、マークを画像で代替するために使用します。画像を使用する場合にはurlメソッドを使って画像URLを指定しますが、初期値は noneになっています。 noneは、無し、無いという意味で画像は表示されません。

list-styleプロパティの値に noneを指定すると list-style-typeプロパティと list-style-imageプロパティの値は noneに設定され、マークの表示はされなくなります。

<ul> <li>リスト項目</li> <li>リスト項目</li> <li>リスト項目</li> </ul>

ul{
	list-style: disc outside none;
}

目次に戻る

キーワード値: none

none とは「ない」という意味です。

noneキーワードは個別プロパティのlist-style-typeとlist-style-imageのキーワード値ですが、総合プロパティであるlist-styleに、このキーワードを使うとlist-style-typeにnoneキーワードを指定したことになります。これは言葉通り、マークは表示されません。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: none;}

目次に戻る

キーワード値: armenian

armenian とは「アルメニアン」と読みます。アルメニア語いう意味です。

このキーワードは個別プロパティのlist-style-typeのキーワード値であり、総合プロパティであるlist-styleに、このキーワードを使うとlist-style-typeにarmenianキーワードを指定したことになります。

armenianキーワードを指定すると、アルメニア共和国で使用されている数字で自動で番号が振られます。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: armenian;}

目次に戻る

キーワード値: circle

circleとは「サークル」と読みます。円や円周と言う意味です。

circleキーワードを指定すると、下記のような中が空洞の小さな丸になります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: circle;}

目次に戻る

キーワード値: decimal

decimal とは「デシマル」と読みます。英語の翻訳では少数や数値という意味になります。

decimalキーワードを指定すると数値が連番で配置されます。連番はデフォルト値の「1」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: decimal;}

目次に戻る

キーワード値: decimal-leading-zero

decimal-leading-zero とは「デシマル-リーディング-ゼロ」と読みます。 decimalとは数値の意味で、leadingとは先導や誘導という意味です。 zeroは数字の0です。

decimal-leading-zeroキーワードを指定するとデフォルト値の01から連番が振られます。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: decimal-leading-zero;}

目次に戻る

キーワード値: georgian

georgian とは「ジョージア」と読みます。 georgianとは、ジョージア語という意味です。

georgianキーワードを指定するとジョージア語の数値が連番で配置されます。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: georgian;}

目次に戻る

キーワード値: lower-alpha

lower-alpha とは「ロウァ-アルファ」と読みます。 lowerとは、より低いという意味でalphaは、初めとか第一などの意味があります。

lower-alphaキーワードを指定すると小文字の英語のアルファベットが配置されます。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: lower-alpha;}

目次に戻る

キーワード値: lower-greek

lower-greek とは「ロウァ-グリーッ」と読みます。 lowerは、上記と同じでより低いという意味でgreekとは、ギリシャ人、ギリシャ風などの意味があります。

lower-greekキーワードを指定すると小文字のギリシャ語が配置されα「アルファ」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: lower-greek;}

目次に戻る

キーワード値: lower-latin

lower-latin とは「ロウァ-ラテン」と読みます。 lowerは、上記と同じでより低いという意味でlatinとは、ラテン語やラテン系などの意味があり、ラテン文字を日本ではローマ字と呼ばれています。

Internet Explorer 7 以前は対応していないようです。

lower-latinキーワードを指定すると小文字のローマ字のアルファベットが配置され、「a」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: lower-latin;}

目次に戻る

キーワード値: lower-roman

lower-roman とは「ロウァ-ローマン」と読みます。 lowerは、上記と同じでより低いという意味でromanとは、ローマやローマ風などの意味があります。

lower-romanキーワードを指定すると小文字のローマ数字が配置され、「ⅰ」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: lower-roman;}

目次に戻る

キーワード値: square

square とは「スクエア」と読みます。 squareは、正方形や四角などの意味があります。

squareキーワードを指定すると塗りつぶしの小さな四角形が配置されます。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: square;}

目次に戻る

キーワード値: upper-alpha

upper-alpha とは「アッパー-アルファ」と読みます。 upperは、上位や上部などの意味がありalphaは初めや第一などの意味があります。

upper-alphaキーワードを指定すると大文字のアルファベット順に「A」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: upper-alpha;}

目次に戻る

キーワード値: upper-latin

upper-latin とは「アッパー-ラテン」と読みます。 upperは、上位や上部などの意味がありlatinはラテン系やラテン語などの意味があります。

upper-latinキーワードを指定すると大文字のローマ字でアルファベット順に「A」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: upper-latin;}

目次に戻る

キーワード値: upper-roman

upper-roman とは「アッパー-ローマン」と読みます。 upperは、上位や上部などの意味がありromanとは、ローマやローマ風などの意味があります。

upper-romanキーワードを指定すると大文字ののローマ数字が配置され「Ⅰ」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: upper-roman;}

目次に戻る

キーワード値: outside

outside とは、「アウトサイド」と読み、外側という意味があります。マークはリストの内部から外に配置されます。

outsideキーワードは、list-style-positionの初期値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: outside;}

目次に戻る

キーワード値: inside

inside とは、「インサイド」と読み、内部という意味があります。マークがリスト内部の領域に表示されます。

insideキーワードは、list-style-positionの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: inside;}

目次に戻る

実験段階のキーワード値: hiragana

hiragana とは「ひらがな」と読みます。

hiraganaキーワードは、日本語の「ひらかな」が配置され「あ」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: hiragana;}

目次に戻る

実験段階のキーワード値: katakana

katakana とは「カタカナ」と読みます。

katakanaキーワードは、日本語の「カタカナ」が配置され「ア」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: katakana;}

目次に戻る

実験段階のキーワード値: hiragana-iroha

hiragana-iroha とは「ひらがな-いろは」と読みます。

hiragana-irohaキーワードは、日本語の「いろはにほへと・・・」が配置され「い」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: hiragana-iroha;}

目次に戻る

実験段階のキーワード値: katakana-iroha

katakana-iroha とは「カタカナ-イロハ」と読みます。

katakana-irohaキーワードは、日本語のカタカナで「イロハニホヘト・・・」が配置され「イ」から始まります。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: katakana-iroha;}

目次に戻る

キーワード値: カスタム文字

カスタム文字は「自分の目的に応じて使用を変更する」ということです。つまり、キーワード値に無い、任意の文字や記号などを独自のマークにすることができるということです。

キーワードに文字を使用する場合には、「'文字'」シングルコーテーション、もしくは「"文字"」ダブルコーテーションで文字を囲まなければいけません。

これは、個別プロパティlist-style-typeの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: '※ ';}

目次に戻る

画像を利用する: url関数

urlとは「ユーアールエル」と読みます。正式名称はUniform Resource Locator「ユニフォームリソースロケータ」といい、データの保存場所を知らせる住所のようなものであり、「アドレス」とも呼ばれています。

ここでの urlは、使用するマーカーの画像の保存場所を指定します。

これは、個別プロパティlist-style-imageの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: url(画像のURL);}

目次に戻る

画像を利用する: linear-gradient関数

linear-gradientとは、「リニア-グラディエント」と読み、線状の勾配という意味があります。

linear-gradient() 関数は、二つ以上の色を使用して、連続的な変化のあるグラデーションを生成したい時に使用します。

これは、個別プロパティlist-style-imageの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: linear-gradient(関数の引数);}

linear-gradient関数については、 linear-gradient のページを参照していただければ幸いです。

目次に戻る

画像を利用する: radial-gradient関数

radial-gradientとは、「ラジアル-グラディエント」と読み、放射状の勾配という意味があります。

radial-gradient()関数は、二つ以上の色を使用して連続的な変化のあるグラデーションが原点から放射状に広がります。形状は円形や楕円形「だえんけい」となります。

これは、個別プロパティlist-style-imageの設定値です。

<ul>

<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>

</ul>

ul{list-style: radial-gradient(関数の引数);}

radial-gradient関数については、 radial-gradient のページを参照していただければ幸いです。

目次に戻る

グローバル値

list-styleプロパティに対してのグローバルキーワードは以下の3つです。ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

inheritは親要素の値の継承を促します。
initialは値を初期値のdisc outside noneに戻します。
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

div{list-style: グローバル値;}

目次に戻る

補足説明

ul要素、ol要素などのリスト項目にのみ適用可能
親要素の値を継承する

目次に戻る

まとめ

ここでは、リスト要素にCSSを設定した場合の適用状態が確認できます。コードの部分をクリックすると、サンプルにCSSが反映されます。

list-style: disc outside none;

list-style: none;

list-style: circle;

list-style: decimal outside;

list-style: decimal inside;

<ul> <li>リスト項目</li> <li>リスト項目</li> <li>リスト項目</li> </ul>

目次に戻る