このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する

法則80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する

XHTMLソース

<p class="zoom"><a href="#"><img src="share/images/photo.jpg" alt="写真" /></a></p>
<p>
 JavaScriptを使わずともCSSの:hover擬似クラスを利用して画像拡大効果を再現できる。
 拡大した時にpositionプロパティを使って指定するのでレイアウトが崩れることはない。
 尚、a要素に対して:hover擬似クラスを指定しているのは、IE6などのブラウザでは
 a要素に対してのみ:hover擬似クラスが有効なためである。
<p>

CSSソース

/* ----- サムネイル表示 ----- */
img {
     border: none;
}
p.zoom {
     position: relative;
     width: 80px;
     height: 50px;
}
p.zoom a,
p.zoom a:visited {
     position: absolute;
     display: block;
     width: 80px;
     height: 50px;
}
p.zoom a img {
     width: 80px;
     height: 50px;
}
 
/* ----- マウスオーバーによる拡大表示----- */
p.zoom a:hover {
     position: absolute;
     width: 320px;
     height: 200px;
}
p.zoom a:hover img {
     position: absolute;
     top: 0;
     left: 0;
     width: 320px;
     height: 200px;
}

第5章 実践的なCSSデザインの法則 一覧

  1. 法則71 Webブラウザのデフォルトスタイルをリセットする
  2. 法則72 1行テキストの上下中央配置にはline-heightプロパティを使用する
  3. 法則73 画像の下の余白はvertical-alignプロパティで解消する
  4. 法則74 字下げとぶら下がりはCSSでコントロールする
  5. 法則75 文字サイズを変更してもテキストが重ならないようにする
  6. 法則76 定義リストを横並びにしてスマートに見せる
  7. 法則77 リストの横並びはインラインとして実現する
  8. 法則78 透過gif画像を利用してカラーバリエーションを作る
  9. 法則79 背景画像を指定してimg要素の見栄えをよくする
  10. 法則80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する
  11. 法則81 ステッカーを貼ってプロモーション効果を高める
  12. 法則82 スクロールバー領域を常に確保してセンタリング位置のズレを避ける
  13. 法則83 角丸の背景は最低限の要素で実現する
  14. 法則84 未対応セレクタも状況により使用してかまわない
  15. 法則85 CSS3セレクタを使用してスマートなCSS を記述する

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS