二十九日目！（リスト、ロールオーバー～）

リストとリンクのスタイリング

グローバルナビゲーション、パンくずリスト、リンクリスト、用語集など、よくある事例をもとにリストのスタイリングを学んでいく。リストではさまざまなスタイリングテクニックを利用することができ、CSSの実践力を頭と体に叩き込む絶好のチャンスである。

また、ナビゲーションにしてもパンくずリストにしても、項目のなかに（a要素）を含むケースが多いため、リストとリンクのスタイリングをまとめて取り上げる。

リストやリンクのスタイリングのコツは、XHTMLのブロックレベル要素とインライン要素という「しばり」にとらわれずに表現方法を考えること。たとえばリンク（a要素）はインライン要素だが、「display:block;」でブロックレベル要素のように見せることができるし、背景画像と組み合わせてロールオーバー効果をつけるなど、さまざまなコンテンツに応用できる。

サイドバーに配置した最新記事一覧の例

●リンクリストのスタイリング

2カラムでレイアウトしているサイトやブログで、サイドバーに最新記事一覧を配置しているところをよく見かける。

行頭では記事をあらわすアイコンが置いてあり、訪問済みリンクの右端には「訪問済みであること」を示すチェックマークが表示されている。

デザインとしては、すべての項目に同じアイコンを表示させていることもあり、一見「順不同」な（ul要素でマークアップする）リンクリストだが、新しい順序で並んでいることを考えると、次のように順序つきリスト（ol要素）でマークアップするこもできる。

XHTML

<div id="recent-entries" class="section">

  <h2><img src="h2.png" alt="最新ブログ記事" /></h2>

  <ol>

    <li><a href="article1.html">【連動書籍執筆中】 CSS Nite...</a></li>

    <li><a href="article2.html">Fireworks デベロッパーに...</a></li>
    <li><a href="article3.html">Twitter関連サイト...</a></li>
    <li><a href="article4.html">Web Designing 9月号...</a></li>
    <li><a href="article5.html">最近のお知らせダイジェスト</a></li>
  </ol>
</div>


このXHTMLをもとにCSSを製作していく。まずはスタイルを適用していない状態でXHTMLファイルをブラウザで開いてみる。

CSSを適用する前に、XHTMLファイルをブラウザで表示させた例

●リストの先頭に任意のアイコンを表示
ol要素でマークアップしているため、ブラウザのデフォルトスタイルでは項目の先頭に番号が振られている。これは、ol要素内のliに対して、ブラウザのデフォルトスタイルが「list-style-type: decimal;」（先頭に1,2,3と番号を振る）になっているため。まず「list-style-type:none;」と指定してマーカーを消す。

次に、小さなアイコンをリスト先頭に表示させる。ここではbackgroudプロパティでli要素の背景として指定することで、あたかもリストマーカーが小さくなってアイコンになっているようにする。ひとつだけ表示させるために「no-repeat」、位置を指定するために「0 3px」（左から0、上から3pxの位置）と指定する。最後に、アイコンの表示スペースを確保するために、padding-leftプロパティで「18px」と指定する。

CSS
#recent-entries ol li {
  list-style-type: none;                              /* ブラウザデフォルトのリストマーカーを消す */
  backgroud: url(icon.gif） no-repeat 0 3px;    /*  アイコン画像と表示方法、位置の指定 */
  padding-left:  18px;                                /*  アイコンの表示スペースを確保 */
}


※list-style-image/list-style-positionの注意点
行頭のアイコンはbackgroundプロパティではなくlist-style-imageプロパティでも指定できる。その場合、行頭アイコンの位置は、list-style-positionプロパティで指定できる。
ただし、list-style-positionプロパティでは、リストマーカーを内容の外側（outside）と内側（inside）のどちらかに表示するかしか指定がないため、細かな位置指定はできない。またli要素に「display: inline;」と指定してインライン化した（横に並べた）場合、ほとんどのブラウザでリストマーカーを自動的に消してしまう為、backgroundプロパティを利用するしかない。したがって、デザインの再現性やブラウザの挙動を考えると、リストマーカーを任意の画像にする場合は、backgroundプロパティで実現したほうがよい。

●リンクの末尾に任意のアイコンを表示させる
li要素の中のa要素について、訪問済みであることを示すための「ひと工夫」をする。訪問済みのスタイルは:visited擬似クラスで指定する。基本的なスタイルはリストの先頭にアイコンを表示させることと変わらないが、訪問済みリンクのみ末尾に「check.gif」（訪問済みを示すチェックマーク）が表示されるように設定する。

#recent-entries ol li a:visited {
  padding-right: 10px  /* アイコンの表示スペースを確保 */
  color: #222266;  /*訪問済みリンクの文字色 */
  background: url(check.png) no-repeat right 5px;  /* アイコン画像と表示方法、位置の指定 */
}


なお、a要素に指定する擬似クラスは、「:link」「:visited」「:hover」「:focus」「active」の順で指定する点に注意。

リンクリストスタイリング実現に必要なCSS
#recent-entries {
  width: 180px;
  background: #dce4b1 url(recent_bottom.gif) no-repeat left bottom;
}
#recent-entries ol {
  margin: 0;
  padding: 10px 0 10px 0;                                /* ボックス内のol要素の位置を調整 */
}
#recent-entries ol li {
  margin: 0 12px 7px 15px;                              /* liリストの位置、間隔を調整 */
  list-style-type: none;                              　　/* ブラウザデフォルトのリストマーカーを消す */               
  background: url(icon.gif) no-repeat 0 3px;        /* アイコン画像と表示方法、位置の指定 */
  padding-left: 18px;                                      /* アイコンの表示スペースを確保 */
}
#recent-entries ol li a {
  color: #ffffff;                                              /* リンク文字色 */
}
#recent-entries ol li a:visited {
  padding-right: 10px;                                    /* アイコンの表示スペースを確保 */
  color: #222266;                                          /* 訪問済みリンクの文字色 */
  background: url(check.png) no-repeat right 5px  /* アイコン画像と表示方法、位置の指定 */
}
#recent-entries ol li a:hover,
#recent-entries ol li a:focus,
#recent-entries ol li a:active, {
   color: #ffffff;     /* カーソルオン、フォーカス、アクティブ時の文字色 */
}


●ナビゲーションのスタイリングと画像置換
ロールオーバーで背景色や背景画像が入れ替わる、という視覚効果を設定したナビゲーションは、ユーザーに対してカーソルアクションを明確に伝えることができ、ユーザビリティの向上に効果がある。一般的なグローバルナビゲーションを例に、「画像置換」というテクニックを利用したロールオーバー効果の実現方法を解説。

グローバルナビゲーションの例

練習もかねてGINP2で例画像作成

ロールオーバー効果を実現するにはさまざまな方法があり、それぞれにメリットとデメリットがある。サイトの規模や更新のしやすさ、音声読み上げを含むユーザーの利用環境を考慮しながら、メリットとデメリットを理解した上で最適な方法を選ぶ。

中途半端ですが今日はここまで。