ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ リスト(list)画像を使って正しく表示させる ]

リスト(list)画像を使って正しく表示させる

LI 要素の内容は任意の要素を持つが、 UL 要素は LI 要素以外を直接子供要素には持てない---これがリストを使いこなすポイントである。

25 Januaryr,2006

リストをうまく使いこなす

リストを使うと階層構造を持つ説明(例えばサイトマップなど)が簡単に表現できる。ここでのポイントは次のことだ。

  • <ul>要素はブロック要素であるが、
  • <ul>要素は<li>の要素をだけを持つことができる
  • <li>要素はp、a、img、span、br、strongなどの任意の要素を持つことができる
  • ということはリストマークが表示される1行目を<li>要素で表示させ、2行目からはpやspanを用いてスタイルを整形することも可能になる。
  • 何故ならば、IE6においてはリストを用いて複数行に表示されるようにテキストを回り込ませると1行目と2行目の行間が詰ってしまう不具合があり見栄えを損なう。

3階層を表示させたリストの入れ子のサンプルソース。

<div class="liwide">
<ul>
  <li>リストは入れ子が使えるのでメニューに使える
    <ul>
      <li>リストマークに画像を用いると見栄えがいい</li>
      <li>だけど上手く使わないと不具合が発生する
        <ul>
          <li>多くはwidth、margin、paddingが絡んで引き起こされる</li>
          <li>特にIE6にはリストに関するバグが多い</li>
        </ul>
    </ul>
  </li>
  <li>まずは簡単なリストの入れ子の書き方を覚える</li>
</ul>
</div>
  • リストは入れ子が使えるのでメニューに使える
    • リストマークに画像を用いると見栄えがいい
    • だけど上手く使わないと不具合が発生する
      • 多くはwidth、margin、paddingが絡んで引き起こされる
      • 特にIE6にはリストに関するバグが多い
  • まずは簡単なリストの入れ子の書き方を覚える

リストとして上のように使う場合に、簡単な注意がある。リストにwidthやpaddingなどを同時に設定しないことだ。例えばリストを囲むdivなどにwidthなどを設定するといい。

これはリストについての不具合が意外にも多く、width、margin、border、padding、background-colorなどを組合わせて使うと様々な不具合を露呈するからだ。だから最初から分けて使うことによりトラブルを最小限に食い止めることができる。

※ところで、リストマークの色だけを指定したい場合はどうしたらいいだろう?この方法は次のページで紹介しているので、後ほどページ下のリンクからどうぞ。

リストマークの画像を調整する

リストマークに画像を使う場合、マークで使う画像をポジショニングする方法がない。ネットで調べてみると一番多い対策は背景画像として設定し位置を調整しようというものだった。フォントサイズを固定している場合はこれでもいいだろう。

だが、本ウェブページはフォントサイズを%で設定しているため、IE6のブラウザではサイズを変更できるようになっている。この場合どうしたらよいのであろうか。

<UL class="type_blue">
  <LI class="size">リストマークの画像を調整する
  <LI class="size">web ZYCO'S(このように英数が文頭に来ることも考えてリストマークの画像を制作しなければならない)
</UL>
UL.type_blue{
  list-style-image : url(images/arrow_blue.gif);
  padding : 0px;
  margin : 0px ; 
  list-style-type : disc;
  list-style-position : outside;
}

li.size{
  font-size:75%;
  line-height:150%;
  padding-bottom : 5px;
}

リストマーク画像まず、取り掛かったのは画像の制作だ。上のようなHTMLソースにCSSを設定して、そこに余白調整をしたいくつかの画像を表示させてみてフィットしたのが右の画像だ。上の余白がないと画像が上にずれてしまう。

また、CSSではline-heightの値を大きくすると、リストの画像は比例して上方向へずれるので最初にこの値を決めておいて画像を制作するといいだろう。文字列が複数行に回り込まなくてもフォントサイズを大きくすれば回りこむことになるので、複数行になる状態で確認することが好ましい。

IE6ではフォントサイズを最小にすると余白の画像部分が重なってしまい画像が隠れてしまうので、line-heightを150%、padding-bottomを5pxに設定した。

そして、上記のHTMLとCSSで表示させると以下のリストになる。フォントサイズを小さくしたり大きくしたりして確認していただきたい。

  • リストマークの画像を調整する
  • web ZYCO'S(このように英数が文頭に来ることも考えてリストマークの画像を制作しなければならない)

最近ではリストを使ったメニュー表示が多いので、背景色や余白やマージンの設定に慣れておけばバランスのとれた階層メニュー表示が可能になる。

リストマークの色を指定する

リストスタイルを仔細に設定してCSSを理解する

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。