リストマークに画像を表示する

リストを作る

まずは、何も設定せずにul要素とli要素で普通のリストを作ってみましょう。

HTMLコード記述例

<ul>
 <li>HtmlStart</li>
 <li>HTMLタグの解説</li>
 <li>CSSの解説</li>
 <li>特殊文字一覧</li>
 <li>Webセーフカラーとは？</li>
<ul>

リスト記号を消す

次に、リストマークを消していきます。ul要素に任意の名前をつけCSSでlist-style-typeを設定して、リストマークを非表示にしていきます。

HTMLコード記述例

<ul class="bg-list">
 <li>HtmlStart</li>
 <li>HTMLタグの解説</li>
 <li>CSSの解説</li>
 <li>特殊文字一覧</li>
 <li>Webセーフカラーとは？</li>
<ul>

外部ファイルCSS記述例

@charset "utf-8";

ul.bg-list {
  list-style-type: none;
}

リストの余白を設定する

リストには初期設定で左側に余白ができてしまいます、そこでmarginとpaddingの値を0とし余白を無くします。そしてタップミスをしないようにline-heightで各項目の上下スペースを調節します。

外部ファイルCSS記述例

@charset "utf-8";

ul.bg-list {
 list-style-type: none;
 margin:0;
 padding:0;
 line-height:1.5;
}

リストの背景に画像を表示

では、いよいよリストの背景に画像を表示してみましょう、今回使用するのは下の画像です。（なおこの画像はimgフォルダの中にあるものとしてパスを設定してあります、パスの設定方法がわからない場合は [相対パスの詳しい解説] をご覧ください）

使用した画像（ico-list-mark.gif）サイズは16×16pxです。

外部ファイルCSS記述例

@charset "utf-8";

ul.bg-list {
 list-style-type:none;
 margin:0;
 padding:0;
 line-height:1.5;
}

ul.bg-list li {
 padding-left:24px;
 background-image:url(../img/ico-list-mark.gif);
 background-repeat:no-repeat;
}

画像の位置を調整する

上のブラウザ表示例のように、そのままリスト背景に画像を使用すると、上下の微妙なズレが生じてしまいます。そこでbackground-positionをCSSで設定し、画像の位置を微調整します。

外部ファイルCSS記述例

@charset "utf-8";

ul.bg-list {
  list-style-type:none;
  margin:0;
  padding:0;
  line-height:1.5;
}

ul.bg-list li {
  padding-left:24px;
  background-image:url(../img/ico-list-mark.gif);
  background-repeat:no-repeat;
  background-position:left center;
}

background-position…
背景画像の表示開始位置を設定することができます。ふたつ値を入力することによって、(横方向)(縦方向)の順でleft,center,rightなどのキーワードや%,pxなどでも設定できます。

CSSテーブル 関連記事

• CSSでテーブルの枠線を重ねる … border-collapse
• テーブルのセルと枠線の間隔 … border-spacing
• テーブルの行背景を一行ごとに変える … nth-child
• リストマークに画像を表示する … list-style-type