• ベストアンサー

画像の下の大きな余白をなくすには?

HTMLで自力でホームページを作成しております。 以下のURLなのですが。 http://yobiko-room.com/ ご覧の通り画像の下に大きな余白ができてしまいます。 この余白をなくにはどうしたらよろしいでしょうか? ホームページのソースをご覧いただき、説明していただける方、よろしくお願いします。

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

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

  • ベストアンサー
  • hitomura
  • ベストアンサー率48% (325/664)
回答No.1

他に言いたいことは山ほどありますが、とりあえずご質問の件について。 スタイルシートのコメントにある指示に従え。

imakazu
質問者

お礼

回答ありがとうございました。 基本的なことで恐れ入ります。 おかげさまで解決しましたが、その他おっしゃりたいことがありましたら是非ともお願いいたします。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>ホームページのソースをご覧いただき、説明していただける方、よろしくお願いします。  基本的なことは、  ⇒Another HTML Lint - Gateway ( http://www.htmllint.net/html-lint/htmllint.html ) ですべて教えてくれる。100点満点でないにしても、その近くにはしよう。 取り合えず、tableでデザインすることだけは止めましょう。  ⇒単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )  ⇒ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )  1999年のHTML4.01の勧告以来、15年・・・いくらなんでも・・

imakazu
質問者

お礼

回答ありがとうございます。 tableをページのレイアウトに乱用しすぎたということですね。 このたびは誠に基本的なことで解決しましたが、こちらの回答も今後参考にさせていただきます。

関連するQ&A

  • ページ下の余白をなくせない・・・

    GoLive csというソフトでホームページを作りはじめました。 下のようなホームページ↓ http://www.uchida-hp.com/ のように、上と下の余白を無くしたページを作りたいのですがどうしても下の部分の余白だけ無くすことができません。背景の色が表示されてしまいます。 ソフトのページのプロパティ設定で左右・高さのマージン設定を「0」にしていますがダメです。上の余白は無くなります。 レイアウトするテーブルやグリッドの設定を何か行なうのでしょうか? どなたか教えて下さい。 お願いします。

    • 締切済み
    • CSS
  • 画像の下の余白

    下記のソースの場合、画像の下に余白が出来てしまうのですが、どうすれば画像の下と『<div class=bar>画像</div>』の上の余白を削除してくっ付けるられるのでしょうか? 【index.html】 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <title>例題</title> <link rel="stylesheet" type="text/css" href="design.css" media="all"> </head> <body> <img src="gazou.jpg" class="name" width="1024" height="768"> <div class="bar">画像</div> </body> </html> 【design.css】 .bar{ background-color: #ff0000; }

    • ベストアンサー
    • HTML
  • 画像をクリックすると下の画像も同時に切り替わるページを作りたい

    ホームページでたまに見るのですが、ある画像をクリックすると下にその項目の説明をする画像などが出てくることがあります。現在ホームページ作成の練習中なのですがソースを見てもいまいちよくわかりません。詳しい方いらっしゃいましたらお教え願います。 ※以下のHPの中段くらいにある「office professional plus 2007をつかうと、こんな悩みも解決!」というところが今言っている項目です。 http://www.microsoft.com/japan/smallbiz/campaign/officecpn0908/default.mspx 使用しているソフトはドリームウィーバーCS4です。

    • 締切済み
    • CSS
  • 画像をクリックすると下の画像も同時に切り替わるページを作りたい

    ホームページでたまに見るのですが、ある画像をクリックすると下にその項目の説明をする画像などが出てくることがあります。現在ホームページ作成の練習中なのですがソースを見てもいまいちよくわかりません。詳しい方いらっしゃいましたらお教え願います。 ※以下のHPの中段くらいにある「office professional plus 2007をつかうと、こんな悩みも解決!」というところが今言っている項目です。 http://www.microsoft.com/japan/smallbiz/campaign/officecpn0908/default.mspx 使用しているソフトはドリームウィーバーCS4です。

  • IE6で画像の下に余白が入ってしまいます。

    CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }

    • ベストアンサー
    • HTML
  • imgの下に余白が出来てしまう

    1週間位悩んでいますが、わかりません。 どなたか助けてください。 下のようなHTMLを書いています。 <table border="0" cellspacing="0" cellpadding="0"> <tr><td><img src="img/head.bmp" border="0"></td></tr> </table> で、画像の上下左右に余白が出来ると困るのですが、 下側だけに3~4dot程度の余白が出来てしまいます。 ちなみに、画像のサイズは762x63dotです。 試しに <tr height="90"><th valign="bottom"> <img border="1" ... とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3~4dot程度の余白ができます。 また、余白はimgのborderの外側にあります。 どうか、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像リンクでの余白を消したい.(モバスペ)

    モバスペでHPを作成しているのですが、 HPを携帯から見たとき、 画像リンクと画像リンクの間に余白が出来てしまいます。 繋げて表示させたいのですが、 どうしたら良いですか? <BR CLEAR="all>のタグを使ってみたところ、 パソコンから見たら繋がっていましたが、 携帯(au)からは余白が出来ていました…。 無理なのでしょうか?? ちなみに、下のようなタグを使っています。 <a href="リンク先URL"><img src="画像URL" copyright=yes Border=0></a> <a href="リンク先URL"><img src="画像URL" copyright=yes Border=0></a> 教えてください。

  • ホームページの背景の画像を上から下に降りてくるように設定したい

    みなさんこんにちは。 私は今、ホームページを作成しています。昨日からインターネットで色々調べているのですが、どうしてもやり方が分からないものがあるので、教えていただけましたら嬉しく思います。 トップページの壁紙で、葉っぱが空から降ってくるという動く画像にしたくて、素材屋さんを探しまして見つける事が出来ました。サンプルではちゃんと葉っぱが上から下に落ちてきているんですが、ダウンロードしてパソコンに素材を保存すると、動かない葉っぱが保存されるだけです。実際に動かすにはどうしたらよいのでしょうか?そのサンプル画面をソース表示にしてホームページビルダーのHTMLを入力するところにペーストしてみました。すると、×印が上から下に下りてきて、葉っぱの画像は表示されませんでした。多分自分がダウンロードして保存してある画像の保存先を指定しなければいけないのだと思いますが、そのやり方が分かりません。私はマイドキュメントの中に画像用のファイルを作成してそこに保存してあるのでが、その保存先を指定する方法(HTML?)が分かりません。 上から画像が降ってくるという画像のサンプルは沢山あってソース表示にすればHTMLも分かるのですが、自分の保存した画像を引っ張ってくる事が出来なくて困っています。 凄く初歩的な質問で大変恐縮なんですが、ソースのどの部分にどんな風にすれば画像が動く画像が表示されるのか教えていただけませんでしょうか? また、そのやり方が載っているサイトをご存知でしたら調べて勉強したいので教えていただけませんでしょうか? ホームページ作成支援のサイトを色々調べたんですが、「画像が上から下に下りてくる」ように設定する方法が載っているところを見つける事が出来ませんでした。

  • 余白設定

    ビルダーを使ってホームページを作成していますが、上下の余白をなくすためにはどうしたらいいのでしょうか。普通に作成すると、どうしても開いたときに上や下に余分な余白ができてしまいます。

  • 画像の背景

    単純な質問で申し訳ありません。 現在、HTMLでホームページを作成しようとしているのですが、 画像の背景色が、ホームページ自体の背景色と同じになるようにするには、どのようにしたら良いのでしょうか? 例えば、ロゴを作成して、GIFで貼り付けると、 文字以外の余白が白くなり、背景色から浮いてしまいますよね? 文字以外の余白の部分が背景色と一緒にするのにはどうしたらいいでしょうか?

専門家に質問してみよう