- ベストアンサー
IEで画像の横に表示される隙間について。
現在こちらのサイトで（http://www.black-inspiration.com/） 画像を横幅1260pxに合わせて隙間なく表示させようとしているのですが、 複数のブラウザでチェックするとIEだけ画像の左側にわずかな隙間が空いてしまいます。 ちなみにサイト構築にはwordpressを使用しています。 どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか？？ よろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>すみません、言っていませんでしたが僕は全くの趣味でHPを作りはじめてプログラミンに対する知識は全くありません。 HTMLのソースを見たのですが、HTMLとしてもひどいかなと・・・。 単なる趣味ならいいのですが、公開するならもうちょっとHTMLの知識をつけるべきだと思います。 >どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか？？ 左詰めでいいんですかね？ とりあえず構文的におかしなところを修正しました。 あと画像サイズですが、横幅が1265になっていましたが、1260に修正しました。 CSSの div#header, div#content, div#footer { width: 100%; /*(60%~ | 600px~ | 60em~) etc.*/ min-width: 1250px; max-width: 1250px; margin-right: 0px; margin-left: 0px; position: relative; text-align: left; } のmin-width: 1250px;、max-width: 1250px;も1260に修正したほうがいいと思います。 HTML <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head profile="http://purl.org/net/ns/metaprof"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="generator" content="WordPress 2.7.1" /> <meta name="author" content="BLACK INSPIRATION" /> <link rel="alternate" type="application/rss+xml" href="http://www.black-inspiration.com/feed" title="RSS 2.0" /> <link rel="alternate" type="application/atom+xml" href="http://www.black-inspiration.com/feed/atom" title="Atom cite contents" /> <link rel="stylesheet" type="text/css" href="http://www.black-inspiration.com/wp-content/themes/wp.vicuna/style.css" /> <meta name="description" content="[ MASATO MIURA / GRAPHIC PORTFOLIO BLOG / rami2929@gmail.com ]" /> <link rel="pingback" href="http://www.black-inspiration.com/xmlrpc.php" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.black-inspiration.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.black-inspiration.com/wp-includes/wlwmanifest.xml" /> <title>BLACK INSPIRATION</title> </head> <body> <div id="main"> <div id="header"> <p class="siteName" style="margin-left: 10px;"> <a href="http://www.black-inspiration.com"><font size="6" color="#696969" face="Georgia">BLACK INSPIRATION</font></a> </p> <p class="description" style="margin-left: 10px;"> <font size="2" color="#808080" face="Georgia">[ MASATO MIURA / GRAPHIC PORTFOLIO BLOG / rami2929@gmail.com ]</font> </p> </div> <div id="content"> <div class="section entry" id="entry35"> <div class="textBody"> <p><img alt="1" src="http://www.black-inspiration.com/image/3.jpg" width="1260" class="mt-image-none" style="" /></p> </div> <ul class="reaction"> <li class="comment"> <font size="2" color="#808080" face="Georgia" text-decoration: none;> <a href="http://www.black-inspiration.com/archives/35#comments" title=" へのコメント" rel="nofollow">Comments</a>: <span class="count">0</span> </font> </li> <li class="trackback"> <font size="2" color="#808080" face="Georgia"> <a href="http://www.black-inspiration.com/archives/35#trackback" title=" へのトラックバック" rel="nofollow">Trackbacks</a>: <span class="count">0</span> </font> </li> <li> <font size="2" color="#808080" face="Georgia">2009-05-13</font> </li> </ul> </div> </div> <center> <a href="http://www.black-inspiration.com/"><font size="2" color="#696969" face="Georgia">HOME</font></a>/ <a href="http://www.black-inspiration.com/archives/27"><font size="3" color="#696969" face="Georgia">1</font></a>/ <a href="http://www.black-inspiration.com/archives/29"><font size="3" color="#696969" face="Georgia">2</font></a>/ <a href="http://www.black-inspiration.com/archives/35"><font size="3" color="#696969" face="Georgia">3</font></a>/ </center> <div id="footer"> <ul class="support"> <li>Powered by <a href="http://wordpress.org/">WordPress 2.7.1</a></li> <li class="template"><a href="http://vicuna.jp/">vicuna CMS</a> - <a href="http://wp.vicuna.jp/" title="ver.1.5.8">WordPress theme</a></li> </ul> <address>Copyright © BLACK INSPIRATION All Rights Reserved.</address> </div> </div> <!-- tracker added by Ultimate Google Analytics plugin v1.6.0: http://www.oratransplant.nl/uga --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-8707347-1"); pageTracker._initData(); pageTracker._trackPageview(); </script> </body> </html>
その他の回答 (2)
- sh_hirose
- ベストアンサー率66% (56/84)
>ええと・・・wordpressを利用しているのですが、 >htmlを直接編集することは出来るのでしょうか。 WordPressいじったこと無いのでなんともいえませんが、WordPressの日本語サイトを見てみたところソースは正常でした。 質問者さんのソースは構文的におかしな所が多いので、何か設定をいじっていないですか？ わからないようでしたらもう一回WordPressをインストールしてみてはどうでしょう?
- 参考URL：
- http://ja.wordpress.org/
- atsak
- ベストアンサー率0% (0/1)
CSSを見れる状態にして頂かないとなんとも。 画像単体に限らずページ全体が中央寄せになってるのは問題ないのですか？ 中央寄せになっている為の左余白が原因なのなら、 ざっと見たところ<center>タグを使用している点と bodyのtext-align:center;が解けてないか、といった所でしょうか。 余計なお世話かもしれませんが、 <p><center><img src="..." /></center><p> となってますが、pタグにtext-align:center;ではダメなのですか？ XHTML宣言をしていることですしcenterタグは非推奨です。 imgタグがXHTML記述ですしどちらかに統一してはどうでしょう。
補足
早速の回答ありがとうございますっ。 すみません、言っていませんでしたが僕は全くの趣味でHPを作りはじめてプログラミンに対する知識は全くありません。 恥ずかしながら、感覚と勘を頼りに色々いじっています。 とりあえず<center>タグは解いてみましたが変化はありませんでした。 主要なCSSはこちらです。 （http://www.black-inspiration.com/wp-content/themes/wp.vicuna/style-flat/core.css） レイアウトはこちらで指定しています。 （http://www.black-inspiration.com/wp-content/themes/wp.vicuna/style-flat/layouts.css） もしよろしければ、極力初心者にも分かりそうな示唆を頂けると幸いです。 どうぞよろしくお願い致します。
補足
ご指摘ありがとうございます。 知識をつけるべき、ごもっともです。 ええと・・・wordpressを利用しているのですが、 htmlを直接編集することは出来るのでしょうか。 何やらもう知識が足りなすぎて一度出直した方がいいような気がしてきました。笑