CSS【 display 】2 ~ list-item

Red ball pen crossing off items from a cloud checklist

displayプロパティでdisplay: list-itemを指定すると、li要素以外の要素でもリストマーカーが付くなど、li要素と同じような性質を持つようになります。
今回は、displayプロパティでdisplay: list-itemを指定した場合のサンプル表示などを紹介したいと思います。

displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ~ 要素の表示形式を指定するdisplayプロパティ
CSS【 display 】2 ~ list-item(本ページ)
CSS【 display 】3 ~ table

目次

1.display: list-item
2.small要素にdisplay: list-itemを指定
3.p要素にlist-style-imageを指定
4.dt要素とdd要素にdisplay: list-itemを指定

1.display: list-item

li要素は、デフォルトでdisplay: list-itemになっています。
そして、li要素以外の要素も、displayプロパティでdisplay: list-itemを指定すると、li要素と同じような性質を持つようになります。

2.small要素にdisplay: list-itemを指定

small要素にdisplay: list-itemを指定すると、次のような表示になります。

li要素は、デフォルトでdisplay: list-itemになっています
li要素以外の要素も、display: list-itemを指定するとリストのように表示されます
インラインの要素でも、display: list-itemを指定するとブロックレベルになって改行されます

 
small要素では通常付かないマーカーが付いています。
そして、インラインのsmall要素が、li要素と同様にブロックレベルになって改行されています。

ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #ccc; padding:1em; margin:0; line-height:1.2em}
div#sample small {
    display:list-item;
    margin-left:1em}

(HTML)
<div id="sample">
    <small>li要素は、デフォルトでdisplay: list-itemになっています</small>
    <small>li要素以外の要素も、display: list-itemを指定するとリストのように表示されます</small>
    <small>インラインの要素でも、display: list-itemを指定するとブロックレベルになって改行されます</small>
</div>

CSSで左マージンを指定しています(margin-left:1em)。
li要素は、ブラウザのデフォルトで、マーカー用のスペースや字下げが設定されていますが、li要素以外の要素にdisplay:list-itemを指定した場合は、そのようなデフォルト設定がないため、別途調整する必要があります。

▲目次へ戻る

3.p要素にlist-style-imageを指定

p要素にlist-style-imageで画像を指定すると、次のような表示になります。

p要素にlist-style-imageで画像を指定しています

リストマーカー部分が、list-style-imageで指定した画像です

指定した画像のサイズは、幅12px、高さ18pxです

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #ccc; padding:1em; margin:0}
div#sample p {
    margin:0;
    display:list-item;
    list-style:url(img/img01.jpg) inside}

(HTML)
<div id="sample">
    <p>p要素にlist-style-imageで画像を指定しています</p>
    <p>リストマーカー部分が、list-style-imageで指定した画像です</p>
    <p>指定した画像のサイズは、幅12px、高さ18pxです</p>
</div>

list-styleプロパティは、リストスタイルに関するショートハンドプロパティです。
list-style-imageプロパティで画像のURLを指定し、list-style-positionプロパティでinsideを指定(outsideがデフォルト値)するのを、ショートハンドでまとめています。

▲目次へ戻る

4.dt要素とdd要素にdisplay: list-itemを指定

dl要素の中のdt要素とdd要素にdisplay: list-itemを指定すると、次のような表示になります。

dl要素とdt要素とdd要素を使用しています

dt要素とdd要素にdisplay: list-itemを指定しています

display: list-itemを指定したので、リストマーカーが付いています

このリストマーカーは画像です

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #ccc; padding:1em; margin:0}
dl#sample dt,
dl#sample dd {
    display:list-item; list-style:url(img/img01.jpg) inside; margin:0 0 0 2em}
dl#smp3 dt {list-style-image:none; list-style-type:square; margin-left:0}

(HTML)
<dl id="sample">
    <dt>dl要素とdt要素とdd要素を使用しています
    <dd>dt要素とdd要素にdisplay: list-itemを指定しています
    <dd>display: list-itemを指定したので、リストマーカーが付いています
    <dd>このリストマーカーは画像です
</dl>

dt要素とdd要素は、終了タグが省略できる要素です。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です