コニファ・ロゴ

csstest:[CSS]"display:list-item"の動作確認

既存のテキストがp要素などでできていて、それをlist表示にして使い回す場合、"display:list-item"が便利です。元のhtmlの構成を変えること無く、CSSの追加だけで再構築できます。

サンプル(1)は、p要素で作られたテキストです。この構成を変えること無く、listアイテムにします。
サンプル(2)は、"display:list-item"を使って、簡単なlistにしています。
サンプル(3)は、"display:list-item"を使い、"list-style-image"でマーカーを画像にしています。他の"list-style-type"が指定されていても、list-style-image"が優先されます。
サンプル(4)は、"display:list-item"を使い、「list-style-type: "* "」で、マーカーを全角テキストのアスタリスクにしています。しかし、Firefox以外のブラウザでは動作しない可能性があります。現時点で同様のマーカーにするなら、次の(5)のようにしたほうが良いかもしれません。
サンプル(5)は、"display:list-item"を使い、「list-style-type:none」でデフォルトのマーカーを消し、「::before疑似要素」により、"* "を、p要素の前にマーカーとして表示しています。

サンプル(1)・元になるp要素のテキスト

ダミーテキスト1番目のp要素ダミーテキスト1番目のp要素

ダミーテキスト2番目のp要素ダミーテキスト2番目のp要素

ダミーテキスト3番目のp要素ダミーテキスト3番目のp要素

サンプル(1)のhtmlソース

<div class="box test"> 
    <p>ダミーテキスト1番目のp要素ダミーテキスト1番目のp要素</p>
    <p>ダミーテキスト2番目のp要素ダミーテキスト2番目のp要素</p>
    <p>ダミーテキスト3番目のp要素ダミーテキスト3番目のp要素</p>
</div>

サンプル(2)・(1)をlistに変更

ダミーテキスト1番目のp要素ダミーテキスト1番目のp要素

ダミーテキスト2番目のp要素ダミーテキスト2番目のp要素

ダミーテキスト3番目のp要素ダミーテキスト3番目のp要素

サンプル(2)のCSSソース

.test1 p {
	display: list-item;
	margin:0 0 0 20px;
	}

サンプル(3)・マーカーに画像を使ったlistに変更

ダミーテキスト1番目のp要素ダミーテキスト1番目のp要素

ダミーテキスト2番目のp要素ダミーテキスト2番目のp要素

ダミーテキスト3番目のp要素ダミーテキスト3番目のp要素

サンプル(3)のCSSソース

.test2 p {
	display: list-item;
	margin:0 0 0 55px;
	list-style-image: url("images/p-element3.png") ;
	}

サンプル(4)・マーカーにテキストを使ったlistに変更(非対応のブラウザあり)

ダミーテキスト1番目のp要素ダミーテキスト1番目のp要素

ダミーテキスト2番目のp要素ダミーテキスト2番目のp要素

ダミーテキスト3番目のp要素ダミーテキスト3番目のp要素

サンプル(4)のCSSソース

.test3 p {
	display: list-item;
	margin:0 0 0 20px;
	list-style-type: "* ";
	}

サンプル(5)・「::before疑似要素」を使って、マーカーにテキスト

ダミーテキスト1番目のp要素ダミーテキスト1番目のp要素

ダミーテキスト2番目のp要素ダミーテキスト2番目のp要素

ダミーテキスト3番目のp要素ダミーテキスト3番目のp要素

.test4 p {
	display: list-item;
	margin:0;
	list-style-type:none;
	}
.test4 p::before {
	content: "* ";
	}

 

戻るボタン