画像の表示で困っております。

例えば、
<img src="〜" width="800">
<br />
<table width="800">
<tr>
<td width="400">文章</td>
<td width="400"><img src="〜"></td>
</tr>
<tr>
<td width="400"><img src="〜"></td>
<td width="400">文章</td>
</tr>
</table>
↑ページ上でこう表示した場合最初に表示している画像とその下に表示してある二枚の画像、
横幅が微妙に合っていないのです。
少し右にずれている感じがするのです。
こうぴったり表示させたい場合はどのようにしたらいいのでしょうか?
アドバイス何とぞよろしくお願い致します。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2012/09/09 23:06:29
  • 終了:2012/09/10 21:29:39

回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512012/09/10 02:41:47

ポイント100pt

CSSをリセットするといいです。
質問のHTMLの場合は以下だけで大丈夫ですが、その他の要素にも対応したリセット用のCSSが数多く紹介されていますので、好みに合うものを探して使ってみてください。

※少し修正(tableを削除しました)

<style type="text/css">
body, td {padding:0; margin:0;}
table {border-collapse: collapse; border-spacing: 0;}
</style>


上記はInman Resetの一部です。(※次が省略していない完全版)

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {padding: 0; margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img, abbr {border: 0;}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {font-weight: normal; font-style: normal;}
ul {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 1.0em;}
q:before, q:after {content: '';}
a, ins {text-decoration: none;}


コリスの記事『[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版』で紹介されています。
http://coliss.com/articles/build-websites/operation/css/a-comprehensive-guide-to-css-resets.html

関連記事
『[CSS]スタイルの初期化(後編) -body内の個別タグ編』
http://coliss.com/articles/build-websites/operation/css/198.html

他3件のコメントを見る
id:ameri1u1

>rouge_2008様
お返事が遅くなり大変申し訳ございませんでした。
早速試したところ無事解決致しました!本当に有り難うございますっ
後から言い訳がましくなってしまって本当に申し訳ないのですが、
以前質問した際に回答を受付し続けるとポイント?スター?を多く支払うことになり?
すぐに終了ステータスに変えた方がいいというのが記憶に残っていたもので
反射的にrouge_2008様の回答を受け付けた後に質問を締め切らせて頂いた次第です。
他の方にもご迷惑おかけしていたようでして大変申し訳ありませんでした。
的確なアドバイス感謝致します。
有り難うございました。

2012/09/12 00:13:57
id:rouge_2008

解決して良かったです。

リニューアル前は、回答オープンに追加ポイントが必要でしたからその事ですね。
現在は追加ポイントは発生しませんが、一旦ステータスを変更していただいたのは、私としては助かりました。ありがとうございます。
締め切りというか、受付終了で完全に質問が終了していましたけれど・・・
もらった回答で解決する事が分かるまでは、締め切りにしておいた方が、後で質問を再開する事ができて便利です。

解決のご報告ありがとうございました。

2012/09/12 10:16:45
  • id:mkonomi
    > もし分からなければ、実際に使用するHTMLの提示をお願いします。
    質問者はそれを提示せずに終了していますが、分かったということだと
    推測できます。
     
    > 単純にHTMLとCSSを理解している人かどうか分らなかったので。
    これは回答から終了するまでに間があったことの釈明の様です。
     
    質問者からは
    ・うまく解決できたとの簡単な報告と
    ・有益な情報を提供してくれた回答者への感謝のひとこと
    があればよかったのにと思います。
     
    質問者のコメントが気になる70歳超えの小言老人からのコメントです。
     
  • id:rouge_2008
    > mkonomiさん

    解決したのでしたらいいのですが・・・

    結果報告がないのは残念ですが、一切返信をしない質問者さんもいますので。
    過去質問を見る限り、ameri1u1さんはきちんと返信してくださる質問者さんなのですが、揉めているように見えて嫌だったのでしょうか。

    とにかく、わざわざありがとうございました。
  • id:mkonomi
     
    > > 単純にHTMLとCSSを理解している人かどうか分らなかったので。
    > これは回答から終了するまでに間があったことの釈明の様です。
    "単純に・・"のコメントは質問者からのコメントだと誤解していました。
    第3者から、なぜ回答内コメント欄のこの位置にこのようなコメントが書かれ
    ているのか理解しがたいです。
     
  • id:Yoshiya
    >第3者から、なぜ回答内コメント欄のこの位置にこのようなコメントが書かれ
    ているのか理解しがたいです。

    既にご存知だと思いますが、回答に対するコメントで質問者が投稿したものはユーザーアイコンが右側、質問者以外(回答者を含む)のユーザーが投稿したものは、ユーザーアイコンが左側に表示されます。
    質問が終了又は締切になる前であれば、誰でも回答に対するコメントを投稿する事が可能。
    (第三者がコメントを投稿しても全く差し支えありません。 ただし、コメントの内容にもよりますが…)
  • id:rouge_2008
    以前は回答への返信は質問者のみでしたが、リニューアルによって、回答受付中は誰でも回答への返信ができる仕組みになったんです。
    質問終了後は回答者本人と質問者のみ回答に返信をつける事ができます。
  • id:ameri1u1
    >mkonomi様
    mkonomi様の仰られる通りrouge_2008様への報告の言葉が遅くなってしまったこと、
    大変反省しております。
    mkonomi様にも不快な思いをさせてしまいすみませんでした。
    次からは気をつけていきたいと思います。

    >Yoshiya様
    詳しくご説明して頂き有り難うございます。
    私自身もまだ不慣れなもので人力検索はてなのシステムについてももっと勉強しなければと思いました。
    わざわざコメントして頂き有り難うございました。

    >rouge_2008様
    本当にこちらのコメントにまで書いて頂きご迷惑おかけして申し訳ありませんでした。
    上にも記載致しましたが、rouge_2008様の回答でとても助かりました!
    改めてご返信が遅れましたこと深くお詫び致します。
    アドバイス本当に有り難うございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません