トップ ＞ スキル ： Web ＞ CSSリファレンス

Web

各CSSのプロパティ詳細3

リスト関係

list-style-type、list-style-image、list-style-position、list-style

リストのマークや番号の形式を指定する

list-style-type:種類

list-style-typeプロパティは、リストマークの種類を指定します。list-style-imageプロパティで画像が指定されている場合は、その画像が優先となります。
ul要素、ol要素で囲まれたli要素のマークの種類が変更できます。

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

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { list-style-type:square;}
            .type2 { list-style-type:upper-alpha;}
    	</style>

HTML

    	<ul class="type1">
        	<li>文字テキストの箇条書き</li>
    		<li>文字テキストの箇条書き</li>
            <li>文字テキストの箇条書き</li>
        </ul>
        <ul class="type2">
        	<li>文字テキストの箇条書き</li>
    		<li>文字テキストの箇条書き</li>
            <li>文字テキストの箇条書き</li>
        </ul>
リストマーク指定

リストのマークを画像に指定する

list-style-image:url(URL)

list-style-imageプロパティは、リストのマークとして表示させたい画像を指定します。

値
画像ファイルのパス指定 url(画像ファイルのパス)

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type { list-style-image:url(mark.png);}
    	</style>

HTML

    	<ul class="type">
        	<li>文字テキストの箇条書き</li>
    		<li>文字テキストの箇条書き</li>
            <li>文字テキストの箇条書き</li>
        </ul>
リストのマークに画像を指定

リストの表示・回り込みを指定する

list-style-position:表示位置

list-style-positionプロパティは、リストのマークをリスト項目の表示領域の外側に表示するか、内側に表示するかを指定します。

値
マークの外側 outside
マークの内側 inside

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type1 { list-style-position:inside;}
            .type2 { list-style-position:outside;}
    	</style>

HTML

    	<ul class="type1">
        	<li>文字テキストの箇条書き<br />箇条書き</li>
    		<li>文字テキストの箇条書き<br />箇条書き</li>
            <li>文字テキストの箇条書き<br />箇条書き</li>
        </ul>
        <ul class="type2">
        	<li>文字テキストの箇条書き<br />箇条書き</li>
    		<li>文字テキストの箇条書き<br />箇条書き</li>
            <li>文字テキストの箇条書き<br />箇条書き</li>
        </ul>
リストの表示・回り込み指定

リスト関係をまとめて指定する

list-style:リスト関連のプロパティ

list-styleプロパティは、リストのマークに関連するプロパティの値をまとめて指定します。必要な値を任意の順序で半角スペースで区切って指定します。値として、noneを指定してしまうとマークは表示されなくなります。


■ サンプルコードと結果

CSS

    	<style type="text/css">
        	.type { list-style:url(mark.png) disc inside;}
    	</style>

HTML

    	<ul class="type">
        	<li>文字テキストの箇条書き<br />箇条書き</li>
    		<li>文字テキストの箇条書き<br />箇条書き</li>
            <li>文字テキストの箇条書き<br />箇条書き</li>
        </ul>
リスト関係をまとめて指定

【各CSSのプロパティ詳細3】