- ベストアンサー
画面左上に出る微妙な空白の消し方
ホームページを作成していて、フレームを上下に分けて 上の小さいフレームにぴったりの大きさのロゴを作りました。 そこでページを表示させてみたら画像（というかページ）の左上に縦横5mmずつくらいの空白が出ていて、 画像がフレームからはみ出してドラッグしなければ完全に表示されなくなってしまいます。 同じような感じでフレームの中のページ単体では空白が出来ていても くっつけるときちんと空白が埋まっている方もいて（ソースを拝見したんですが、よく分からなくて…） もしぴったり画像を表示出来る方法がありましたらお教えいただきたいと思います。 ＊ 背景画像を繰り返している上に透過GIFのロゴを乗せているので、 ロゴ画像自体を背景に設定して左上に固定…という方法以外でお願いします…
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> <frameset rows="40,*" border="0"> 上記の「上の小さいフレーム」に表示させている「背景画像を繰り返している上に透過GIFのロゴを乗せている」HTMLファイルがある筈ですね？ 仮にそのHTMLファイルの名前を"top.html"とします。 "top.html"には、<img src="images/logo.gif" alt="ロゴ" width="214" height="40">という様な感じでロゴ画像が参照されているものと思います。であれば、この"top.html"のbodyの余白（ディフォルトではUA依存の余白ができます）をCSSで0に初期化してやる必要があります。CSSは使われていますか？以下は一例です。 【top.html】サンプル ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> （省略） <title>サンプル</title> （省略） <style type="text/css"> <!--// body { marign: 0; padding: 0; } --> </style> </head> <body> <img src="images/logo.gif" alt="ロゴ" width="214" height="40"> </body> </html> ---------------------------------------------------------------------- こんな感じです。<style type="text/css">～</style>部分はできる限り外部スタイルシートにして管理する方が望ましいですが。
その他の回答 (3)
CSSで画像自体に「margin:0px;」で指定したら如何でしょうか？
お礼
回答ありがとうございます。 CSSは使っていなかったので弄ってみたのですが あまり私には使いこなせないようで… ！ すみません。しかしhead内に組み込んだら表示することが出来ました！
- gityotan
- ベストアンサー率53% (23/43)
<frameset （略）frameborder="0" framespacing="0"> か、 <frame src="上のファイル名.html" marginwidth="0" marginheight="0"> で、どうでしょうか。
お礼
回答ありがとうございます。 どちらも試してみたのですが、駄目みたいでした。（やり方が悪いのかもしれません…）
- ddg67
- ベストアンサー率22% (1211/5475)
あなたのパソコンのモニターの大きさと、ブラウザの表示領域の大きさをちゃんと考えて、元画像を作ってありますか？
お礼
回答ありがとうございました！ 無事表示することが出来ました。
補足
えっと、フレームは%指定ではなく <frameset rows="40,*" border="0">というようにして、 プリントスクリーンなどで大きさも確かめて214x40のものを作ったので 大きさに関しては多分大丈夫だと思います…
お礼
回答ありがとうございます。 CSSは使っていなかったので分からないことだらけで…。 自分なりにいろいろ調べたり試行錯誤していて head内で <!--//を<!--に、 marignをmargin（タイプミスでしょうか）に変えてみたら 無事表示することが出来ました。本当にありがとうございます。