• ベストアンサー

画面左上に出る微妙な空白の消し方

ホームページを作成していて、フレームを上下に分けて 上の小さいフレームにぴったりの大きさのロゴを作りました。 そこでページを表示させてみたら画像(というかページ)の左上に縦横5mmずつくらいの空白が出ていて、 画像がフレームからはみ出してドラッグしなければ完全に表示されなくなってしまいます。 同じような感じでフレームの中のページ単体では空白が出来ていても くっつけるときちんと空白が埋まっている方もいて(ソースを拝見したんですが、よく分からなくて…) もしぴったり画像を表示出来る方法がありましたらお教えいただきたいと思います。 * 背景画像を繰り返している上に透過GIFのロゴを乗せているので、 ロゴ画像自体を背景に設定して左上に固定…という方法以外でお願いします…

  • HTML
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.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>部分はできる限り外部スタイルシートにして管理する方が望ましいですが。

karin14
質問者

お礼

回答ありがとうございます。 CSSは使っていなかったので分からないことだらけで…。 自分なりにいろいろ調べたり試行錯誤していて head内で <!--//を<!--に、 marignをmargin(タイプミスでしょうか)に変えてみたら 無事表示することが出来ました。本当にありがとうございます。

その他の回答 (3)

noname#100277
noname#100277
回答No.3

CSSで画像自体に「margin:0px;」で指定したら如何でしょうか?

karin14
質問者

お礼

回答ありがとうございます。 CSSは使っていなかったので弄ってみたのですが あまり私には使いこなせないようで… ! すみません。しかしhead内に組み込んだら表示することが出来ました!

  • gityotan
  • ベストアンサー率53% (23/43)
回答No.2

<frameset (略)frameborder="0" framespacing="0"> か、 <frame src="上のファイル名.html" marginwidth="0" marginheight="0"> で、どうでしょうか。

karin14
質問者

お礼

回答ありがとうございます。 どちらも試してみたのですが、駄目みたいでした。(やり方が悪いのかもしれません…)

  • ddg67
  • ベストアンサー率22% (1211/5475)
回答No.1

あなたのパソコンのモニターの大きさと、ブラウザの表示領域の大きさをちゃんと考えて、元画像を作ってありますか?

karin14
質問者

お礼

回答ありがとうございました! 無事表示することが出来ました。

karin14
質問者

補足

えっと、フレームは%指定ではなく <frameset rows="40,*" border="0">というようにして、 プリントスクリーンなどで大きさも確かめて214x40のものを作ったので 大きさに関しては多分大丈夫だと思います…

関連するQ&A

  • イラストレーターで作るgif透過画像について、色々調べてやってみたので

    イラストレーターで作るgif透過画像について、色々調べてやってみたのですが思うように出来ません。バージョンはcs4です。 たとえば「黒背景に浮かぶロゴ」のgif画像で、使うときは後ろの黒背景を表示させないようにするにはどうすればいいでしょうか?

  • JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです

    JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか? 例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる(載せる)と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。 現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。 マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。

  • ImageMagickで透過GIFアニメが変です

    PHPでGIFアニメを作成しています。 PHP(元GIF作成)=>ImageMagick(GIFアニメに変換)という流れです。 背景を透過にして動きがあるものを作ってみると、以前のフレームの画像が 全て残ったようなアニメになってしまいます。まるで透明な紙に書いた パラパラマンガというような感じです。 原因追求の為、作成したGIFアニメをフレーム毎に分解してみると、 後に表示されるフレームには、それまでに表示されていたフレームの 画像が全て書き込まれていました。 また元画の背景透過を止めると、正しいアニメになり、作成したGIFアニメ の各フレームも正しい画像になっています。 背景を透過で作成したいのですが、どなたか解決策を教えて下さい。 ちなみに exec("/usr/local/bin/convert -dispose none -delay 20 image*.gif -loop 0 $path/animatedimage.gif", $err); という感じでアニメ化しています。

  • mixiでのGIF動画の再生不具合

    お世話になっております。 mixiにてコミュニティを立ち上げようと思い、コミュニティトップ画像用でGIF動画を作りました。 フレーム数は2フレーム、サイズは120px×120pxで容量は3.82KB。 パソコンでトップ用画像をアップロードした所、パソコンからはGIF動画は正常に表示されました。 しかし携帯(au W52SH)から閲覧してみると、GIF画像の一部がフレームの動きに合わせてチカチカと光っているように表示されるのです。 詳しく書きますと、縦横120pxの内、外側の縦横約30pxほどは白く塗りつぶして余白のようなものにしているのですが、その余白の部分が2フレーム目で黒くなってしまっています。 何度か作り直してアップし直したのですが、黒くなっていた部分が灰色になったりするだけで解決には至りませんでした。 ↓こういった感じになります。 1フレーム目  □□□□□  □□□□□  □□□□□  □□□□□ 2フレーム目  ■■■■■  ■□□□■  ■□□□■  ■■■■■ ※■は黒くなってしまう余白部分。  1フレーム目では正常に白になっているようです。 ※□は絵の部分です。 データは何度も確認しましたが、2フレームとも同じ縦横120pxで、背景色は白で透過はしていません。 何故2フレーム目でそういった現象が起きるのでしょうか? mixiにも同様に問い合わせをする予定ですが、迅速な回答を頂ければと思い、先にこちらに書き込ませて頂きました。 宜しくお願い致します。

  • mixiのロゴの制作方法

    20010年3月現在のmixiのロゴですが、どんな背景デザインに 変更してもなじむ様な透過が施されてるように見受けます。 普通にgifで制作した透過画像だと、どうしてもジャギーになってしまうと 思うのですが、 このロゴの透過はどのようにして作られているのでしょうか? よろしくお願いします。

  • gif ってぼかしは効かないのでしたっけ?

    Photoshop でロゴを作成しようとしています。 ページの背景にパターンを使用しているため、ロゴの背景を透明にしてページ背景のパターンが見えるようにしたいのです。 ロゴは、gif で作ろうとしています。 Photoshop のテキストでロゴを入力し、ラスタライズし、gif で保存するためインデックスカラーに変換します。 すると、ロゴの輪郭がカクカクしてしまって、うまくぼやけてくれません。 gif は、輪郭のぼかしは出来ないのでしたっけ? 別のソフトでは、出来たような気がするのですが、Photoshop での 透過gif の作り方を教えてください。

    • ベストアンサー
    • CSS
  • 背景画像の上に透過GIF背景をのせる方法

    はじめまして。 メモ帳にHTMLタグ打ち込みでWEBページを作ってるのですが、 bodyで背景画像を指定し、その上に透過GIFをおき、さらにその上にテキストを表示させるにはどうしたらよいのでしょうか。 具体的には、「テキストを表示させるブロック(tableやdiv)の部分」を半透明の透過GIFをフィルターみたいにかぶせて、その上に書くテキストを見やすくさせたい、という動機です。 divのなかのstyle、またはtableでbackgroundを定義しても、もとのbodyの背景が反映されなくなってしまうのですよね。 一応、自分で考えた策としては ・ブロックの背景そのものを、ある程度薄い色に変えた画像を用意してそれをtableの背景にする というものがあるのですが、これはやはりつなぎ目の部分でズレてしまって見栄えがあまりよくないのです。 かなり細かいところにこだわりすぎな感じもするんですが、 ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • ページ上端の画像とウインドウ上端線との間の空白スペース

    画像をページの上端のフレームに入れたのですが、その画像とページの上端線(つまり、Internet Explorer のウインドウの上端線。つまり、Internet Explorerのアドレスバーの下端線)との間に1cm程度の白色の空白スペースができます。 この空白スペースは、このフレームのみを「ファイル→開く」で開いたときにも表示されます。 この空白スペースをなくするにはどうしたらよいでしょうか。 また、このフレームの下端にも画像があるのですが下端の画像とそのフレームの下限線との間にも1cm程度の空白スペースができます。併せてこちらもお教えいただけないでしょうか。

    • ベストアンサー
    • HTML
  • 画像を透過させる方法がわかりません・・・

    PictBear seで画像を使ってない色を使って透過させてgif形式で保存したんですが、背景画像に貼り付けたら透過するときに使った使ってない色がでてきて透過がされてませんでした。 たぶん私のやり方が間違ってると思うので画像を透過させて、背景画像に貼る方法を知っている方がいましたら教えてください。

  • Webページの透過設定の仕方。

    現在Front Page2002でホームページを作っています。 ページにgif画像を挿入し、透過設定をすると、 これはうまくいきますが、このgif画像の上に ハイパーリンク用の文字などを配置すると 画像の透過が出来なくなってしまいます。 透過設定を生かしつつ、文字などが配置できる良い方法はありませんでしょうか。

専門家に質問してみよう