Home > P.328

P.328

  • Last Modified: 2008年11月30日 21:57

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

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

解説 (1)

写真を並べて見せるフォトギャラリーを CSS のみで再現します。 挙動としては、サムネールにマウスオーバーすることで拡大画像を表示、サムネールクリックで拡大画像を固定させるといった感じになります。 ただし、 Opera 9.5x 以前のバージョンと Safari では acitive 、 focus の状態が保持されないので、拡大画像が固定されません。

XHTML

<ul id="gallery">
  <li><a href="#"><img src="01.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="02.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="03.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="04.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="05.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="06.jgp" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="07.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="08.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="09.jpg" alt="代替テキスト" /></a></li>
  <li><a href="#"><img src="10.jpg" alt="代替テキスト" /></a></li>
</ul>

Download(1)

解説 (2)

サンプルでは、幅 35px ×高さ 28px のサムネールを縦に 10 枚並べ、その右横に幅 350px 高さ 280px の拡大画像を表示させるギャラリーです。

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
}

/*---- ギャラリー ----*/

/* ギャラリーのキャンバスとなる部分の指定 */
ul#gallery {
  position: relative;
  /* 絶対配置させる際の基点となる包含ブロックとする指定 */
  width: 385px; /* サムネール画像と拡大画像を足した幅 */
  height: 280px; /* サムネール画像を縦に10枚並べた高さ */
  background-color: #dfb;
}

/* レイヤー階層の指定 */
ul#gallery li a img {
  border: none;
  position: relative; /* z-index を指定するため */
  z-index: 3; /* 常に最前面のレイヤーへ表示 */
  width: 35px; /* 画像をサムネール用に縮小 */
  height: 28px; /* 画像をサムネール用に縮小 */
}
/* レイヤー階層の指定END */

ul#gallery li {
  width: 35px;
  height: 28px;
  list-style-type: none;
  background: #ffa905 url(click.png) top left no-repeat;
  /* マウスオーバーやクリック時に現れる背景画像 */
  /* IE向けの対応 */
  line-height: 0;
  vertical-align: bottom;
  font-size: 0;
  /* IE向けの対応END */
}

ul#gallery li a {
  display: block;
  width: 35px;
  height: 28px;
}

ul#gallery li a:hover {
  padding-left: 35px; /* 左のサムネール分余白をとる */
  position: absolute; /* ul#galleryの左上を原点として絶対配置 */
  top: 0;
  left: 0;
  z-index: 2; /* レイヤー階層をひとつ下に落とす */
  width: 350px; /* マウスオーバーで画像拡大 */
  height: 280px; /* マウスオーバーで画像拡大 */
}

ul#gallery li a:hover img {
  width: 350px; /* マウスオーバーで画像拡大 */
  height: 280px; /* マウスオーバーで画像拡大 */
}

ul#gallery li a:active,
ul#gallery li a:focus {
  padding-left: 35px; /* 左のサムネール分余白をとる */
  position: absolute; /* ul#galleryの左上を原点として絶対配置 */
  top: 0;
  left: 0;
  width: 350px;
  height: 280px;
}

ul#gallery li a:active img,
ul#gallery li a:focus img {
  position: relative; /* z-index を指定するため */
  z-index: 1; /* レイヤー階層を更にひとつ下に落とす */
  width: 350px;
  height: 280px;
}

Download(2)

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/125
Listed below are links to weblogs that reference
P.328 from lh3.jp

Home > P.328

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top