画像の表示で困っております｡例えば､ <img src="～" width="800"> <br /> <table width="800"> <tr> <td width="400">文章</td> <td width="400"><img src="～"></td> <… - 人力検索はてな

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

i-mobile

画像の表示で困っております｡
例えば､
<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>
↑ﾍﾟｰｼﾞ上でこう表示した場合最初に表示している画像とその下に表示してある二枚の画像､
横幅が微妙に合っていないのです｡
少し右にずれている感じがするのです｡
こうぴったり表示させたい場合はどのようにしたらいいのでしょうか？
ｱﾄﾞﾊﾞｲｽ何とぞよろしくお願い致します｡

●質問者: ameri1u1
●ｶﾃｺﾞﾘ:ｲﾝﾀｰﾈｯﾄｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

▽1 ● rouge_2008
●100ﾎﾟｲﾝﾄ

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

楽1978さんのｺﾒﾝﾄ
具体的な記述ではないので､この回答で解決するか微妙な気がするけど･･･

rouge_2008さんのｺﾒﾝﾄ
少し書き直して再度ｺﾒﾝﾄしています｡例は示されていますが､どのように具体的ではないのでしょう？質問にあるHTMLでは解決する事を確認済みです｡質問文とは違う構造でも､CSSﾘｾｯﾄという手法で解決する事が分かったと思いますので､HTMLとCSSを理解している人でしたら対応可能だと思います｡ HTMLの各要素は､ﾃﾞﾌｫﾙﾄで余白などを持っているので､必要な要素に｢padding:0; margin:0;｣を指定してｽﾀｲﾙをﾘｾｯﾄするのがCSSﾘｾｯﾄの基本的な考えです｡ > 質問者さん最初の画像はbody直下にimgで画像を表示していますが､もし他の要素の中にあって､ﾃｰﾌﾞﾙ内の画像と表示が揃わない場合は､その要素もﾘｾｯﾄ対象に加えてみてください｡一応､divとpは問題ありませんでした｡もし分からなければ､実際に使用するHTMLの提示をお願いします｡

楽1978さんのｺﾒﾝﾄ
単純にHTMLとCSSを理解している人かどうか分らなかったので｡

ameri1u1さんのｺﾒﾝﾄ
>rouge_2008様お返事が遅くなり大変申し訳ございませんでした｡早速試したところ無事解決致しました！本当に有り難うございますっ後から言い訳がましくなってしまって本当に申し訳ないのですが､以前質問した際に回答を受付し続けるとﾎﾟｲﾝﾄ？ｽﾀｰ？を多く支払うことになり？すぐに終了ｽﾃｰﾀｽに変えた方がいいというのが記憶に残っていたもので反射的にrouge_2008様の回答を受け付けた後に質問を締め切らせて頂いた次第です｡他の方にもご迷惑おかけしていたようでして大変申し訳ありませんでした｡的確なｱﾄﾞﾊﾞｲｽ感謝致します｡有り難うございました｡

rouge_2008さんのｺﾒﾝﾄ
解決して良かったです｡ﾘﾆｭｰｱﾙ前は､回答ｵｰﾌﾟﾝに追加ﾎﾟｲﾝﾄが必要でしたからその事ですね｡現在は追加ﾎﾟｲﾝﾄは発生しませんが､一旦ｽﾃｰﾀｽを変更していただいたのは､私としては助かりました｡ありがとうございます｡締め切りというか､受付終了で完全に質問が終了していましたけれど･･･もらった回答で解決する事が分かるまでは､締め切りにしておいた方が､後で質問を再開する事ができて便利です｡解決のご報告ありがとうございました｡

関連質問

●質問をもっと探す●

0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ