WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > list-style
list-style  リスト 

リストのマーカーの指定をまとめて行う。

このエントリーをはてなブックマークに追加

<UL>タグや<OL>タグなどのリストの先頭に表示するマーカーを設定します。。

書式

list-style: マークの種類 url(マーカーの画像) マーカーの位置 ;
(例) list-style: disc url(/img/arrow.gif) inside ;

パラメーター

●マーカー
 マーカーの種類を circle や square などを指定。その他のマークはこちら ●マーカーの画像
 urlで画像を指定
●マーカーの位置
・outside …マーカーを外側に表示。
・inside …マーカーを内側に表示。

マークの種類のみ指定

<ul style="list-style: square;">
<li>あいうえお</li>
<li>かきくけこ</li>
</ul>
  • あいうえお
  • かきくけこ

マークに画像を指定

<ol style="list-style: disc url('/img/arrow_circle.gif');">
<li>あいうえお</li>
<li>かきくけこ</li>
</ol>
  1. あいうえお
  2. かきくけこ

マークの画像をinsideに指定

<ol style="list-style: disc url('/img/arrow_circle.gif') inside;">
<li>あいうえお</li>
<li>かきくけこ</li>
</ol>
  1. あいうえお
  2. かきくけこ