画像にマウスポインタをのせると画像が拡大される機能を備えた画像の表を作りたいです。テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。アドバイスをお願いいたします。～～～ HTML ～～～あいうえおかきくけああああああああああああああああいいいいいいいいいいいいいいいううううううううううううううううこさしすせそなにぬええええええええええええええええええええええおおおおおおおおおおおおおおおおおおおおかかかかかかかかかかかかかかかかかか～～～ 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; }

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

解決済

質問者：orehatens
質問日時：2010/11/25 19:31
回答数：1件

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

テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。
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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2010/11/25 22:37

せっかくXHTMLとCSSの組み合わせなのに、HTMLのタグのattrivutesがふんだんに使われている。

すべてCSSに任せましょう。(tableや画像の属性は後方互換のため記述するが、詳細度は０なので上書き可能)
私は幅が固定される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">

</style>

この回答への補足

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

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

(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">

</style>