こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

table内の画像を中央寄せ、のせると拡大、方法?

画像にマウスポインタをのせると画像が拡大される機能を備えた
画像の表を作りたいです。

テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。
CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。

あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。

各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。

下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。

アドバイスをお願いいたします。


~~~ HTML ~~~

<link rel="stylesheet"type="text/css" href="a.css">
<table border="1" width="500" cellpadding="5" bordercolor="#333333" />
<tr>
<th bgcolor="#FFA07A">あいう
<th bgcolor="#FFA07A">えおか
<th bgcolor="#FFA07A">きくけ
</tr>
<tr>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
</tr>
<tr>
<td align="left">ああああああああああああああああ</td>
<td align="left">いいいいいいいいいいいいいいい</td>
<td align="left">うううううううううううううううう</td>
</tr>
</table>
<br>
<br>
<table border="1" width="500" cellpadding="5" bordercolor="#333333" />
<tr>
<th bgcolor="#FFA07A">こさし
<th bgcolor="#FFA07A">すせそ
<th bgcolor="#FFA07A">なにぬ
</tr>
<tr>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
</tr>
<tr>
<td align="left">ええええええええええええええええええええええ</td>
<td align="left">おおおおおおおおおおおおおおおおおおおお</td>
<td align="left">かかかかかかかかかかかかかかかかかか</td>
</tr>
</table>



~~~ CSS ~~~

a.thumbnail {
display: block;
float: left;
}
a.thumbnail img{
position: relative;
}
a.thumbnail,
a.thumbnail img{
width: 130px;
height: 170px;
margin: 0px 0px 0px 5px;
}
a.thumbnail:hover {
border: none;
cursor: default;
}
a.thumbnail:hover img {
width: auto;
height: auto;
}

投稿日時 - 2010-11-25 19:31:27

QNo.6343605

すぐに回答ほしいです

質問者が選んだベストアンサー

せっかくXHTMLとCSSの組み合わせなのに、HTMLのタグのattrivutesがふんだんに使われている。すべてCSSに任せましょう。(tableや画像の属性は後方互換のため記述するが、詳細度は0なので上書き可能)
私は幅が固定されるtableは使いませんが、tableの場合の書き方で説明すると下記の様になるかな?
★画像はthumbnailを使わずブラウザ上でサイズ指定をしている。</p>
★classなどは必要最小限にしましょう。ひとつ書けば済む物を何度も書かない。
 シンプルが一番、後からのメンテナンスも考えましょう。
 サンプルの画像は240px×180pxを想定しています。一番右端の画像だけtableからはみ出さないように隣接セレクタを使って左に寄せている。
<table border="1" width="500" class="album">
<tbody>
<tr>
<th>あいう</th><th>えおか</th><th>きくけ</th>
</tr>
<tr class="thumbnail">
<td>
<a href="./img/sample1.jpg"><img src="./img/sample1.jpg" width="120" height="90" alt="" /></a>
</td>
<td>
<a href="./img/sample2.jpg"><img src="./img/sample2.jpg" width="120" height="90" alt="" /></a>
</td>
<td>
<a href="./img/sample3.jpg"><img src="./img/sample3.jpg" width="80" height="60" alt="" /></a>
</td>
</tr>
<tr>
<td>ああああああああああああああああ</td>
<td>いいいいいいいいいいいいいいい</td>
<td>うううううううううううううううう</td>
</tr>
</tbody>
</table>
</body>
</html>

<style type="text/css">
<!--
table.album{border-collapse:collapse;}
table.album th, table.album td{width:160px;border: #333333 2px solid;padding:5px;}
table.album th{background-color:#FFA07A;}
table.album tr.thumbnail td{text-align:center;text-indent:0em;}
table.album td{text-indent:1em;}
table.album tr.thumbnail td a{display:block;position:relative;}
table.album tr.thumbnail td a img{border:none;}
table.album tr.thumbnail td a:hover img{position:absolute;width:auto;
height:auto;top:-50px;left:0px;z-index:1;}
table.album tr.thumbnail td+td+td a:hover img{left:-80px;}
-->
</style>

投稿日時 - 2010-11-25 22:37:58

補足

アドバイス有難うございました。
参考にして直してみました。
画像が前面にでるようになり、配置もバッチリです。

しかし、問題が2点あります。

(1)
一番右側の画像と真ん中の画像にマウスを置いたときに表示される画像。
ブラウザのウインドウが狭いときは、この画像が途切れてしまいます。
一番右側の画像は3分の1ぐらいしか表示されません。
真ん中の写真は真ん中に、右側の写真は左側に表示させるようにしたいです。

(2)
Firefoxでの再現 :tableの枠が二重になってしまいます。
Internet Explorer 9での再現 :内側のtableの枠はしっかりしてますが、外側が細く薄いグレー色になってしまいます。
どちらのブラウザでもきちんと表示されるにはどうしたらいいのでしょうか。

(1)と(2)の解決策のアドバイスをお願いいたします。



<html>
<body>
<link rel="stylesheet"type="text/css" href="text.css">
<table border="1" width="500" class="album">
<tbody>
<tr>
<th>あいう</th><th>えおか</th><th>きくけ</th>
</tr>
<tr class="thumbnail">
<td>
<a href="./img/sample1.jpg"><img src="./img/sample1.jpg" width="90" height="100" alt="" /></a>
</td>
<td>
<a href="./img/sample2.jpg"><img src="./img/sample2.jpg" width="90" height="100" alt="" /></a>
</td>
<td>
<a href="./img/sample3.jpg"><img src="./img/sample3.jpg" width="90" height="100" alt="" /></a>
</td>
</tr>
<tr>
<td>ああああああああああああああああ</td>
<td>いいいいいいいいいいいいいいい</td>
<td>うううううううううううううううう</td>
</tr>
</tbody>
</table>
</body>
</html>


--------------------------------------------


<style type="text/css">
<!--
table.album{border-collapse:collapse;}
table.album th, table.album td{width:160px;border: #333333 2px solid;padding:5px;}
table.album th{background-color:#FFA07A;}
table.album tr.thumbnail td{text-align:center;text-indent:0em;}
table.album td{text-indent:1em;}
table.album tr.thumbnail td a{display:block;position:relative;}
table.album tr.thumbnail td a img{border:none;}
table.album tr.thumbnail td a:hover img{position:absolute;width:auto;
height:auto;top:-50px;left:0px;z-index:1;}
table.album tr.thumbnail td+td+td a:hover img{left:-80px;}
-->
</style>

投稿日時 - 2010-11-27 16:01:39

お礼

無事に問題が解決しました。
有難うございます。

投稿日時 - 2010-12-31 01:33:49

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問