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

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

<li>要素はブラウザデフォルトで display: list-itemになっているのですが、他の要素もそれと同じにできるんですね。
ブラウザデフォの displayプロパティの値は【17-1】displayプロパティでボックスの表示形式を自由に変えよう でまとめています。

これってどんなシーンで使うんだろう?と思っちゃいますが、例えば、同じリスト関連要素だけどリストマーカーが付かない <dl>要素で、<dt> や <dd> にリストマーカーを付けたい時とかに便利かも。
とにかくサンプルを作ってみたので見てください。

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万円以上(税抜き)の場合は送料は無料です 代引の場合は別途代引き手数料をいただきます
<div id="smp1">
  <small>表示の価格には消費税は含まれておりません</small>
  <small>合計金額1万円以上の場合は送料は無料です</small>
  <small>代引の場合は別途代引き手数料をいただきます</small>
</div>
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」で画像のリストマーカーを付けています。

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

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

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

<div id="smp2">
  <p>小型・軽量化で持ち運びに便利!</p>
  <p>豊富なカラー・パターンからお選びいただけます</p>
  <p>母の日のプレゼントに最適!</p>
</div>
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> にリストマーカーを付けています。

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

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

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プロパティの流れの途中で、ちょっと頭がごちゃごちゃしそうですけど、同時期に書いておかないとすぐ試せないもんね。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.