ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ リストマークの色を指定する ]

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

リストマークの色を指定する方法は意外に知られていないが、覚えておくと便利だ。特に画像で対応する場合、階層構造を持つリストスタイルは数種類の画像を作ることになり手間がかかりすぎる。では、どうしたら良いか...

15 March,2006

どこを設定するとマークの色が指定できるか?

ここまでやってきた説明の通り、リンクスタイルは<ul>と<li>で構成される。少しおさらいをしてみよう。

  • <ul>要素はブロック要素であるが、
  • <ul>要素は<li>の要素をだけを持つことができる
  • <li>要素はp、a、img、span、br、strongなどの任意の要素を持つことができる
  • ということはリストマークが表示される1行目を<li>要素で表示させ、2行目からはpやspanを用いてスタイルを整形することも可能になる。

ここまでのことを理解していることを前提に、CSSを次のように設定する。<li>にはリストマークで使いたい色を指定する。次にリストで表示されるテキストを<span>で囲み、テキストの色の指定を<span>で指定する。

<style type="text/css">
<!--

li.redch {
  color: red;
}
span.txtcl{
  color: black;
}
-->
</style>

※<span>ではページで使われている色を指定する。指定しないと、リストマークとリストのテキストは同じ色で表示されることになる。

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

リストが全てリンクしている

リストになるテキストが全てリンクされている状況なら、そのページで設定したリンク用の色が自動的に適応される。当たり前だが、サイトマップなどでこの方法は使えそうだ。

<style type="text/css">
<!--

li.redch {
  color: red;
}
-->
</style>
<ul>
  <li class="redch"><a href="#">リストは...</a>
  <ul>
      <li class="redch"><a href="#">リスト...</a>
      <li class="redch"><a href="#">だけど...</a>
    <ul>
            <li class="redch"><a href="#">多くはwidth...</a></li>
        <li class="redch"><a href="#">特にIE6には...</a></li>
    </ul>
    </ul>
  </li>
    <li class="redch"><a href="#">まずは簡単な...</a></li>
</ul>

最近ではリストを使ったメニュー表示が多いが、それには訳がある。よく言われているのはウェブポジショニングに対応する論理構造の点だが、他にも重要なことがある。

それは、ブロック要素であるということだ。ブロック要素であれば、テキストが2行目に回り込んだときにテキストの先頭が1行目と同じ位置に並ぶからである。インライン要素を使った場合は<div>で囲むか、インライン要素をブロック化しなければならず、設定を複雑にするだけだ。

だから、徹底してリストスタイルについて学ぶということは、サイドバーに位置するメニューナビゲーションなどを制作する場合、思い通りのデザインで配置することがより可能になる訳だ。

さて、もっと貪欲な諸君にリストスタイルの詳細ページを用意したので以下リンクより猛進だ。

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

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

ページのトップへ


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