リストに関するプロパティを説明します。
■リストのマーカーの種類を変更する
書式 list-style-type:マーカーの種類
リストのマーカーの種類を変更できるプロパティです。
リスト用タグ<UL><OL><LI>に適用できます。
マーカーには以下の種類があります。
| マーカーの種類 | 表示 |
| disc |
|
| circle |
|
| square |
|
| decimal |
|
| upper-roman |
|
| lower-roman |
|
| upper-alpha |
|
| lower-alpha |
|
| none |
|
Netscape、Firefox、Opera用スタイルもありますが
ここでは割愛します。
記述例
--- CSSの記述 ---
/* OLタグ内のリストマーカーをsquareに */
UL.list_style1{
list-style-type:square;
}
/* OLタグ内のリストをupper-romanに */
OL.list_style2{
list-style-type:upper-roman;
}
/* 一部のリスト項目マーカーをlower-alphaに */
LI.list_style3{
list-style-type:lower-alpha;
}
--- HTMLの記述 ---
<UL
class="list_style1">
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Flash</LI>
</UL>
<OL
class="list_style2">
<LI>Perl</LI>
<LI>PHP</LI>
<LI>RUBY</LI>
</OL>
<OL
class="list_style2">
<LI>Strict</LI>
<LI
class="list_style3">Transitional</LI>
<LI>Frameset</LI>
</OL>
ブラウザで表示
- HTML
- CSS
- JavaScript
- Flash
- Perl
- PHP
- RUBY
- Strict
- Transitional
- Frameset
■リストのマーカーの位置を指定する
書式 list-style-position:マーカーの位置
リストのマーカーの位置を指定できます。
マーカー位置指定方法に「outside」「inside」があります。
outside：リスト領域の外側に表示(デフォルト)
inside：リスト領域の内側に表示
記述例
--- CSSの記述 ---
OL.list_posi1{
list-style-position:inside;
}
OL#list_posi2{
list-style-position:outside;
}
--- HTMLの記述 ---
<OL
class="list_posi1">
<LI>マーカー内側<br>マーカー内側</LI>
</OL>
<OL
ID="list_posi1">
<LI>マーカー外側<br>マーカー外側</LI>
</OL>
ブラウザで表示
- マーカー内側
マーカー内側
- マーカー外側
マーカー外側
■リストのマーカーを画像で表示する
書式 list-style-image:url();
リストのマーカーを画像にすることができます。
url()に画像ファイル名とパスを記述します。
url()の代わりに「none」と指定すると画像なしのリストになります。
（その場合デフォルトのマーカーになります）
マーカーの種類を指定した場合、画像の表示が優先されます。
記述例
--- CSSの記述 ---
UL.list_image1{
list-style-image:url(../images/AT.gif);
}
UL.list_image2{
list-style-image:none;
}
--- HTMLの記述 ---
<UL class="list_image1">
<LI>火</LI>
<LI>水</LI>
<LI>風</LI>
<LI>土</LI>
</UL>
<UL class="list_image2">
<LI>春</LI>
<LI>夏</LI>
<LI>秋</LI>
<LI>冬</LI>
</UL>
ブラウザで表示
■リストの設定を一括指定する
書式 list-style:マーカーの種類・位置・画像
リストのマーカー設定を<OL><UL><LI>にまとめて指定することができます。
複数指定する場合は半角スペースで区切ります。
マーカーの種類・位置・画像を指定できますが、種類と画像を同時に指定した場合は画像が優先されます。
| マーカーの種類 | 表示 |
| disc |
|
| circle |
|
| square |
|
| decimal |
|
| upper-roman |
|
| lower-roman |
|
| upper-alpha |
|
| lower-alpha |
|
| none |
|
マーカーの位置
outside：リスト領域の外側に表示(デフォルト)
inside：リスト領域の内側に表示
マーカーの画像指定
url(画像のパスとファイル名)
記述例
/* マーカーの位置と画像を指定 */
UL.in_square{
list-style:inside url(../images/AT.gif)
}
/* 種類と位置を変更 */
OL.out_lr{
list-style:lower-roman outside
}
--- HTMLの記述 ---
<UL
class="in_square">
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Flash</LI>
</UL>
<OL
class="out_lr">
<LI>Perl</LI>
<LI>PHP</LI>
<LI>RUBY</LI>
</OL>
ブラウザで表示
- HTML
- CSS
- JavaScript
- Flash
- Perl
- PHP
- RUBY
