- ベストアンサー
IEで画像の横に表示される隙間について。
現在こちらのサイトで（http://www.black-inspiration.com/） 画像を横幅1260pxに合わせて隙間なく表示させようとしているのですが、 複数のブラウザでチェックするとIEだけ画像の左側にわずかな隙間が空いてしまいます。 ちなみにサイト構築にはwordpressを使用しています。 どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか？？ よろしくお願い致します。
- SAI-777
- お礼率65% (13/20)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （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） もしよろしければ、極力初心者にも分かりそうな示唆を頂けると幸いです。 どうぞよろしくお願い致します。
関連するQ&A
- 携帯ホームページで横480の画像を表示させるには
携帯ホームページで横480の画像を表示させるには 私は携帯でイラストサイトを運営しています。 今までは横幅230pxの画像のみを展示していたのですが、大画面の携帯に買い換えた祭、そのサイズだと画像が小さくてモザイクがかかっている様に表示されます。 他の創作サイト様を拝見させていただいていると、たまに横幅480px(VGA？)サイズの画像を見かけるのですが、このサイズだととてもキレイに画像が表示されます。 そこで我がサイトでも横幅480pxの画像を230pxのものとは別に展示したいと思ったのですが、自分の携帯のデータフォルダ内では表示されるのに、webに上げると表示されなくなってしまいます。 横幅480pxの画像を携帯サイトで表示させるには、何か特別な手順を踏まなければいけないのでしょうか。 どなたか回答おねがいします。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- IE6で隙間ができてしまう
IE6でヘッダーとコンテンツの間に隙間ができてしまいます。 IE7、Firefox、Safariでは問題なく表示されています。 [HTML] <div id="top"> <div id="topcont"> <h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1> </div></div> <div id="navi"> <div id="navicont"> <ul> <li id="home"><a href="http://www.AAA.com/" title="AAA">AAA</a></li> <li id="BBB"><a href="http://www.AAA.com/BBB.html" title="BBB">AAAについて</a></li> <li id="CCC"><a href="http://www.AAA.com/CCC.html" title="CCC Lesson">CCC</a></li> </ul> </div> </div> [CSS] #top { background: url(img/IIIII.jpg) repeat-x; margin: 0px; padding: 0px; height: 80px; } #topcont { background: url(img/III.jpg) repeat-x; margin: 0px auto; padding: 0px; height: 80px; width: 900px; } #navi { background: url(img/NNN.gif) repeat-x; text-align: center; margin: 0px; padding: 0px; height: 35px; } #navicont { margin: 0px auto; padding: 0px; height: 35px; width: 900px; } 隙間を無くすにはどうすればよいのでしょうか。 わかる方いらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- HTML
- IE6で外部リンク画像の下に隙間
IETesterの6で確認していたところ、 外部スタイルシートの画像の下に隙間（10px程）ができてしまいます。 Firefox、IE8、IE7ではこの現象は見られませんでした。 以下記述となります。 /* HTML */ <div id="bg_top01"></div> <div id="contents_box01">あああ</div> <div id="bg_btm01"></div> /* CSS */ #bg_top01 { background:url(../img/bg_top.gif) no-repeat; width:760px; height:6px; } #contents_box01 { background-color:#2F4473; width:716px; padding:0 22px; } #bg_btm01 { background:url(../img/bg_btm.gif) no-repeat; width:760px; height:6px; } 隙間ができるのはbg_top01の下だけです。 他のサイトで「vertical-align: bottom」を入れると直るあったので、入れてみたんですが変わりませんでした。 隙間をなくすのに他に方法がありますでしょうか？ ご助言をお願いいたします。
- ベストアンサー
- HTML
- IEだと一部画像が表示されません。
IEだと一部画像が表示されません。 Movable Typeで新しくサイトを製作中です。 だいたい出来上がったのですが、 IEだと左上側のロゴが表示されません。 （赤の×がでて表示されないのです。） 他のブラウザでFirefoxやSafariでは表示されるので IE特有の現象なのです。 CSSを見たり、テンプレートを見ているのですが どうしても左側のロゴの表示が出ません。 フロート関係かと思い画像表示サイズも変えましたが 変化なしでした。 表示させるためにはCSSをどのように修正すればよいのでしょうか？ Movable Typeで作っているのでMovable Typeのテンプレートの問題なのでしょうか？ ご存知の方いらっしゃいましたらご教授いただければと思います。 下記のURLです。 http://www.mathuriya.com/mt よろしくお願い致します。
- ベストアンサー
- ブログ
- ＩＥでの画像表示がうまくいかない
幅が3000ピクセル近くある大きな画像を（縦は630程） 背景にして、（Dream weaver3で作成）ブラウザでの表示を確認すると、 （そのままでは左３分の１しか表示されないため画像と同幅のテーブルを配置して画面がスクロールされるようにしています） ネスケではちゃんと表示されるのですが、 ＩＥ上では右側３分の１程が切れいて、かわりに左側３分の１の画像が表示されるという状態になってしまいます。 背景ではなく、ページ上に普通に配置した場合は、 こちらもＩＥのみ画像が横に1.5倍程拡大された表示になります。 ＩＥでは大き過ぎる画像はうまく表示されないのでしょうか？ アドバイスをお願いします！！！！
- ベストアンサー
- HTML
- IE７の表示崩れを直したい
CMSでCSSを使ってサイトを作成するにあたり、IE7だけ表示が崩れてしまうのですが、何が原因で崩れてしまうのかがわかりません。 IE6、IE8、Firefox、Opera、Safariともに表示が崩れないのですが、これはIE7単体のバグなのでしょうか？ ・サイトURL http://www.tantanmen.com/site/index.html ・CMSは、SOY-CMSを使っています。 おそらくは、大きな画像部分のCSSの記述の問題化と思うのですが、このように記述しております。 /*トップイメージの設定*/ #top_image { width: 1000px; height: 528px; clear: both; width: 1000px; height: 528px; padding: 0; background: url("img/top_image01.jpg") 0 0 no-repeat scroll; text-indent: -9999px; display: block; } どうぞ、よろしくお願いいたします！
- ベストアンサー
- HTML
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- IE7で表示が拡大される
新規購入したパソコンでブラウザをIE7にしたら、表示するサイトの縦横とも拡大されて、これまでのバージョンでは横幅はぴったり画面にはまっていたのに、横スクロールしないと右1/4ほどが見えなくなってしまいました。全画面表示にしても文字の大きさを小さくしても縮小しても、見難さは変わりません。 閲覧しているサイトに合わせた横幅表示にするにはどうしたらいいのでしょうか？
- ベストアンサー
- ブラウザ
補足
ご指摘ありがとうございます。 知識をつけるべき、ごもっともです。 ええと・・・wordpressを利用しているのですが、 htmlを直接編集することは出来るのでしょうか。 何やらもう知識が足りなすぎて一度出直した方がいいような気がしてきました。笑