★このページでは、CSSの基本的な仕様について解説しています。

リストマークに関する設定は、IE6.0以前、Netscape6.2以前など主要なブラウザで対応が異なる場合があります。

各プロパティの対応状況については、それぞれの項目を参照して下さい。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL11. リストマークに関する設定　その3 ★ リストマークの位置を指定する

　

list-style-position: <値>;

（IE以外のブラウザでは対応していないものもあります。）

リストマークを、項目が表示されるbox領域内行頭に表示するか、領域外に出すかを指定できます。このプロパティに指定できる<値>は、以下の２つです。

outside ... 項目の領域から出して表示する。（デフォルト）

　

inside ... 項目の領域内行頭に表示する。

ol { list-style-image: url("icon1.gif"); 
list-style-position: outside (inside); 
line-height: 1.5em; }

サンプル部分のHTML記述

<ol>
<li>イチゴのショートケーキ<br>
生クリームたっぷりの定番ケーキです。</li>
<li>イチゴのタルト<br>
イチゴとカスタードクリームのハーモニーが絶妙!!</li>
<li>イチゴのヴァシュラン<br>
ストロベリー・アイスクリームをケーキに仕立てました。</li>
</ol>

　

※なお、この例では見やすくするために、行間を「line-height: 1.5em」で指定して通常より広げています。

　

上の例では、リスト全体に対してマークの位置を指定しましたが、項目ごとに指定することも出来ます。

ex.2項目にのみ「inside」を指定

ol { list-style-image: url("icon1.gif"); } 

li.inside { list-style-position: inside); }

サンプル部分のHTML記述

<ol>
<li >イチゴのショートケーキ</li>
<li class="inside">イチゴのタルト</li>
<li >イチゴのヴァシュラン</li>
</ol>

　

　

初級篇2.VOL11. リストマークに関する設定・その2 <<

>> 初級篇2.VOL11. リストマークに関する設定・その4

　

2007.2.15.+2.23.-2.24.