外出自粛中でも楽しく過ごす!QAまとめ>>

テーブル内の画像がずれてしまいます(IE8)

画像(写真を含めたHP1ページ分の画像)を分割して写真の部分にリンク(lightbox)
を貼ってあります。
一度リンクにとんで(写真を大きく表示して)closeした後は正しく表示されるのですが、
更新するとまた複数の(リンクを貼ってある)写真の部分が下に落ちて、
全体が大きく崩れて表示されてしまいます。

ソースを見ると、分割した画像はテーブルの細かく区切られたセルのcolspanとrowspanで
配置されているようです。

画像がずれて表示される原因と回避方法を教えていただけないでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ソースを見ないとはっきりとした事は分かりませんが、


よくある原因を挙げておきます。

1.colspan,rowspanを多用する事で、セルサイズが正しく表示されない
  解決法:個々のセルのwidth、heightをすべて指定する
2.画像の下に余白が空く
  解決法:CSSでimg{vertical-align:bottom;}を指定
3.タグの改行によって半角スペースが生じるバグ(IE)
  解決法:タグの改行を消す、もしくは<!---->を使う

<td>
<img src="~">
<img src="~">
</td>

<td><img src="~"><img src="~"></td>
または
<td>
<img src="~"><!--
--><img src="~"><!--
--></td>

リンクマップを使用した方が簡単かも知れません。
    • good
    • 1
この回答へのお礼

詳しい説明をありがとうございました。

お礼日時:2010/10/14 07:24

サンプルみたいなの、載せられませんか?



(lightbox.jsとprototype.js以外に何かjavascript使ってませんか)
    • good
    • 0

「更新すると」の意味がよくわかりません。

正しく表示されているページが、
ブラウザーの更新ボタンを押すと、崩れるのですか???

この回答への補足

「更新ボタン(F5)を押すと」、つまりは新しくそのページを開くと、ということです。

崩れた表示が、ページ上のどこか(質問ではリンクの部分と書きましたが、どこでもよいみたいです)
をシングルクリックするとあってほしい場所に戻ります。
(「カチっとした瞬間に、ずれている写真の位置が正しい場所に戻る」
という感じです。)

補足日時:2010/09/27 13:34
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

Q画像にリンクを張ると画像がずれるのを解消したいです

ホームページ作成初心者です。

ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。

CSSで横幅を設定した中に同じサイズの画像を配置しています。
詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。

html
<div id="sidenavi2">
<ul>
<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>
<li><a href#">あああ</a></li>
<li><a href#">あああ</a></li>
    <li><a href#">あああ</a></li>
    <li><a href#">あああ</a></li>
</ul>
<p><img src="image/message.jpg" width="200" height="65" border="0"></p>
<p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>
</div>

css
#contents #sidenavi2 {
padding: 0px;
float: right;
height: auto;
width: 200px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

情報が不足する点があるかもしれませんが、よろしくお願いいたします。

ホームページ作成初心者です。

ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。

CSSで横幅を設定した中に同じサイズの画像を配置しています。
詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。

html
<div id="sidenavi2">
<ul>
<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>
<li><a href#">あああ</a></li>
<li><a href#">あああ</a></li>
    <li><a href#">あああ</a></li>
...続きを読む

Aベストアンサー

No.3です。私の方は以下の点のみレスさせて頂きます。

> sidenavi2でテキストメニューを表示させてその下に画像にリンクを張るにはsidenavi2の下にdivを別に作ってそこに入れるのがよろしいでしょうか。
> 抽象的ですが、よければ考え方だけでもよろしくお願いいたします。

それは、テキストメニューと画像のリンクボタンのそれぞれの格付けの様なものが同等なのか異なるのかによっても考え方は違ってきます。
また、テキストリンク部分と画像リンク部分にはそれぞれ異なるスタイルを与えたいのであれば、それぞれのマークアップで適切な要素ごとにclassなりidなりを設定してセレクタで区別すれば良いでしょう。

例えばですが、テキストリンク部分と画像リンク部分がそれぞれ「内容的に異なるグループのリスト」であるなら、下記の様にリスト自体を2つに分けるべきでしょう。スタイルは、それぞれul.fruitsとul.other_infoに対して指定します(ユニークだったらidでも)。

<ul class="fruits">
<li><a href="りんごの説明ページへリンク">りんご</a></li>
<li><a href="みかんの説明ページへリンク">みかん</a></li>
<li><a href="いちごの説明ページへリンク">いちご</a></li>
</ul>

<ul class="other_info">
<li><a href="代表者挨拶のページへリンク"><img ~></a></li>
<li><a href="資料請求のページへリンク"><img ~></a></li>
</ul>

一方、テキストリンク部分も画像リンク部分も「内容的に一連と見てよいグループのリスト」であるなら、下記の様に同一のリストのアイテムとし、スタイルはliごとにclassなりidなりを設定して区別すれば良いでしょう。
※下記ではそれぞれの「カテゴリ」はユニークなものであると考えidにしてあります。その上でCSS上で画像リンク部分であるli#messageとli#orderには違うスタイルを指定します。

<ul class="category">
<li id="company"><a href="会社概要ページへリンク">会社概要</a></li>
<li id="product"><a href="商品案内ページへリンク">商品案内</a></li>
<li id="casestudy"><a href="導入事例ページへリンク">導入事例</a></li>
<li id="message"><a href="代表者挨拶のページへリンク"><img ~></a></li>
<li id="order"><a href="資料請求のページへリンク"><img ~></a></li>
</ul>

まあ、HTML側で既にテキストと画像に分けているところを見ると(内容的に)後者ではないのかな、とは思えますが。

上記は、考え方の一例です。これが正解、というわけではありません。実際の内容や構成に応じてケースバイケースでより適切なマークアップがあるかもしれませんので、これはあくまでも現在与えられている情報から仮定させて頂いたものです。

あと、これは蛇足ですが、

<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>

上記が以下に続くリストの「見出し」を表す為の画像であるなら、他の子要素liと同等に扱うのではなく、ulの見出し(h(n)とか…)としてマークアップするのが適切かと。

No.3です。私の方は以下の点のみレスさせて頂きます。

> sidenavi2でテキストメニューを表示させてその下に画像にリンクを張るにはsidenavi2の下にdivを別に作ってそこに入れるのがよろしいでしょうか。
> 抽象的ですが、よければ考え方だけでもよろしくお願いいたします。

それは、テキストメニューと画像のリンクボタンのそれぞれの格付けの様なものが同等なのか異なるのかによっても考え方は違ってきます。
また、テキストリンク部分と画像リンク部分にはそれぞれ異なるスタイルを与えたいのであれば、...続きを読む

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qtable内で画像と文字をセンター合わせするには?

HTMLについて質問が御座います。

直接HTML内のtableに画像とテキストを配置した場合に、画像も文字も上下センター合わせにしたいのですが上手くいきません…。

例えば以下ですと…

<table>
<tr>
<td>
<img src="hoge"> ここにはテキスト
</td>
</tr>
</table>

とある場合に、それぞれをセンターで合わせる方法は可能でしょうか?

文字だけの場合、vertical-alignで出来るのですが文字が一緒にいると上手くいきません。
今回は背景での指定は行いたくないです。

お分かりになる方いらっしゃいましたらアドバイスよろしくお願いいたします。

Aベストアンサー

td{vartical-align:middle;}
td img{display: inline-block;vertical-align: middle;}

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qテーブル内に画像を表示したい。

テーブル内に画像を1枚表示したいです。

下記のようにIMGタグを用いると、画像が表示されますが、
横幅が100%の時の大きさで枠が表示
されます。横に余白があります。

この余白を無くして、テーブルの枠線が画像をピッタリ
囲む様にしたいです。

どなたか、ご教授願います。初心者なので詳しくお願い
します。

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

<table border=1>
 <tr>
   <td >
<img src='./test_size/image2.jpg' width='50%' >
   </td>
 </tr>
</table>

Aベストアンサー

画像のサイズが「幅50%」とありますが、
これは画像を半分の幅で表示したいと言うことでしょうか。
そういうことでないのでしたら、下記のようにセル幅(td width)を画像サイズに合わせれば大丈夫ですよ。

<table border=1>
 <tr>
   <td width="画像の幅(ピクセル数)">
<img src="../test_size/image2.jpg" width="画像の幅(ピクセル数)" height="画像の高さ(ピクセル数">
   </td>
 </tr>
</table>

補足ですが、画像を表示する際、imgタグには画像サイズも明記するとブラウザ側での読み込みが速くなります。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>


人気Q&Aランキング