[15-4] リストマーカーを画像や任意のテキストに変更する方法

最終更新日:2017年10月01日  (初回投稿日:2011年06月06日)

今回は、<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プロパティで、リストマーカーに画像を指定できます。

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

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul id="smp1">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
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>要素に指定します。
これだと画像がずれないし、画像とテキストの間のスペースも自由に調整できます。

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul id="smp2">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
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」は、指定した要素の内側に インライン要素としてコンテンツを生成します。

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

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul id="smp3">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
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プロパティを使う方法をその次の回でやります。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.