リスト項目の横にある●や○の変わりに画像を一括で指定する

Web Frontier » ウェブデザイン » スタイルシートの技 » リスト項目の横にある●や○の変わりに画像を一括で指定する

スタイルシートの技

リスト項目の横にある●や○の変わりに画像を一括で指定する

ul要素を使った場合にはリストアイテムの左横に●や○が付きます。これをちょっとしたアクセント画像にしたい場合にはどうすれば良いのでしょうか？例えば、当ウェブサイトのトップページの左ペインのメニュー項目はul要素ですが、画像になっていますね。この手法を紹介します。ひとつひとつimg要素で指定していては画像を変えたい時などに一括で変更する時に大変ではないでしょうか。以下に画像を用意しました。これを「point.gif」としてHTML文書があるフォルダと同じ場所に保存してください。

square.gif

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      li
      {
         list-style-image: url('square.gif');
      }
   </style>
</head>
<body>
   <h1>有名香港アクション俳優</h1>
   <ul>
      <li>ジャッキー＝チェン</li>
      <li>ユン＝ピョウ</li>
      <li>サモハン＝キンポー</li>
   </ul>
</body>
</html>

ジャッキー＝チェン
ユン＝ピョウ
サモハン＝キンポー

h1要素のプレビューは省略しました。しかし、なんだか位置がずれているように感じませんか？ いえ、このスタイルシートファイルを作成して試した方は位置ずれはしていないかも知れません。 当ページのフォントサイズはスタイルシートですべて"font-family: Verdana; font-size: 12px;"になっているから、このようにずれています。多くのサイトの管理者様はデフォルトのフォントで記事を書いたりしないと思いますから、おそらくこのように作っている最中に画像がずれたりする事は良く出てくると思います。この"list-style-image"は画像を簡単に指定できますが、微調整まではできません。つまり画像とフォントの大きさを完璧に合わせないと綺麗に表示されないのです。

画像とテキストの位置関係が画像のサイズによって難しく、 "marker-offset"という属性を使えば位置補正できますが、サポートしているブラウザは少ないので、きちんと作っておく必要があります。このサイトで扱っている文字の大きさですと、横16ピクセル、高さ10ピクセルくらいを目安に作成すると良いのではないでしょうか？

「せっかく作ったのにまた作り直しか…」と思う人もいるでしょう。そこで、やや強引ですが、綺麗に位置を調整する手法を紹介しましょう。 ややテクニカル的なものが多いので、中級レベルになると思います。 これができるとどんなフォント設定にしても臨機応変に対応できるはずです。 一通り、読み通したらまた戻ってくると理解が深まると思います。

li
{
   list-style-type: none;
   background-image: url('square.gif');
   background-repeat: no-repeat;
   background-position: 0px 2px;
   text-indent: 18px;
}

ジャッキー＝チェン
ユン＝ピョウ
サモハン＝キンポー

結論から言うと、治りましたね。さて、何をやっているのでしょうか？？？

list-style-type: none;: ここではデフォルトで付加しているマーク（●など）を除去しています。
background-image: url('square.gif');: 背景画像に"square.gif"を指定しています。
background-repeat: no-repeat;: "background-image"を使うと通常は指定画像で領域内を敷き詰めます。「no-repeat」と指定する事で、ひとつだけ敷く事になります。
background-position: 0px 2px;: 背景画像の位置の微調整を行います。それぞれx座標、y座標の補正です。うまく画像が文字の中央に合わない場合には、 試しにこの値を色々変えてみてください。
text-indent: 18px;: 元々"background-image"は背景画像用なので、そのままだと画像の上に文字が重なってしまいます。ここで、この画像は横16ピクセルなので、テキストインデントをそれよりも大きめに取る事で文字の位置を調整する必要があります。

色々な複合要素で考えなければならないので難しいかも知れませんが、慣れるとすらすら書けるようになります。ちなみに背景画像の指定は次のようにスペースで区切って一括で記述する事も可能です。

li
{
   list-style-type: none;
   background: url('square.gif') no-repeat 0px 2px;
   text-indent: 18px;
}

リスト用のタグはdl,dt,dd,ol,ul,liがありますが、このように画像を一括で設定できればウェブサイト制作の範囲が格段に広がると思います。また、リストごとに背景画像を変えたい場合には、以下のように書くと良いでしょう。

ul.point li
{
   list-style-type: none;
   background: url('square.gif') no-repeat 0px 2px;
   text-indent: 18px;
}

このように記載して、ul要素にクラス"point"を指定します。そうすると、子要素のliにすべて上記のスタイルシートが適応されます。この書き方は覚えておくと便利です。 li要素のクラスにひとつひとつ書いても良いですが、こちらの方が断然ラクでしょう。

top