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. かきくけこ