Home > P.370

P.370

Last Modified: 2008年12月 1日 23:38

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。（ ZIP アーカイブには解説文は含まれていません。）

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        7 章
        
        P.370
前： P.368
次： P.372

解説

CSS には link に関する擬似クラスとして :link、 :visited 、ユーザーの操作に反応する動的なダイナミック擬似クラスとして :hover 、 :active などがありますが、これらを利用して背景画像を切り替えることで視覚的にわかりやすくします。

XHTML

<ul>
  <li><a href="http://www.example.com/01.html">リンクその1</a></li>
  <li><a href="http://www.example.com/02.html">リンクその2</a></li>
  <li><a href="http://www.example.com/03.html">リンクその3</a></li>
  <li><a href="http://www.example.com/04.html">リンクその4</a></li>
  <li><a href="http://www.example.com/05.html">リンクその5</a></li>
</ul>

CSS

li {
  list-style-type: none;
}

/* (1)背景画像を指定して、その分の幅をpadding値に指定 */
li a {
  padding-left: 25px;
  line-height: 1.8;
  background: url(mark.png) 0 0 no-repeat;
  text-decoration: none;
}

li a:link {
  color: #666;
}

/* (2)訪問済みの場合は背景画像をずらす */
li a:visited {
  background-position: 0 -60px;
}

/* (3)マウスオーバー、アクティブ時は背景画像をずらす */
li a:hover,
li a:active {
  color: #f33;
  background-position: 0 -30px;
}