- ベストアンサー
<a>タグの中から一部分のimgを拡大・切り取る方法
- <a>タグの中にあるimg要素の一部分を切り取り、拡大表示したい場合、以下のようにCSSを設定することで実現できます。
- しかし、<a>タグの中に<div>を入れると、Internet Explorer（IE）の動作が変になる可能性があります。
- 具体的なソースコードは以下の通りです。拡大表示したい<img>要素には、別の画像を設定することで実現できます。
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
:hover用です。 HTMLはシンプルに、スタイルシートも極めて簡単になります。理屈的にはプルダウンメニューとまったく同じです。画像の一部を表示するのは、relativeとtop,leftプロパティで行います。 もちろん、背景画像を使う一般的な方法もありますが、それは調べてください。そのほうが、見ない画像はブラウザが事前に読み込まないのでページ自体は軽くなります。ただし、:hoverや:active時の画像の読み込みにタイムラグが生じることがあります。どちらを選択するかは、画像のサイズと量で判断します。 前と同様、ウェブ標準のHTML4.01strict+CSS2.1です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.album{position:relative;height:250px;} div.album ul{position:absolute;top:200px;left:0;} div.album ul,div.album ul li{ display:block;list-style:none;float:left;margin:0;padding:0; } div.album li a span{ ＿display:none; ＿overflow: hidden; ＿width: 200px;height:150px; ＿border: 1px solid #ddd; ＿position:absolute; ＿top:-160px;left:0; } div.album li a:hover span{display:block;} div.album ul li+li{margin-left:5px;} div.album ul li a span img{ ＿position:relative; ＿top:0;left:0; } div.album2{position:relative;height:250px;} div.album2 ul{position:absolute;top:200px;left:0;} div.album2 ul,div.album2 ul li{ display:block;list-style:none;float:left;margin:0;padding:0; } div.album2 ul li+li{margin-left:5px;} div.album2 li p{ ＿margin:0; ＿display:none; ＿overflow: hidden; ＿width: 200px;height:150px; ＿border: 1px solid #ddd; ＿position:absolute; ＿top:-160px;left:0; } div.album2 li:hover p{display:block;} div.album2 ul li p img{ ＿position:relative; ＿top:0;left:0; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="album"> ＿＿<h2>a:hover</h2> ＿＿<ul> ＿＿＿<li><a href=""><img src="./images/thumbnail/3.jpg" width="64" height="48" alt="サムネイル" ><span><img src="./images/3.jpg" width="640" height="480" alt="" style="top:-200px;left:-200px;"></span></a></li> ＿＿＿<li><a href=""><img src="./images/thumbnail/4.jpg" width="64" height="48" alt="サムネイル" ><span><img src="./images/4.jpg" width="640" height="480" alt="" style="top:-100px;left:-200px;"></span></a></li> ＿＿＿<li><a href=""><img src="./images/thumbnail/5.jpg" width="64" height="48" alt="サムネイル" ><span><img src="./images/5.jpg" width="640" height="480" alt="" style="top:-100px;left:-200px;"></span></a></li> ＿＿</ul> ＿</div> ＿<div class="album2"> ＿＿<h2>li:hover</h2> ＿＿<ul> ＿＿＿<li><img src="./images/thumbnail/3.jpg" width="64" height="48" alt="サムネイル" > ＿＿＿＿<p><img src="./images/3.jpg" width="640" height="480" alt="" style="top:-200px;left:-200px;"></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/4.jpg" width="64" height="48" alt="サムネイル" > ＿＿＿＿<p><img src="./images/4.jpg" width="640" height="480" alt="" style="top:-100px;left:-200px;"></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/5.jpg" width="64" height="48" alt="サムネイル" > ＿＿＿＿<p><img src="./images/5.jpg" width="640" height="480" alt="" style="top:-100px;left:-200px;"></p> ＿＿＿</li> ＿＿</ul> ＿</div> </body> </html>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ほんのすこし訂正・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.album{position:relative;height:190px;} div.album ul.thumbnail{ ＿position:absolute;top:160px;left:0; } div.album ul.thumbnail,div.album ul.thumbnail li{ display:block;list-style:none;float:left;margin:0;padding:0; } div.album ul.thumbnail li+li{margin-left:5px;} div.image { ＿overflow: hidden; ＿width: 200px;height:150px; ＿border: 1px solid #ddd; } div.image p img{/* 詳細度 0 0 1 3 */ ＿position:relative; ＿top:0;left:0;/* 念のため style属性での設定のほうが詳細度 a=1 [1,0,0,]で優先される */ } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="album"> ＿＿<ul class="thumbnail"> ＿＿＿<li><a href="#N1"><img src="../images/thumbnail/3.jpg" width="64" height="48" alt="サムネイル" ></a></li> ＿＿＿<li><a href="#N2"><img src="../images/thumbnail/4.jpg" width="64" height="48" alt="サムネイル" ></a></li> ＿＿＿<li><a href="#N3"><img src="../images/thumbnail/5.jpg" width="64" height="48" alt="サムネイル" ></a></li> ＿＿</ul> ＿＿<div class="image"> ＿＿＿<p id="N1"><img src="../images/3.jpg" width="640" height="480" alt="" style="top:-100px;left:-200px;"></p> ＿＿＿<p id="N2"><img src="../images/4.jpg" width="640" height="480" alt="" style="top:-100px;left:-200px;" ></p> ＿＿＿<p id="N3"><img src="../images/5.jpg" width="640" height="480" alt="" style="-100px;left:-200px;" ></p> ＿＿</div> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞大きいイメージが一つ、その下に小さいイメージを三つ並べて、 小さいイメージにカーソルを当てると大きいイメージが小さいイメージの表示に変わるものです。 以下は、以前他の質問で回答した「クリックして拡大写真」のサンプルです。スタイルシートを読まない/javascriptを実行しないユーザーエージェント(検索エンジンを含む)にも対処したシンプルな形になります。 :hover擬似クラスを使用する場合は、li要素の中に拡大画像を置いてli:hover spanで指定することになりますが、いずれにしてもHTMLは、プレゼンテーションとは切り離して率直に文書構造にしたがって記述しておくほうが、逆に楽です。当然、プレゼンテーションと独立していますから、将来デザインをまったく変えるときも簡単です。 :hoverの場合、 <ul> <li><img><p><img></p></li> ・・・・この場合、li:hover になりますがIE6には対応しません。(本来の方法です) <ul> <li><a><img><span><img></span></a></li> ・・・・IE6にも対処しますが、本来の姿ではない。 SEO的にも、お勧めは、リンクを使う下の方法・・ なお、ウェブ標準HTML4.01strictです。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 タブは＿に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.album{position:relative;height:190px;} div.album ul.thumbnail{ ＿position:absolute;top:160px;left:0; } div.album ul.thumbnail,div.album ul.thumbnail li{ display:block;list-style:none;float:left;margin:0;padding:0; } div.album ul.thumbnail li+li{margin-left:5px;} div.image { ＿overflow: hidden; ＿width: 200px;height:150px; ＿border: 1px solid #ddd; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="album"> ＿＿<ul class="thumbnail"> ＿＿＿<li><a href="#N1"><img src="../images/thumbnail/3.jpg" width="64" height="48" alt="サムネイル" ></a></li> ＿＿＿<li><a href="#N2"><img src="../images/thumbnail/4.jpg" width="64" height="48" alt="サムネイル" ></a></li> ＿＿＿<li><a href="#N3"><img src="../images/thumbnail/5.jpg" width="64" height="48" alt="サムネイル" ></a></li> ＿＿</ul> ＿＿<div class="image"> ＿＿＿<p id="N1"><img src="../images/3.jpg" width="640" height="480" alt="" style="position:relative;top:-100px;left:-200px;"></p> ＿＿＿<p id="N2"><img src="../images/4.jpg" width="640" height="480" alt="" style="position:relative;top:-100px;left:-200px;" ></p> ＿＿＿<p id="N3"><img src="../images/5.jpg" width="640" height="480" alt="" style="position:relative;top:-100px;left:-200px;" ></p> ＿＿</div> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
原則a要素には、インライン要素しか入りません。 <!ELEMENT A - - (%inline;)* -(A) -- anchor --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A ) HTML5では、ブロック要素も可能ですが特殊な場合と考えたほうが良いでしょう。そのため、aに続いてブロック要素があると、その前でa要素は終了するとみなされます。 <a><div></div>と書いた時点で、<a></a><div></div>とみなされます。 また、style属性に書かれている style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272; は、数値に単位が無いので誤りです。0以外は単位が必要です。 されたいことがいまひとつ見えてこないのですが、 div #itmImg div img <-- (1) ul li a img <-- (2) span img <-- (3) li a img span img <-- (4) li a img span img というDOMですが、(1)は、div#itmImg内に一部を表示するとして、(2)や(3)の画像はどこに表示させるのですか？ また(4)は？？
補足
ORUKA1951さん、ご回答有難うございます。 ＞されたいことがいまひとつ見えてこないのですが、 大きいイメージが一つ、その下に小さいイメージを三つ並べて、 小さいイメージにカーソルを当てると大きいイメージが小さいイメージの表示に変わるものです。 これは示したソースで実現できてます。 それぞれのイメージを大きなイメージから拡大切り取りしたものを使いたいのが、今回の目的です。 ＞、(2)や(3)の画像はどこに表示させるのですか？ また(4)は？？ (2)は上の説明で言うところの、大きいイメージの下に並んでる小さいイメージの一番左になります。 (3)はhoverした時に大きいイメージの上にかぶさる物です。 以上、宜しくお願いいたします。
お礼
ORUKA1951さん、ご回答ありがとうございました。