HTML タグだと思うのですが、たとえば88×38 の画像を
ブラウザ画面上部に隙間をあかないように貼るにはどうしたらいいのでしょうか。
例えば以下のように、

<TABLE border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#63cf63" background="gif/line.gif">

とかやると、いっけん、きっちり貼れているように
見えるのですが、リロードしたり、リンクからページを
たどったりすると、時々画面右側が丁度スクロールバー
ぶんくらいのスペースが空いてしまい、白く抜けて
しまいます。
非常に見苦しいので、なんとかしたいです。。。

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

A 回答 (3件)

こんにちは。


いくつか方法あると思いますが、一番簡単なのは、88*38の画像の高さを3000くらいにして、余白をとった画像にしちゃって、<BODY>タグに背景指定する方法かな、と思います。
高さは、縦スクロールが最大に出た場合のページの高さ以上、が目安です(大抵、3000もあれば、事足ります)。

あとは、スタイルシートを使用する、という方法です。
横にだけ繰り返す、縦にだけ繰り返す、など指定できます。

横にだけ繰り返したいのであれば、

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<STYLE type="text/css">
<!--
BODY {
background: white url(画像URL);
background-repeat: repeat-x
}
-->
</STYLE>
</HEAD>
<BODY>
.....

というような感じで、スタイルシートを<HEAD>タグ内に記述します。
『repeat-x』とすると背景画像を横に1列だけ表示できます。縦なら、『repeat-y』に。

ただ、使い方や、ブラウザによってはスタイルシートの機能が使えなかったり、使えても、ユーザ側で使用しない、にチェックしてるとだめなので、微妙・・・・かな。

スタイルシートの詳しい解説については、以下を参照ください。

参考URL:http://www.zspc.com/stylesheets/
    • good
    • 0
この回答へのお礼

さっそくやってみたら、実にすっきりとできました。
1ヶ月くらい悩んでいた問題なので、感謝感激です。
20ポイントくらいしか差し上げられないのが
残念です。
回答誠にありがとうございました。

お礼日時:2002/04/11 13:11

<BODY bgcolor="#63cf63" background="gif/line.gif">


これじゃダメ?
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
上記の方法はやってみたのですが、少なくとも私の環境下
ではだめだったのです。。。

お礼日時:2002/04/12 15:38

こんばんは。


テーブルはどうも若干隙間が出ちゃったりしますよね。
じゃ、フレームで切っちゃうのはどうですか?
これなら隙間は空かないと思います。
何かもっとまともな方法もありそうですが....
単に思いつきです。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
フレームの方法は最後の最後の手段で考えていました。
他に方法はないものかと探っていたのですが・・・・
やはり手はそうそう残されていないようです。
アドバイス感謝です。

お礼日時:2002/04/11 13:03

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

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

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

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

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

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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で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画像を縦に並べたら隙間ができることについて

画像を縦に並べたところ隙間ができてしまいます。

隙間無くくっつけたいのですがどうすればいいのでしょうか。



以下htmlです。

<img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br />
<img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br />
<img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" />

<br />で改行せずくっつけてタグを並べても同じ結果でした。

よろしくお願いします。

Aベストアンサー

スタイルシートで次の1行を入れてください。

img { vertical-align: bottom; }


人気Q&Aランキング