質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • CSS

    6036questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4191questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

webページ作成

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 380

Turtle

score 30

webページ作成時に、一点解決することができなかった疑問がございますので、
ご質問させていただきます。

以下のように、簡単な画像を出力しただけのwebページを作りました。

<head><link rel="stylesheet" type="text/css" href="page_styles.css"></head>
<p class="resizeimage">
<img src="星空.jpg">
</p>
p.resizeimage img{
width:100%;
}

実行してみると、表示された画像の上下左右に、ある一定の幅の白い余白ができてしまうという問題が生じてしまいました。
・画像自体に余白があるのではと思い、他の画像でも試しましたが、同じように余白ができ、
・CSSでmarginを0にしてみたらどうかと思い、試みましたが、これも同じ結果でした。
・webで調べてみても、下のみに余白ができてしまった場合の対処法しか載っておらず、だめもとで試してみましたが、この方法も、画像に何の変化も与えてくれませんでした。

おそらく基本的なご質問であると思いますが、
可能でございましたら、余白を消す方法と余白ができてしまう理由をご教授いただければ幸いでございます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tanat

    2016/05/16 16:38

    現象が起きている環境(OS及びブラウザとそのバージョン) スクリーンショット の提示があると、良い回答が得られるかと思いますよ。

    キャンセル

  • kei344

    2016/05/16 19:43

    タイトルは適切に設定してください。「表示された画像の上下左右に、ある一定の幅の白い余白ができてしまう」など、具体的にお書きください。

    キャンセル

回答 4

checkベストアンサー

0

*{
    margin: 0;
    padding: 0;
}


bodyにmarginがかかってると思います。
入れてみてください。
どんなサイトでも、最初にreset.cssを入れるといいですよ

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/16 16:53

    ありがとうございます。
    ご回答どおりに試してみたら、成功いたしました。

    大変恐縮ではございますが、付随して一点ご質問よろしいでしょうか。
    よろしければ、ご回答いただければ幸いでございます。
    【CSS】
    p.resizeimage img{
    margin: 0;
    padding: 0;
    }
    【/CSS】
    上記コードでできないなと思い、悩んでいたのですが、
    上記コードで余白が消えない理由をお教えいただけますでしょうか。

    キャンセル

  • 2016/05/16 20:11 編集

    ブラウザには独自解釈とゆうものがあります
    http://web8bungi.sakura.ne.jp/first/css/reset-css1.html

    例えば<h1>だから大きく表示する等、ブラウザによって異なったcssが最初に設定されています。
    その為、最初のコードですとbody(親要素)にmarginがかかっている状態でした。
    なので *(アスタリスク)で要素全てのmargin,paddingを0と指定して上げる事で
    余計な余白が消えます。

    先程も述べたように、最初にreset.cssを設定しておくと
    こういった不具合は無くなり、ブラウザによってcssの指定が異なる事もなくなります

    キャンセル

  • 2016/05/17 10:29

    何度もご質問してしまい、誠に申し訳ございませんでした。
    また、ご回答いただき、ありがとうございました。
    非常に参考になりました。

    キャンセル

0

bodyに最初からついてる余白じゃないですか?

body {
  margin: 0;
  padding: 0;
}


で試してみてください。
・・・というかそのHTML、body要素抜けてますが大丈夫ですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/16 16:58

    ご回答ありがとうございます。
    ぜひ試させていただきます。
    貴重なお時間をいただきまして、本当にありがとうございました。

    キャンセル

0

pタグ内に画像を入れてるのが悪いのでは?

<body>
<img class="resizeimage" src="星空.jpg">
</body>

その他、他の回答者さんの回答を参照。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/16 16:55

    ご回答ありがとうございます。
    ぜひ一度試させていただきます。
    貴重なお時間をいただきまして、本当にありがとうございました。

    キャンセル

0

具体的な回答に関しては他のみなさん既にされているので補足として・・・

ブラウザには何もcssの指定をしてなくても適用されるcssがあり「ブラウザ デフォルトcss」等で検索すると出てきます。

お使いのブラウザが不明なため具体的な数値はわかりませんが今回の場合だとbodymargin:8px;といったブラウザのデフォルトのcssが空白の原因となっています。

またブラウザごとのデフォルトcssの差異を解消するために「リセットcss」というものがよく使われていますので、こちらも検索してみることをおすすめします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/17 10:30

    裏原理までご説明いただき、ありがとうございます。
    さらに理解が深まりました。
    本当にありがとうございました。

    キャンセル

関連した質問

  • 解決済

    HTMLで文字化けします。

    <html> <head>     <title>WEBページ作りに挑戦</title> </head>     <body>         <h1>このWEBページへ

  • 解決済

    モーダルが複数ある画面のjavascriptでの実装について

    <div id="content"> <!-- テーブルなどでリストを表示 --> </div> <div id="modal1" class="modal"> <!-- フォー

  • 受付中

    MonacaでJavaScriptが実行されない

    MonacaでFlickityを読み込みたい Monaca内のページにスライダーを取り入れたいのですが、スクリプトが実行されず写真が並んで表示されているだけの状態になってしまいま

  • 解決済

    メディアクエリがよくわからない

    前提・実現したいこと メディアクエリを使用して、760px以下/以上のデバイス毎にCSSを分けたい。 発生している問題・エラーメッセージ デベロッパーツールでスマホアイコ

  • 解決済

    CSSでliを2カラムにしたい

    前提・実現したいこと flexを使って2カラムにしたい デザインはレスポンシブデザインで組んでいます。 該当のソースコード <section class="conA">

  • 受付中

    【Wordpress】safariで画像一覧メニューがガタガタになる

    質問 category.phpにて、投稿された縦横様々な大きさの画像をjQueryでセンタリング/トリミングをして並べているのですが、safariで読み込み時に画像が横一列ではな

  • 解決済

    画像と文字の配置について

    【htmlを教えてください。】 WordPressで固定ページを作成中です。 画像 文字 画像 文字 文字 画像 文字 画像 このように4×2で格子状に(市松模様み

  • 解決済

    HTMLCSSの<hr>について

    websiteを作るなかで分からないことが出てきたため、質問させていただきます。 下記のHTMLコードを見ていただくとわかる通り、 <hr width="100px" al

同じタグがついた質問を見る

  • CSS

    6036questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4191questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。