Home/Menu

スタイルなCSSの基礎講座

リスト

◆ はじめに

つぎは、リストのプロパティです。
リスト項目のマーカーの種類をいろいろ変えられます。

尚、このプロパテはブラウザのサポート状態により、指定通りにならないケースが多々あるようです。

◆ list-style-typeプロパティ

list-style-typeプロパティは、リスト項目のマーカーの種類を設定します。
設定値とサンプルは、以下の通りです。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
li要素,displayプロパティの値がlist-itemの要素discyesNN6は完璧,IE5.5はイマイチ
none
マーカーを表示しません。
----------CSS2 ソース------------------------------------------------
.marksmp1{
    list-style-type: none;
}
---------- HTML4.01 ソース ------------------------------------------
<ul class="marksmp1">
<li><a href="../chai.htm">ちゃいちゃん天使のページ</a>です。</li>
<i><a href="../src/htmlmain.htm">ストリクトなHTMLの基礎講座</a>です。</li>
<li><a href="../src/cssmain.htm">スタイルなCSSの基礎講座</a>です。</li>
<ul>

以下、CSS2 ソースとHTML4.01 ソースは同様なので割愛します!

disc
塗りつぶされた丸になります。
circle
線で描かれた丸になります。
square
線で描かれた四角になります。
lower-roman
ローマ数字の小文字になります。
upper-roman
ローマ数字の大文字になります。
lower-greek
ギリシャ文字の小文字になります。
decimal
算用数字になります。
decimal-leading-zero
頭に 0 をつけた算用数字になります。
lower-latin,lower-alpha
アルファベットの小文字になります。
upper-latin,upper-alpha
アルファベットの大文字になります。
cjk-ideographic
漢数字になります。
hiragana
ひらがなで「あいうえお」順になります。
katakana
カタカナで「アイウエオ」」順になります。
hiragana-iroha
ひらがなで「いろは」順になります。
katakana-iroha
カタカナで「イロハ」順になります。
hebrew
ヘブライ数字になります。
armenian
アルメニア数字になります。
georgian
グルジア数字になります。

◆ list-style-imageプロパティ

ist-style-imageプロパティは、リスト項目のマーカーに画像を設定します。
サンプルは、以下の通りです。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
li要素,displayプロパティの値がlist-itemの要素noneyesNN6,IE5.5
----------CSS2 ソース------------------------------------------------
.marksmpx{
    list-style-image: url("../img/cos1.gif");
}
---------- HTML4.01 ソース ------------------------------------------
<ul class="marksmpx">
<li><a href="../chai.htm">ちゃいちゃん天使のページ</a>です。</li>
<i><a href="../src/htmlmain.htm">ストリクトなHTMLの基礎講座</a>です。</li>
<li><a href="../src/cssmain.htm">スタイルなCSSの基礎講座</a>です。</li>
<ul>

◆ list-style-positionプロパティ

マーカーの位置をちょっと変えられます。
設定値は、outside(初期値)、insideがあります。
以下は、サンプルです。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
li要素,displayプロパティの値がlist-itemの要素outsideyesNN6,IE5.5

inside

outside(初期値)

----------CSS2 ソース------------------------------------------------
.marksmpy{
    list-style-type: square;
    list-style-position: inside;
}
.marksmp2{
    list-style-type: disc;
}
----------HTML4.01 ソース---------------------------------------------
<h4>inside</h4>
<ul class="marksmpy">
<li><a href="../chai.htm">ちゃいちゃん天使のページ</a>です。<br>
この病んでいる世の中だからこそ、是非、、読んでほしい!</li>
<li><a href="../src/htmlmain.htm">ストリクトなHTMLの基礎講座</a>です。<br>
間違いのご指摘は、大歓迎!</li>
<li><a href="../src/cssmain.htm">スタイルなCSSの基礎講座</a>です。<br>
同じく、大歓迎!</li>
</ul>
<h4>outside(初期値)</h4>
<ul class="marksmp2">
<li><a href="../chai.htm">ちゃいちゃん天使のページ</a>です。<br>
この病んでいる世の中だからこそ、是非、、読んでほしい!</li>
<li><a href="../src/htmlmain.htm">ストリクトなHTMLの基礎講座</a>です。<br>
間違いのご指摘は、大歓迎!</li>
<li><a href="../src/cssmain.htm">スタイルなCSSの基礎講座</a>です。<br>
同じく、大歓迎!</li>
</ul>

◆ list-styleプロパティ

マーカー関連の一括指定です。
必要な値を任意な順序でスペースで区切って指定します。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
li要素,displayプロパティの値がlist-itemの要素未定義yesNN6,IE5.5

◆ marker-offsetプロパティ

マーカーとリスト項目との間隔を設定するプロパティです。
設定値は、auto, 実数値+単位。

適用要素初期値継承対応ブラウザ(NN6,IE5.5のみテスト)
displayプロパティの値がmarkerの要素autonoNN6,IE5.5ともに未サポート

Home/Menu/スタイルシート概説リファレンス