ほんっとにはじめての HTML5 と CSS3

今回は、<li>要素のリストマーカーを「画像」や「任意のテキスト」に変更してみます。
リストマーカーをオリジナルなものに差し替えたいときに便利。 CSSを使います。

CSSプロパティ	list-style-image background-image

疑似要素	::before

●2017年10月、本文を大幅に書き換えました。
内容がもともと「リストマーカーを画像にする」ことがメインだったので、タイトルをそれに合わせて変更し、「任意のテキスト」に変更する方法も追加しました。

<li>要素のリストマーカーを画像にする

マーカーを画像にするには、2つの方法があります。
● CSSの list-style-imageプロパティ を使う
● CSSの background-imageプロパティ を使う

list-style-imageプロパティ を使う

<li>要素のためのプロパティ list-style-imageプロパティで、リストマーカーに画像を指定できます。

下のサンプルは、この画像 をマーカーに指定しています。

• リストアイテム
• リストアイテム
• リストアイテム

HTMLはこちら。

<ul id="smp1">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

CSSはこちら。

ul#smp1 {
	border:solid 1px #ccc;
	padding:0;
	margin:0
	}
ul#smp1 li {
	padding:0;
	margin:1em;
	list-style-image:url(images/listImage.gif);
	list-style-position:inside
    }

でも、この画像のマーカー、ズレてますよね。（上下が揃ってない）
<li>要素内のテキストには line-height（行間）の指定もあるのでズレるんです。
list-style-image には vertical-align のような上下位置を調整する機能がありません。
画像ファイルとテキストをピッタリ合わせるには、画像そのものにホワイトスペースを加えるなどの微調整が必要。

ですので、この list-style-imageプロパティよりも、画像を背景にする background-imageプロパティを使うほうがラクだし一般的です。次で説明します↓

background-imageプロパティ を使う

さきほどと同じ画像を、background-imageプロパティで <li>要素に指定します。
これだと画像がずれないし、画像とテキストの間のスペースも自由に調整できます。

• リストアイテム
• リストアイテム
• リストアイテム

HTMLはこちら。

<ul id="smp2">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

CSSはこちら。

ul#smp2 {
	border:solid 1px #ccc;
	padding:0;
	margin:0
	}
ul#smp2 li {
	list-style:none;  /*デフォルトのマーカーを無しに*/
	padding-left:20px;  /*画像のスペースをあける*/
	margin:1em;
	background-image: url(images/listImage.gif);
	background-repeat:no-repeat;
	background-position:left center
	}

background-imageプロパティで画像を <li>要素の背景にしています（10行目）
そのために、<li>要素のマーカーを無しにして（7行目）、画像のためのスペースをあけています（8行目）
さらに背景画像の繰り返しは無し（11行目）、背景画像の位置は「x軸方向は左、y軸方向はセンター」にしています（12行目）

「backgroundプロパティ」については、「はじめてのCSS」カテゴリーの
【15-1】background関連のプロパティ（1/4）から解説していますので、こちらも読んでみてください。

<li>要素のリストマーカーを任意のテキストにする

これには CSSの 疑似要素 と呼ばれるものの中の1つ「::before」を使います。
擬似要素「::before」や「::after」は、指定した要素の内側に インライン要素としてコンテンツを生成します。

サンプルです。「オススメ！」というテキストをマーカーにしています。

• リストアイテム
• リストアイテム
• リストアイテム

HTMLはこちら。

<ul id="smp3">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

CSSはこちら。

ul#smp3 {
	border:solid 1px #ccc;
	padding:0;
	margin:0
	}
ul#smp3 li {
	list-style:none;  /*デフォルトのマーカーを無しに*/
	margin:1em;
	}
ul#smp3 li::before {
	content:"オススメ！ ";  /*任意のテキストを指定*/
	font-weight:bold;
	color:#f6c;
	}

<li>要素に擬似要素「::before」をつけて li::before としています（10行目）
contentプロパティで 好きなテキストを指定（11行目）
12、13行目は、そのテキストのための指定です。文字を太くし、色をピンクにしています。

擬似要素については、「はじめてのCSS」カテゴリーの
【3】id とか classって何？ でも少し触れています。

次回予告

次回から、<li>要素を 横に並べてナビゲーションにしてみましょう。
CSS の floatプロパティを使う方法を次回に、displayプロパティを使う方法をその次の回でやります。

関連記事

• [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
• [16-3] table のセルを連結しよう（colspan属性・rowspan属性）
• [16-2] table にタイトルをつけよう（ caption要素 ）
• [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
• [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）
• [15-6] リストでナビゲーション（ li 要素を display で横に並べる）
• [15-5] リストでナビゲーション（ li 要素を float で横に並べる）
• [15-4] リストマーカーを画像や任意のテキストに変更する方法
• [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）
• [15-2] 番号付きリストを作ろう（ ol要素・li要素）
• [15-1] リストを作ろう（ ul要素・li要素 ）
• [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
• [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）
• [14-2] 画像形式について（GIF、JPEG、PNG の違い）
• [14-1] ブラウザでソースを表示する