構文 | |
---|---|
list-style : list-style-type || list-style-image || list-style-position; list-style-type : [type]; list-style-image : url | none; list-style-position : outside | inside; |
|
プロパティ/設定値 | 意味 |
list-style: list-style-type list-style-image list-style-position; | リストマークの種類、位置、画像をスペースで区切って、任意の順で1~3個指定可能。 |
デフォルト:「タグ毎のスタイル初期値」を参照 | |
list-style-type: disc; | 黒丸(・)(初期値) |
list-style-type: circle; | 白丸(◦) |
list-style-type: square ; | 四角(▪) |
list-style-type: decimal ; | 数字(1,2,3,4,5...) |
list-style-type: decimal-leading-zero; | 2桁の数字(01,02,03,04,05...) |
list-style-type: lower-roman; | 小文字のローマ数字(i,ii,iii,iv,v...) |
list-style-type: upper-roman; | 大文字のローマ数字(I,II,III,IV,V...) |
list-style-type: lower-greek; | 小文字の古代ギリシャ文字(α,β,γ...) |
list-style-type: lower-latin; | 小文字のアルファベット(a,b,c・・・) |
list-style-type: upper-latin; | 大文字のアルファベット(A,B,C・・・) |
list-style-type: armenian; | 伝統的なアルメニア数字 |
list-style-type: georgian; | 伝統的なグルジア数字 |
list-style-type: lower-alpha; | 小文字のアルファベット(a,b,c・・・) |
list-style-type: upper-alpha; | 大文字のアルファベット(A,B,C・・・) |
list-style-type: none ; | リストマークなし |
list-style-type: 独自のマーカー ; | @counter-styleに独自に指定したマーカー(注1) |
デフォルト:「タグ毎のスタイル初期値」を参照 | |
list-style-image: url(); | url()のカッコ内に画像ファイルのurlを指定 |
list-style-image: none; | 画像ファイルの指定なし(初期値) |
デフォルト:「タグ毎のスタイル初期値」を参照 | |
list-style-position: outside; | リスト内容の領域の外側に表示される(初期値) |
list-style-position: inside; |
リスト内容の領域の内側に表示される |
デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 5px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css_list-style-t{
list-style : armenian;
}
.css_list-type{
list-style-type : armenian;
}
.css_list-style-t-p1{
list-style : georgian inside;
}
.css_list-t-p1{
list-style-type : georgian;
list-style-position : inside;
}
.css_list-style-t-p2{
list-style : hiragana-iroha outside;
}
.css_list-t-p2{
list-style-type : hiragana-iroha;
list-style-position : outside;
}
.css_list-style-t-i{
list-style : disc url(../../../image/com_ya1.gif);
}
.css_list-t-i{
list-style-type : disc;
list-style-image : url(../../../image/com_ya1.gif);
}
<!-- html -->
<div class="common">
<div class="cssTitle">list-styleにtype指定<br>(armenian アルメニア数字)</div>
<div>
<ol class="css_list-style-t">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-style-type指定<br>(armenian アルメニア数字)</div>
<div>
<ol class="css_list-type">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-styleにtype,position指定<br>(georgian グルジア数字,inside)</div>
<div>
<ol class="css_list-style-t-p1">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-style-type,list-style-position指定<br>(georgian グルジア数字,inside)</div>
<div>
<ol class="css_list-t-p1">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-styleに@counter-styleのtype指定<br>(hiragana-iroha いろは,outside)</div>
<div>
<ol class="css_list-style-t-p2">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-style-typeに<br>@counter-styleのtype指定<br>
(hiragana-iroha いろは,outside)</div>
<div>
<ol class="css_list-t-p2">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-styleにtype,image指定<br>(disc 黒丸)</div>
<div>
<ol class="css_list-style-t-i">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
<div class="cssTitle">list-style-type,list-style-image指定<br>(disc 黒丸)</div>
<div>
<ol class="css_list-t-i">
<li>リストスタイル1<br>改行</li>
<li>リストスタイル2<br>改行</li>
<li>リストスタイル3<br>改行</li>
</div>
関連するCSS(STYLE) | |
---|---|
list-style-image | リストマークの画像 |
list-style-position | リストマークの表示位置 |
list-style-type | リストマークの種類 |