現在こちらのサイトで(http://www.black-inspiration.com/
画像を横幅1260pxに合わせて隙間なく表示させようとしているのですが、
複数のブラウザでチェックするとIEだけ画像の左側にわずかな隙間が空いてしまいます。
ちなみにサイト構築にはwordpressを使用しています。
どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか??
よろしくお願い致します。

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

A 回答 (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.dt …
<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/them … />
<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/wlw … />
<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#com … 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#tra … 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"><f … size="3" color="#696969" face="Georgia">1</font></a>/
<a href="http://www.black-inspiration.com/archives/29"><f … size="3" color="#696969" face="Georgia">2</font></a>/
<a href="http://www.black-inspiration.com/archives/35"><f … 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 &copy;  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>

この回答への補足

ご指摘ありがとうございます。
知識をつけるべき、ごもっともです。
ええと・・・wordpressを利用しているのですが、
htmlを直接編集することは出来るのでしょうか。
何やらもう知識が足りなすぎて一度出直した方がいいような気がしてきました。笑

補足日時:2009/05/17 17:59
    • good
    • 0

>ええと・・・wordpressを利用しているのですが、


>htmlを直接編集することは出来るのでしょうか。
WordPressいじったこと無いのでなんともいえませんが、WordPressの日本語サイトを見てみたところソースは正常でした。
質問者さんのソースは構文的におかしな所が多いので、何か設定をいじっていないですか?

わからないようでしたらもう一回WordPressをインストールしてみてはどうでしょう?

参考URL:http://ja.wordpress.org/
    • good
    • 0

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/them …
レイアウトはこちらで指定しています。
http://www.black-inspiration.com/wp-content/them …

もしよろしければ、極力初心者にも分かりそうな示唆を頂けると幸いです。
どうぞよろしくお願い致します。

補足日時:2009/05/16 16:29
    • good
    • 0

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

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

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

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

Q長財布?二つ折り財布?

長財布にするか、二つ折り財布にするか悩んでいます。
今まで二つ折り財布ばかりでしたので長財布もいいなと思うんですが、二つ折り財布のコンパクトさにも惹かれます。
みなさんはどちら派ですか?
ご意見お願いします。

Aベストアンサー

男性です。
そのときの服装や場所に合わせて、両方使い分けています。
ただし、カードなどの入れ替えをわすれないように。

夏の薄着には二つ折りでズボンの後ろのポケットに。
冬は、上着を着るので長財布でも内ポケットに入ります。
ポシェットやバックを持つのであれば、常に長財布の方が便利です。

Qclip:rect(*px,*px,*px,*px)について

お世話になります

clip:rectを試しているのですが疑問があるので教えていただきたいのですが

<style type="text/css"><!--
#clip {
position:absolute;
clip:rect(5px,40px,40px,5px);
background-color:blue;
}
--></style>

<div id="clip">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</div>

Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されています

サイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど)
そしてclipを動的にするとIE6でもちゃんとなるのですが何故でしょう?

<script language="javascript"><!--
function move(ht,wr,hb,wl) {
obj = document.getElementById("game");
ht--; if(ht < 0) ht = 0;
hb++; if(hb > 300) hb = 300;
wr++; if(wr > 500) wr = 500;
wl--; if(wl < 0) wl = 0;
obj.style.clip = "rect("+ht+"px "+wr+"px "+hb+"px "+wl+"px)" ;
if(ht == 0 && wl == 0) return false;
setTimeout("move("+ht+","+wr+","+hb+","+wl+")",10);
}
//--></script>
<style type="text/css"><!--
#game {
width:500px;
height:300px;
background-color:lightcyan;
position:absolute;
}
--></style>
<body onload="move(150,250,150,250)">
<div id="game"></div>

お世話になります

clip:rectを試しているのですが疑問があるので教えていただきたいのですが

<style type="text/css"><!--
#clip {
position:absolute;
clip:rect(5px,40px,40px,5px);
background-color:blue;
}
--></style>

<div id="clip">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</div>

Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されています

サイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど)
そし...続きを読む

Aベストアンサー

訂正です。スレ読んだだけで仕様をしっかり読んでませんでした。

Authors should separate offset values with commas.
CSS記述者はオフセット値をカンマで区切るべきである。
User agents must support separation with commas,
User Agentsはカンマ区切りをサポート【しなければならない】が

but may also support separation without commas, because a previous revision of this specification was ambiguous in this respect.
この仕様の前回の版ではこの点について曖昧な記述だったため,
カンマなし区切りをサポートしても良い。

#おそらくIEの開発は,この前版までの情報を頼りに製作されていたんじゃないかなあ

Q財布についてです。 男です。長財布と二つ折り財布どちらの方がいいでしょうか? デートなどで手ぶらで行

財布についてです。
男です。長財布と二つ折り財布どちらの方がいいでしょうか?
デートなどで手ぶらで行く際は、二つ折りならポケットに入りますが、二つ折りは財布などが折れ曲がるデメリットもあります。

個人的な意見でいいので宜しくお願いします。

Aベストアンサー

長財布を後ろのポケットに1/3~半分くらい出して歩いている人を見かけますが、手ぶらならそういう感じもありますが、気付かずに抜き取られる可能性もありますね。ちょっと無防備な印象を受けます。
二つ折の方はポケットに入りますが、それでも小銭やお札がかさばるとポケットが膨らんだ感じで、これもちょっといざという時にポケットから出し難いかも知れません。
ここはいっそうのこと、どっちが使いやすいか・使い勝手がいいかで選んだらどうでしょう?
二つ折は財布が曲がることで用を成しますから、それが気になるならば必然的に長財布ということになりそうです。

Qスマホ横幅が720px だけ 横が倍くらいはみ出る。

PCのサイトのサイズが横幅940pxのサイトで、ナビゲーションもなくサイバーのない
1カラムですので、そのままスマホに反映すればいいものです。

iPhoneと大半のアンドロイドでみると、ちゃんと枠に収まっているのですが、
特定の機種、今のところ、Ascend G620Sのディスプレイ横幅が720px だけ
横が倍くらいはみ出でます。


viewportは以下になっています。
document.write('<meta name="viewport" content="width=940px,target-densitydpi=device-dpi,user-scalable=yes">\n');

最初 width=device-width、,initial-scale=1 でやったらすべてがはみ出ました。 

Ascend G620Sでもちゃんと収まるにはどうしたらいいのでしょうか?

Aベストアンサー

なぜjavascrit??
javascriptは、ユーザー側のセキュリティ設定やブラウザ自身の機能差で動作しないことも・・
 動作しないときは致命的になる場面には使用しない。
単純に<header></header>内に書けば良い。

 なお、プレゼンテーションで左右に何もおかないのでしたら、幅を固定せずにリキッドで作成すれば良いのでは??
 mediaqueryは、以前から存在するメディア別スタイルシートの拡張です。すなわち、
media="screen"と併用する。
リキッドデザインであること
に追加するものなのです。

screenメディアにおいて
1) リキッドでデザインして、840~1200px程度はサイドにナビゲーションnavや(直接無い用途は関係ない)関連記事asideを配置しておく
 印刷(media="print")や携帯電話(media="handheld")には、navやasideは本文(section)のあと
2) screenにおいて、840pxより狭い場合は、asideは後回し、640より狭いとnavも後回し。
 リンクはボタンにする。
などと使います。

>PCのサイトのサイズが横幅940pxのサイト
 幅を固定したらHTMLで作成する最大の目的が失われてしまいます。

【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで
[Introduction to HTML 4 (ja)]( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )より

なぜjavascrit??
javascriptは、ユーザー側のセキュリティ設定やブラウザ自身の機能差で動作しないことも・・
 動作しないときは致命的になる場面には使用しない。
単純に<header></header>内に書けば良い。

 なお、プレゼンテーションで左右に何もおかないのでしたら、幅を固定せずにリキッドで作成すれば良いのでは??
 mediaqueryは、以前から存在するメディア別スタイルシートの拡張です。すなわち、
media="screen"と併用する。
リキッドデザインであること
に追加するものなのです。

screenメディア...続きを読む

Q二つ折り財布について

財布は基本的に長財布と二つ折り財布にわかれますが、ジャケットの内ポケットにいれる場合は長財布のほうが適しているのでしょうか?
どうしても長財布はデザインが好きになれないのですが二つ折りをジャケットの内ポケットに入れていたら不便ですか?(二つ折りは膨らみやすいので不格好になってしまうでしょうか?)
もし二つ折りを内ポケットに入れる方がいたら、厚くならないような工夫を教えていただけたら嬉しいです。

Aベストアンサー

上着は脱いだりする場合が結構多いですから、財布や車のキーなどは何時もズボンです。

で、二つ折りを使用していますが、現金は5万以内、カード数枚・・コレが収納物ですから、膨らむなんて有りません。

コインは、バラでズボンポケットです。

Q横幅1200pxのHPをセンタリングしたい

みなさま、お知恵を貸してください。

今HPを作っています。
横幅1200pxで作成いたしまして、
ブラウザ横幅1200px以下で見たときに全体をセンタリングした状態で表示したいのです。

サイト全体の横幅をそもそも変えれば、、というのは時間が限られておりできません。。

CSSやJSでなんとか調整できませんでしょうか。

なお、ブラウザが横幅980px以上では横スクロールを消したいです。

コーディング初心者のためなかなか解決策が見つかりません。。

どうぞよろしくお願い致します。

Aベストアンサー

文字は980px分の幅で中央に、画像は幅980以上は縮小する方向、幅980以下はそのままで・・・を条件に見栄えも考慮すると、CSSはこんな感じでしょうか。

<style type="text/css">
<!--
*{
max-width: 980px;
min-width: 0px;
margin: 50 auto;
}
-->
</style>

参考ページを作ってみました。
■table 1200幅の未調整
http://members3.jcom.home.ne.jp/kazzazy/test/w1200_1.html

■table 1200幅で上記style摘要
http://members3.jcom.home.ne.jp/kazzazy/test/w1200_2.html

html記述はいい加減なのでつっこまないでください(笑

Qブランドの二つ折り財布

二つ折り財布に関して教えてください。
グッチとかビィトンの二つ折りのお財布とかは男女共有で持てるものなのでしょうか。
男性が持っているとおかしいと思うデザインなんか
ありますか?

Aベストアンサー

女性の場合は財布を鞄などに入れている人が多いと思うのですが、男性の場合、ズボンのヒップポケットに入れたり、ジャケットの内ポケットに入れたりするので、2つ折のタイプだとかさ張るので敬遠する人も多いようです(私もそのひとりです)。それ以外では2つ折だからといって、男性が持っておかしい、ということはないと思います。むしろ2つ折かどうかより、そのブランドによるんじゃないでしょうか?ヴィトンは許せても、グッチは男性が持つのはちょっと、、、とか(あくまで私見ですが)。

Q横幅1100pxのサイトをレスポンシブ対応したい

body直下のdiv#containerを1100pxで作成したサイトがあるのですが
レスポンシブ対応することは可能でしょうか?

現状左端が少し見切れている
float配置した部分が2箇所カラム落ちしている

程度なのですが、みなさんならどういった方法で
スマートフォン対応されますか。

ちなみにbodyには横100%の背景画像が設定してあり
イメージとしては下記のようなサイトになります。
ttp://www.cbon.co.jp/net/

ご意見伺えれば嬉しいです。
よろしくお願いいたします。

Aベストアンサー

・幅を指定しない
・floatは使わない
それでも難しい場合はmediaquery(スマホは対応)を使用する。
背景画像は、CSS2.1の範囲内でしたら 0 50% で指定する。CSS3が可能(スマホ)ならbackground-size:cover;を使用する。

 そもそも、はなから640px~に対応させていますので、スマホと言って特別することはありません。

QA4を二つ折りにして製本する為の印刷方法

長い文書を製本したいと考えています。
部数は多くないので、手作業で
プリンタで裏表を印刷して、二つ折りにして、
折った側を糊付けとプレスでできると思いますが、印刷方法で悩んでいます。

A4横の縦書きで約70ページあります。
二つ折りにしたA5の形で閉じようと思っているのですが
普通に二つ折りにしたら、140ページになってしまいます。
プリンタで裏表を印刷して、二つ折りにして、
折った側を糊付けとプレスでできると思いますが、印刷方法で悩んでいます。

WORDで作った文書ですが、このような場合に 指定できる印刷方法はあるでしょうか?
判りにくいと思いますが、1枚目の表には製本した時の2、3頁、裏には1,4ページ、
2枚目は、表6,7ページ、裏5、8ページ・・・に自動的になってくれればいいのですが。

直接WORDの機能でじゃなくて、そういった場合のノウハウ、コツをご存知の方、
そんなサイトをご存知の方・・・よろしくお願いします

Aベストアンサー

Word2002以降なら[ページ設定]で[複数ページの印刷設定]
を[本(縦方向に谷折り)]等にすることで[中綴じ]と同じ
ことを簡単に出来ます。
http://office.microsoft.com/ja-jp/assistance/HP030729491041.aspx
http://office.microsoft.com/ja-jp/assistance/HP030729501041.aspx

こちらはコツのようです。
http://www.geocities.jp/ryou_tanoue/topics/03.htm
http://jikasei.fc2web.com/3-01.html

Word2000以前の中綴じ印刷用のフリーソフト
http://www.turtle-west.co.jp/SoftListFrame.htm

Q

はじめまして。
現在movabletype3.35で初めてサイトを作成している者です。
宜しくお願いします。

下記にありますHTMLとCSSでページを作っているのですが、

Firefoxやsafariで確認すると、

<div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている
<div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。

※IE7では隙間は出来ませんでした。

<div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス
<div id="pankuzu">
<div id="introduction">

これら3つのボックスには全てCSSでmarginとpaddingを調整しているつもりなのですが、どうしてもIE7と同じように表示されず隙間が出来てしまいます。。

ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。

ということは、<div id="introduction">の中のHTMLかCSSの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。

是非ご指導、ご鞭撻宜しくお願い致します。


----------------------------------------------------------------
【CSS】

* {
margin: 0;
padding: 0;
border: 0;
background-color:transparent;
color: #333;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration: none;
}


div#keyvisual {
width: 780px;
height: 100px;
margin: 10px 10px 0 10px;
padding: 0;
background: url("※※※.gif")
no-repeat 0 0;
}

div#title {
width: 500px;
height: 50px;
line-height: 350%;
margin: 0 0 0 10px;
padding: 0;
}

div#pankuzu {
width: 780px;
height: 20px;
margin: 0 10px 0 10px;
padding: 0;
background-color: #999;
}

div#pankuzu p {
font-size: 50%;
}

div#introduction {
width: 780px;
height: 50px;
margin: 0 10px 0 10px;
padding: 0;
background-color: #999;
}

dl#site {
margin: 0;
padding: 0;
}

dl#site dt {
display: block;
float: left;
clear: left;
width: 160px;
margin: 15px 5px 10px 5px;
padding: 0;
font-size: 90%;
text-align: left;
background-color: #fff;
}

dl#site dd {
width: 600px;
margin: 15px 5px 10px 5px;
padding: 0;
font-size: 80%;
text-align: left;
}
---------------------------------------------------------------
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">

※ヘッダー部分は省略しています。

<!-- サイトボディー部分ここから -->
<body>
<div id="container">
<div id="keyvisual">
<div id="title">
<h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1>
</div>
</div>
<!-- パン屑リスト -->
<div id="pankuzu">
<p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$>
</p>
</div>

<div id="introduction">
<dl id="site"><dt>題名</dt><dd>説明</dd></dl>
</div>
----------------------------------------------------------------

はじめまして。
現在movabletype3.35で初めてサイトを作成している者です。
宜しくお願いします。

下記にありますHTMLとCSSでページを作っているのですが、

Firefoxやsafariで確認すると、

<div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている
<div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。

※IE7では隙間は出来ませんでした。

<div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス
<div id="pankuzu">
<div id="in...続きを読む

Aベストアンサー

dl#site dd のmargin-top:15pxが
上に突き出ている感じですね。
周囲の要素のPaddingで代用してはいかがでしょうか。


人気Q&Aランキング

おすすめ情報