これからの季節に親子でハイキング! >>

下記のページを見てみてください。
Yahooのジオシティーズを借りてますので変なページではありません。
http://www.geocities.jp/shiori1522/index.html

フッター部分に、「copyright・・・・・」と記述があるところですが、
灰色のbackgroundを使ってます。
その灰色backgroundでフッターはぴったり終わってほしいのですが、
その下に、5mm程度でしょうか。余白が確認できます。
ブラウザによって異なるのかと思いましたが、
IE8、FireFox、Googleクローム、Operaなどいずれも余白が出来ます。

事前に調べてもみましたが、
bodyにmargin 0を記述するとかもすでにやってますがうまくいきません。
どこを修正すればいいでしょうか?
CSSは、下記のURLにあります。
よろしくお願いいたします。

http://www.geocities.jp/shiori1522/main_10C_2c.css
http://www.geocities.jp/shiori1522/container_10C …
http://www.geocities.jp/shiori1522/user.css
http://www.geocities.jp/shiori1522/hpbparts.css

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

画像 解析」に関するQ&A: 画像解析プログラム

A 回答 (1件)

うーん、私も1時間以上悩んでしまいました(汗


どうやら、原因は2つあったようです。



[原因1] #hpb-container に clearfix が指定してある
container_10C_2c_topleft.css に、『#hpb-container:after{…}』の部分があると思います。(42~48行目辺り)
このスタイル指定を入れた意図はわかりませんが、私が見る限りは不要だと思います。
しかも、これがあることによって、フッターに余白を作ってしまっています。
これは削除していいと思います。


[原因2] geocities の画像型アクセス解析がページ下部に存在している
geocities には、ページの最後に 1px×1px の画像を埋め込んで、アクセス解析をする機能があるようですが、
これがある為に、ページ下部に隙間ができてしまっています。
この画像を見えなくするために、以下の CSS をどこかに追加しましょう。
body > img {display:none;}
(尚、画像を見えなくするようにしても、画像のリクエストは飛ぶので、アクセス解析に影響が出ることはありません。)



以上の2つを直せば、フッターはページ下部に密着します。

ご参考になれば幸いです。
    • good
    • 0
この回答へのお礼

ご回答くださりありがとうございます!
1時間以上も悩まれてしまったなんて、本当に申し訳ございませんでした…。
これだけがどうしても直らずにずっと悩んでいたので、ほんとに感謝してもしきれない気持ちです。
おかげ様で理想の形にすることが出来ました!
私一人の力では到底無理でした。
あらためてお礼を言わせて下さい。
本当に助かりました!
ありがとうございました!

お礼日時:2013/09/16 13:59

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qページ下部のDIV要素下部に不要な余白

お世話になります。
早速ですが、以下のようなHTMLを記述しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
width:100%;
background-color:#FFFFFF;
}
#wrapper_out{
margin:0px auto;
width:100px;
background-color:#FFCCFF;
}
#bottommarginbox{
height:5px;
width:5px;
background-color:#66FFFF;
margin:0px auto;
}

</style>
</head>

<body>
<div id="wrapper_out">
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>
</div>
<div id="bottommarginbox"></div>
</body>
</html>
※上記のHTMLソースはあくまでも事象確認用にコーディングしたものです。

改行が多数入っているので、表示させるとブラウザに縦スクロールバーが出現します。この状態ではdiv#bottommarginboxがページ最下部にくっついて表示されると予想していたのですが、WindowsXPのIE6とIE7ではいずれもdiv#bottommarginbox(ページ最下部の水色の小さな四角)の下に謎の余白が発生します。
ちなみにFireFox2、Opera9、Safari3ではいずれもこの事象は発生しませんでした。
なんとなくIEのバグっぽくはあるのですが、対処方法などご教授いただければ幸いです。よろしくお願いします。

お世話になります。
早速ですが、以下のようなHTMLを記述しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
width:100%;
background-color:#FFFFFF;
}
#wrapper_out{
margin:0px auto;
width:100px;
backg...続きを読む

Aベストアンサー

ANo.2、4です。
divの解釈の違いというかIEのバグかと思います。

最初の回答の内容は、スクロールバー下にびみょ~な隙間があったので、そのことかと思いましたが、よく見るとdiv#bottommarginboxの高さがFirefoxとIEで違うことに気づきました。
計ってみたら、IEでは5pxの指定にもかかわらず、18pxほどありました。
IEの場合、1文字分の高さをデフォルトでもってしまっているようです。

なので、高さを5pxに設定し、溢れた分を表示しない
⇒overflow:hidden;
でdivの高さがIEでも利くということになります。

参考URL:http://cssbug.at.infoseek.co.jp/detail/winie/b158.html

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qフッターの下に隙間ができてしまう

スクロールバーが出ているのにフッターの下に隙間ができて、背景の白い部分が見えてしまい困っています。どうしたらフッターをウィンドウの下にくっつけられますか?
<style type="text/css">
<!--
#headder {
height: 100px;
background-color: #CC0000;
}
body {
font-family: "MS ゴシック", "Osaka-等幅";
margin: 0px;
}
#base {
width: 780px;
margin-right: auto;
margin-left: auto;
}
#footer {
text-align: center;
height: 50px;
background-color: #CC0000;
clear: both;
}
address {
padding: 10px;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #666666;
font-size: 90%;
font-style: normal;
}
#menu {
width: 180px;
}

#main p {
line-height: 1.5em;
text-decoration: none;
letter-spacing: 3px;
}
-->
</style>
</head>
<body>
<div id="base">
<div id="headder">
<h1>USOマーケティング株式会社</h1>
</div>
<div id="main">
<h2>実店舗の売り上げ、このままでいいですか?</h2>
<p>
ネットも併用して効果を上げる時代がやってきました。実際の調査に基づいた様々なマーケティング手法によって、企業支援を行います。私たちにお任せください。<br>
</p>
<h3>プレスリリース</h3>
<div id="press">
<p> <span class="day">2008年11月</span><br>
WEBデザイナー辞典にサンプルホームページとして公開しました。このHPはリニューアルの課題です。実際に存在しないHPですのでご注意ください。<br>
<br>
<span class="day">2008年11月</span><br>
赤い活動的な、イメージを希望しています。また、もっともっと売れるデザインにしてほしいそうです。<br>
<br>
<span class="day">2008年11月</span><br>
資料請求が非常に少ない状態です。なんとか資料請求を増やす工夫はないものでしょうか。<br>
<br>
<span class="day">2004年11月</span><br>
サンプルニュースです。</p>
<span class="day">2004年11月</span><br>
赤い活動的な、イメージを希望しています。また、もっともっと売れるデザインにしてほしいそうです。<br>
<br>
<span class="day">2004年11月</span><br>
資料請求が非常に少ない状態です。なんとか資料請求を増やす工夫はないものでしょうか。<br>
<br>
<span class="day">2004年11月</span><br>
サンプルニュースです。</p>
</div>
<a href="http://www.it-work.jp/web-designer/contents/exhibition/" target="_blank"><img src="image/subject_b.gif" alt="WEBデザイン課題" width="373" height="24" border="0"></a> </div>
<div id="footer">
<address>
Copyright 2004 sample Co.,Ltd. All rights reserved.
</address>
</div><!--footter終わり-->
</div><!--base終わり-->
<br>
</body>
</html>

スクロールバーが出ているのにフッターの下に隙間ができて、背景の白い部分が見えてしまい困っています。どうしたらフッターをウィンドウの下にくっつけられますか?
<style type="text/css">
<!--
#headder {
height: 100px;
background-color: #CC0000;
}
body {
font-family: "MS ゴシック", "Osaka-等幅";
margin: 0px;
}
#base {
width: 780px;
margin-right: auto;
margin-left: auto;
}
#footer {
text-align: center;
height: 50px;
background-color: #CC0000;
clear: both;
}
...続きを読む

Aベストアンサー

baseが終わった後に、<br>で強制的に一行空けてますね。
これをヤメたらどうでしょう。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qヘッダーの上にほんのわずかに隙間ができる

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!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">

<head>
<meta http-equiv="&rdquo;Content-Type&rdquo;" content="&rdquo;text/html;" charset="utf-8&rdquo;" />

でございます。教えてgooのトップ(http://oshiete.goo.ne.jp/)も一番上("質問&回答 (Q&A) コミュニティ - 教えて!goo"のところです)は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか?どなたかアドバイスをお願いします。

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE htm...続きを読む

Aベストアンサー

<body>タグの属性に topmargin="0" を指定してみて下さい。
隙間がなくなると思います。

同様に<body>タグに leftmargin="0" なんて指定したら左にピタっとくっついたページになりますよ^^

<!-------------------------------------------------------->

<html>
<head>
<title>詰めテスト</title>
</head>
<body topmargin="0">
<div style="border:1px solid blue">上詰めテスト</div>
</body>
</html>

<!-------------------------------------------------------->

Qフッター上部に謎の隙間

フッター上部に謎の隙間ができて困っています。
以下ソースになります。

『HTMLソース』

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>サンプルページ</title>
<meta name="description" content="" />
<meta name="author" content="." />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".hide").hide();
$(".btn").click(function(){
$(".hide").next().slideToggle();
});
})
</script>
</head>
<body>
<div id="conteiner">
<header>
<div class="center">
<h1>ヘッダー</h1>
</div>
</header>
<div id="box_001">
<div id="box_002">
<div class="center">
<h2>見出し</h2>
<p class="btn">ボタン</p>
<ul>
<li><img src="A.png" alt="img" width="250" height="250" /></li>
<li><img src="A.png" alt="img" width="250" height="250" /></li>
<li><img src="A.png" alt="img" width="250" height="250" /></li>
<li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li>
<li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li>
<li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li>
</ul>
</div>
</div>
</div>​​
<footer>
<div id="box_003">
<p>フッター</p>
</div>
</footer>
</div>
</body>
</html>

『CSSソース(style.cssで読み込んでます)』

html,body {
height: 100%;
width: 100%;
}

#conteiner {
width: 100%;
height: 100%;
}

.center{
width: 100%;
max-width: 1040px;
height: auto;
margin: 0 auto;
}

.center:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}

header {
width: 100%;
height: 300px;
background: #ff7f50;

}

#box_001 {
background: #4169e1;
}

#box_002 {
background: #4169e1;
}

#box_001 ul {
margin-bottom: 150px;
}

#box_001 ul li {
float: left;
margin: 40px;
}

footer {
width: 100%;
height: 150px;
background: #ff7f50;
}

footer p {
line-height: 150px;
text-align: center;
}

フッター上部に謎の隙間ができて困っています。
以下ソースになります。

『HTMLソース』

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>サンプルページ</title>
<meta name="description" content="" />
<meta name="author" content="." />
<meta name="viewport" content="width=d...続きを読む

Aベストアンサー

>> 原因ってわかりますか?

こういう場合は不要なものを排除して考えるのよ
ボディタグの中で<div>~</div>等をどんどん削除すると

<body>
​​
<div id="box_003">
<p>フッター</p>
</div>
</body>

こうなるわね
すると、一目瞭然
ブロック要素である<div>の直前にスペースがあるから
その行が1行追加されてしまっているのね

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング