HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> リスト >> リスト関係のスタイルシートを一括で指定する

リスト関係のスタイルシートを一括で指定する

CSSの書き方

list-style:list-style-typeの値 list-style-imageの値 list-style-positionの値 ;

CSSの詳細情報
プロパティ名 list-style 読み方 リスト・スタイル
初期値 各プロパティの初期値 意味 リストの一括指定
none/各プロパティの設定値
対象 li要素など(dislplay:list-item;と指定した要素を含む)
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「list-style」プロパティは、リスト関連のスタイルシートを一括で指定するスタイルシートです。

「list-style-type」プロパティの値、「list-style-image」プロパティの値、「list-style-position」プロパティの値をそれぞれ並べて記述します。値同士は半角スペースで区切ります。

また、これら3つの値を記述する順序は自由です。また一部のプロパティを省略することもできます。この場合、省略したプロパティはその初期値が与えられたものとして解釈されます。

値(none)

「list-style:none;」と記述することもできます。この場合、リストマークは表示されません。ただし、このように値1つで書いてしまうと他のプロパティを同時に指定することはできません。

優先度

「list-style-type」プロパティと「list-style-image」プロパティを同時に指定した場合は、「list-style-image」プロパティが優先されて表示されます。

CSS/HTMLサンプル

ul { list-style:inside circle; background:#ffdff9; }

中の白いリストマークを要素の中に表示 サンプル