Loose-Info.com

Last Update 2019/12/25


TOP - CSS1(Cascading Style Sheets, level 1) - list-style

リストに関連するスタイルをまとめて設定します。

下記の項目を順番に関係なく任意に記述します。
list-style-type
list-style-image
list-style-position

(例)

使用画像 : list_img1.gif
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- UL.test1 {list-style: inside} UL.test2 {list-style: url(list_img1.gif) outside} UL.test3 {list-style: outside square} OL.test1 {list-style: outside decimal} OL.test2 {list-style: inside lower-alpha} --> </STYLE> </HEAD> <BODY> <UL class="test1"> <LI>リスト1 1行目<BR> リスト1 2行目 <LI>リスト2 1行目<BR> リスト2 2行目 <LI>リスト3 1行目<BR> リスト3 2行目 </UL> <UL class="test2"> <LI>リスト1 1行目<BR> リスト1 2行目 <LI>リスト2 1行目<BR> リスト2 2行目 <LI>リスト3 1行目<BR> リスト3 2行目 </UL> <UL class="test3"> <LI>リスト1 1行目<BR> リスト1 2行目 <LI>リスト2 1行目<BR> リスト2 2行目 <LI>リスト3 1行目<BR> リスト3 2行目 </UL> <BR> <OL class="test1"> <LI>リスト1 1行目<BR> リスト1 2行目 <LI>リスト2 1行目<BR> リスト2 2行目 <LI>リスト3 1行目<BR> リスト3 2行目 </OL> <OL class="test2"> <LI>リスト1 1行目<BR> リスト1 2行目 <LI>リスト2 1行目<BR> リスト2 2行目 <LI>リスト3 1行目<BR> リスト3 2行目 </OL> </BODY> </HTML>