displayプロパティでdisplay: list-itemを指定すると、li要素以外の要素でもリストマーカーが付くなど、li要素と同じような性質を持つようになります。
今回は、displayプロパティでdisplay: list-itemを指定した場合のサンプル表示などを紹介したいと思います。
displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ～ 要素の表示形式を指定するdisplayプロパティ
CSS【 display 】2 ～ list-item（本ページ）
CSS【 display 】3 ～ table
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
li要素は、デフォルトでdisplay: list-itemになっています。
そして、li要素以外の要素も、displayプロパティでdisplay: list-itemを指定すると、li要素と同じような性質を持つようになります。
small要素に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を指定した場合は、そのようなデフォルト設定がないため、別途調整する必要があります。
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がデフォルト値）するのを、ショートハンドでまとめています。
dl要素の中のdt要素とdd要素に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要素は、終了タグが省略できる要素です。
INTERNOUS,inc. All rights reserved.
