ﾏｰｶｰの種類ﾏｰｶｰの表示位置 画像ﾏｰｶｰﾏｰｶｰを纏めて設定 背景画像ﾏｰｶｰ リストcss ﾘﾌｧﾚﾝｽ へ
マーカーの種類を指定する(CSS)
list-style-type: disc;
　list-style-type は、ul要素、ol要素、li要素、「display:list-item;」を指定した要素に適用できます。
　list-style-type は、リストマーカーの種類を指定するプロパティです。このプロパティは、<ul>タグ（要素）、<ol>タグ（要素）、<li>タグ（要素）の他、displayプロパティで list-item を指定した要素に設定することができます。
　ul { list-style-type: square; }   ol { list-style-type: decimal; }
プロパティ名値説　　明表示例
list-style-type
（CSS 1）		 noneマーカーを表示しない
  • リスト項目
disc黒丸
  • リスト項目
circle白丸
  • リスト項目
square四角
  • リスト項目
decimal数字
  • リスト項目
upper-alpha大文字アルファベット
  • リスト項目
lower-alpha小文字アルファベット
  • リスト項目
upper-roman大文字ローマ数字
  • リスト項目
lower-roman小文字ローマ数字
  • リスト項目
list-style-type
（CSS 2）		 decimal-leading-zero２桁の数字
  1. リスト項目
lower-greek小文字ギリシャ文字
  1. リスト項目
upper-latin大文字ラテン文字
  1. リスト項目
lower-latin小文字ラテン文字
  1. リスト項目
hebrewヘブライ数字
  1. リスト項目
armenianアルメニア数字
  1. リスト項目
georgianグルジア数字
  1. リスト項目
cjk-ideographic漢数字
  1. リスト項目
hiraganaひらがな
  1. リスト項目
katakanaカタカナ
  1. リスト項目
hiragana-irohaいろは
  1. リスト項目
katakana-irohaイロハ
  1. リスト項目
＊ ［CSS 1］の9種類は多くのブラウザで対応していますが、［CSS 2］の12種類は一部のブラウザでしか対応していません。
※ ［CSS 2］は、Firefox は全てに対応、 Internet Exp.8 と Opera は一部に対応、Internet Exp.7 以前は全てに未対応です。
＊ list-style-type は、ul要素、ol要素、li要素のどれに指定しても表示するマーカは同じです。
ただし、ul要素とol要素では「リスト項目」の左側マージンが変わります（この表示例では、上段（CSS 1）をul要素に、下段（CSS 2）をol要素に指定しています）。
マーカーに画像を同時に指定している場合は、画像の表示を優先します。
　★ 使用例とブラウザでの表示 (e1-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e1-1squ { list-style-type: square; }
.e1-1alp { list-style-type: lower-alpha; }
使　用　例   ブラウザの表示
<ul class=e1-1squ>
<li>マーカー種類A</li>
<li>マーカー種類B</li></ul>
  • マーカー種類A
  • マーカー種類B
<ol class=e1-1alp>
<li>マーカー種類1</li>
<li>マーカー種類2</li></ol>
  1. マーカー種類1
  2. マーカー種類2
※ CSS 2 で新たに追加されたプロパティ値（decimal-leading-zero～katakana-iroha）には、Internet Exp.7 以前は未対応です。
関連するページ
CSS スタイルシート表示形式：表示形式（インライン・ブロック・リスト・非表示）を指定する
HTML タグページ マーカー付リスト：マーカー付きリストを作る
HTML タグページ 番号付きリスト：番号付きリストを作る
ﾏｰｶｰの種類ﾏｰｶｰの表示位置 画像ﾏｰｶｰﾏｰｶｰを纏めて設定 背景画像ﾏｰｶｰ リストcss ﾘﾌｧﾚﾝｽ へ
マーカーの表示位置を指定する(CSS)
list-style-position: outside;
　list-style-position は、ul要素、ol要素、li要素、「display:list-item;」を指定した要素に適用できます。
　list-style-position は、リストマーカーの表示位置（外側・内側）を指定するプロパティです。このプロパティは、<ul>タグ（要素）、<ol>タグ（要素）、<li>タグ（要素）の他、displayプロパティで list-item を指定した要素に設定することができます。
　ul { list-style-position: outside; }   ol { list-style-position: inside; }
プロパティ名値説　　明
list-style-position outside マーカーをリストボックスの外側に表示（初期値）
inside マーカーをリストボックスの内側に表示
　★ 使用例とブラウザでの表示 (e1-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e1-2out { list-style-position: outside; }
.e1-2in { list-style-position: inside; }
使　用　例   ブラウザの表示
<ul class=e1-2out>
<li>ﾏｰｶｰ表示位置１<br>マーカーを外側に表示</li>
<li>ﾏｰｶｰ表示位置２</li></ul>
<ul class=e1-2in>
<li>ﾏｰｶｰ表示位置３<br>マーカーを内側に表示</li>
<li>ﾏｰｶｰ表示位置４</li></ul>
  • ﾏｰｶｰ表示位置１
    マーカーを外側に表示
  • ﾏｰｶｰ表示位置２
  • ﾏｰｶｰ表示位置３
    マーカーを内側に表示
  • ﾏｰｶｰ表示位置４
<ol class=e1-2out>
<li>ﾏｰｶｰ表示位置A<br>マーカーを外側に表示</li>
<li>ﾏｰｶｰ表示位置B</li></ol>
<ol class=e1-2in>
<li>ﾏｰｶｰ表示位置C<br>マーカーを内側に表示</li>
<li>ﾏｰｶｰ表示位置D</li></ol>
  1. ﾏｰｶｰ表示位置A
    マーカーを外側に表示
  2. ﾏｰｶｰ表示位置B
  1. ﾏｰｶｰ表示位置C
    マーカーを内側に表示
  2. ﾏｰｶｰ表示位置D
☆ outside と inside の違いは、２行目の書き始めの位置に着目して下さい。
ﾏｰｶｰの種類ﾏｰｶｰの表示位置 画像ﾏｰｶｰﾏｰｶｰを纏めて設定 背景画像ﾏｰｶｰ リストcss ﾘﾌｧﾚﾝｽ へ
マーカーを画像で表示する(CSS)
list-style-image: url(URI);
　list-style-image は、ul要素、ol要素、li要素、「display:list-item;」を指定した要素に適用できます。
　list-style-image は、リストマーカー用の画像を指定するプロパティです。このプロパティは、<ul>タグ（要素）、<ol>タグ（要素）、<li>タグ（要素）の他、displayプロパティで list-item を指定した要素に設定することができます。
　ul { list-style-image: url(mark.gif); }
プロパティ名値説　　明
list-style-image url(URI) ( ) 内に表示する画像ファイルを指定
none 画像なし（初期値）
マーカー用の画像を表示できない場合は、通常のマーカーが表示されます。
　★ 使用例とブラウザでの表示 (e1-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e1-3 { list-style-image: url(mark.gif); }
使　用　例   ブラウザの表示
<ul class=e1-3>
<li>画像マーカーA</li>
<li>画像マーカーB</li>
<li>画像マーカーC</li></ul>
  • 画像マーカーA
  • 画像マーカーB
  • 画像マーカーC
ﾏｰｶｰの種類ﾏｰｶｰの表示位置 画像ﾏｰｶｰﾏｰｶｰを纏めて設定 背景画像ﾏｰｶｰ リストcss ﾘﾌｧﾚﾝｽ へ
マーカーの設定をまとめて行う(CSS)
list-style: disc outside url(URI);
　list-style は、ul要素、ol要素、li要素、「display:list-item;」を指定した要素に適用できます。
　list-style は、リストマーカーの種類、位置、画像をまとめて指定するプロパティです。このプロパティは、<ul>タグ（要素）、<ol>タグ（要素）、<li>タグ（要素）の他、displayプロパティで list-item を指定した要素に設定することができます。
　ul { list-style: circle inside url(mark.gif); }
プロパティ名値　および　説　明
list-style: circle…マーカーの種類 inside…表示位置 url(mark.gif)…画像 ;
初期値<ul>：黒丸など、<ol>：数字 outsidenone 
＊ それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）
マーカーの種類と画像を同時に指定した場合は、画像の表示を優先します。
　★ 使用例とブラウザでの表示 (e1-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e1-4 { list-style: circle inside url(mark.gif); }
使　用　例   ブラウザの表示
<ul class=e1-4>
<li>リスト項目1<br>マーカーをまとめて指定</li>
<li>リスト項目2<br>マーカーをまとめて指定</li>
</ul>
  • リスト項目1
    マーカーをまとめて指定
  • リスト項目2
    マーカーをまとめて指定
☆ マーカーの種類と画像を同時に指定した場合は、画像の表示を優先します。
関連するページ
CSS スタイルシート表示形式：表示形式（インライン・ブロック・リスト・非表示）を指定する
HTML タグページ マーカー付リスト：マーカー付きリストを作る
HTML タグページ 番号付きリスト：番号付きリストを作る
ﾏｰｶｰの種類ﾏｰｶｰの表示位置 画像ﾏｰｶｰﾏｰｶｰを纏めて設定 背景画像ﾏｰｶｰ リストcss ﾘﾌｧﾚﾝｽ へ
マーカーを背景画像で表示する(CSS)
background: url(URI) no-repeat ***;
　background は、全てのタグ（要素）に適用できます。
　background は、背景色や背景画像（並び方、スクロール、位置）をまとめて指定するプロパティです。このプロパティを<li>タグ（要素）に設定すると、リストマーカーを背景画像で表示できます。
　ul { list-style-type: none; }
　li { background: url(mark.gif) no-repeat 0 1px; padding-left: 20px; }
プロパティ名値　および　説　明
backGround: url(mark.gif)
背景画像		 no-repeat
並べ方		 0 1px
表示位置		;
url(mark.gif) … ( ) 内に画像のURIを指定（背景画像の指定）
no-repeat … 背景画像を1つだけ表示（並び方の指定）
0 1px … 左からの距離と上からの距離を指定（表示位置の指定）
表示位置を指定すると、マーカーの位置を微調整することができます（微調整する必要がない場合は、この値を省略します）。
※ 背景の設定方法に関する詳細は、「背景をまとめて指定する」をご覧下さい。
※ 上記の他に、以下の設定が必要になります。
① 通常のマーカーを消す
マーカーの表示が重複しないように、ul要素に list-style-type: none; を指定します。
② 左パディング（余白）を設定する
マーカーの表示領域を確保するため、li要素に padding-left: *px; を指定します。
　★ 使用例とブラウザでの表示 (e1-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .e1-5non { list-style-type: none; }   .e1-5nor { list-style-type: disc; }
.e1-5bg { background: url(mark.gif) no-repeat; padding-left: 15px; }
.e1-5for { list-style-image: url(mark.gif); }
使　用　例   ブラウザの表示
<ul class=e1-5non>
<li class=e1-5nor>通常のマーカー</li>
<li class=e1-5bg>背景画像マーカーA</li>
<li class=e1-5bg>背景画像マーカーB</li>
<li class=e1-5for>画像マーカー</li></ul>
  • 通常のマーカー
  • 背景画像マーカーA
  • 背景画像マーカーB
  • 画像マーカー
☆ マーカーを背景画像にした場合は、マーカーも「リスト項目」の位置に表示します。
関連するページ
CSS スタイルシート背景設定(纏)：背景をまとめて指定する
HTML タグページ マーカー付リスト：マーカー付きリストを作る
ﾏｰｶｰの種類ﾏｰｶｰの表示位置 画像ﾏｰｶｰﾏｰｶｰを纏めて設定 背景画像ﾏｰｶｰ リストcss ﾘﾌｧﾚﾝｽ へ