【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

<li>要素じゃない要素に display: list-itemプロパティ を指定すれば、<li>要素と同じように先頭にリストマーカー（●とか）を付けたり、インラインの要素でも <li>要素のようにブロックレベルになるんです。

<li>要素はブラウザデフォルトで display: list-itemになっているのですが、他の要素にも適用できるんですね。

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく　←今ココ

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

display: list-item で 要素にリストマーカーを付ける

下のサンプルは、<small>要素をリストっぽくしています。
普通は付くはずがないマーカーが付いてますね。
しかも、インラインの <small>要素が <li>要素と同じくブロックレベルになって改行されています。これは使えます。

表示の価格には消費税は含まれておりません 合計金額1万円以上（税抜き）の場合は送料は無料です 代引の場合は別途代引き手数料をいただきます

上のサンプルの HTMLです。

<div id="smp1">
  <small>表示の価格には消費税は含まれておりません</small>
  <small>合計金額1万円以上の場合は送料は無料です</small>
  <small>代引の場合は別途代引き手数料をいただきます</small>
</div>

サンプルの CSSです。

div#smp1 {
	border:solid 1px #ccc;
    padding:1em;
    margin:0;
    line-height:1.2em}
div#smp1 small {
	display:list-item;
	margin-left:1em} /*マーカーのためのスペースを作っています*/

CSSソース↑の8行目で左マージンを指定しています。
<li>要素ならブラウザのデフォルトで、マーカー用のスペースや字下げ（他の要素より内側に下がる）が設定されているのですが、<li>じゃない要素に display:list-item を指定した場合は、そのようなデフォルト指定が無いため、自分で指定して整えてあげる必要があります。
（リストのデフォルトの margin や padding については、次回まとめます）

下は、<p>要素に「list-style-image」で画像のリストマーカーを付けています。

小型・軽量化で持ち運びに便利！

豊富なカラー・パターンからお選びいただけます

母の日のプレゼントに最適！

上のサンプルの HTMLです。

<div id="smp2">
  <p>小型・軽量化で持ち運びに便利！</p>
  <p>豊富なカラー・パターンからお選びいただけます</p>
  <p>母の日のプレゼントに最適！</p>
</div>

サンプルの CSSです。

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

list-style（CSSの7行目）はショートハンドプロパティです。
list-style-image で画像のURLを指定し、list-style-position を「inside」（デフォはoutside）にする指定を 1行にまとめています。
（リストのスタイル指定については次回詳細）

下のサンプルは、<dl>要素の中の <dt> と <dd> にリストマーカーを付けています。

超軽量！折りたたみ傘いろいろ

小型・軽量化で持ち運びに便利！

豊富なカラー・パターンからお選びいただけます

母の日のプレゼントに最適！

上のサンプルの HTMLです。

<dl id="smp3">
  <dt>超軽量！折りたたみ傘いろいろ
  <dd>小型・軽量化で持ち運びに便利！
  <dd>豊富なカラー・パターンからお選びいただけます
  <dd>母の日のプレゼントに最適！
</dl>

ちなみに、このサンプルのHTMLは、<dt> と <dd> の終了タグを省略しています。
終了タグの省略については（ちょっとメモ）HTML5 での 省略可能なタグについて をご覧ください。

サンプルの CSSです。

dl#smp3 {
	border:solid 1px #ccc;
    padding:1em;
    margin:0}
dl#smp3 dt, dl#smp3 dd {  /*←dtとddの両方に*/
	display:list-item;  /*←リストアイテムに指定*/
    list-style:url(images/li_image.jpg) inside;
    margin-left:2em}/*←字下げをしています*/
dl#smp3 dt {  /*←dtだけ*/
	list-style-image:none;  /*←画像をやめて*/
    list-style-type:square; /*←square（■）に*/
    margin-left:0}/*←字下げを無しに*/

次回予告

いろんな要素をリストっぽくできる display: list-item ですが、リストのためCSSプロパティを知らなきゃ話になんないので、次回はリスト関連のCSSプロパティをまとめます。
displaypプロパティの流れの途中で、ちょっと頭がごちゃごちゃしそうですけど、同時期に書いておかないとすぐ試せないもんね。