リストのいろいろなプロパティを指定できるlist-styleプロパティ
list-style

　list-styleプロパティは、list-style-imageプロパティ、list-style-positionプロパティ、list-style-typeプロパティの3つのプロパティをまとめて設定ができるショートハンドプロパティです。

基本データ

構文 セレクタ{list-style: 値;}
継承 ○
値
list-style-imageプロパティ、list-style-positionプロパティ、list-style-typeプロパティのそれぞれの値
　
効果 list-style-imageプロパティやlist-style-positionプロパティ、list-style-typeプロパティを3つまとめて設定できる
初期値 それぞれの個別プロパティの初期値
適用個所 リスト項目要素

例：

  • ほげ
    ほげ
  • ほげ
    ほげ
  • ほげ
    ほげ
li.sample1 { list-style : inside url("../images/arrow.gif") ; }
li.sample2 { list-style : outside square; }

<ul>
<li class="sample1">ほげ<br>ほげ</li>
<li class="sample2">ほげ<br>ほげ</li>
<li class="sample1">ほげ<br>ほげ</li>
</ul>

動作Webブラウザ

Internet Explorer IE 5.5以上
Firefox Firefox 1以上
Safari Safari 1.3以上
Opera Opera 9.2以上
Chrome Chrome 2以上
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("ID属性値").style.listStyle

jQueryを使った参照方法

$('【セレクタ】').css('list-style','【値】');
$('【セレクタ】').css({'list-style':'【値】'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT