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

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

ただいまの
回答率

89.53%

divの高さが0になる原因

受付中

回答 2

投稿

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

fdajo

score 0

前提・実現したいこと

初心者です。

divの高さが0になる原因を特定したい。
divの高さが0になっているのでCSSが効いていても表示されない。

CSSでbackground-imageなどを指定しているのですが、高さが0のため表示されません。

高さを指定すると正しく表示されています。

ちなみに、Windows10でコード作成しています。

【HTML】

<!doctype html>

<html  lang="ja">
<head>
    <meta charaset="UTF-8">
    <title>文字のスタイルについての練習</title>
    <link rel="stylesheet" href="page-styles.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="./style.css" type="text/css">

</head>
<body>
    <div class="box">
    </div>
</body>
</html>

【CSS】

.box{
    background-color: #E4E4E4;
    background-image: url("img.ta.png");
    background-repeat:no-repeat;
    background-position: right top;
}

.scroll{
    background-attachment: scroll;
}

.fixed{
    background-attachment: fixed;
}

.local{
    background-attachment: local;
}




### 試したこと

divタグに<br>を入れる(改行で高さをだす)ことで、CSSが効いていることが確認できました。
また、検証でブロック要素?の高さが0になっているところを、数値を入れることで高さを出し、
CSSが効いていることを確認できました。


![![イメージ説明](eda576c9b55212cd7392f2a6b33ad288.jpeg)](59d96c56554e51f898cb321a7c264252.jpeg)

### 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。
### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ


エラーメッセージ

### 該当のソースコード

ここに言語名を入力
ソースコード
```

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

<img src="...">で画像を指定したときは、要素の高さ=画像の高さですが、
CSSで背景画像を設定したときはそうではありません。

heightpadding-toppadding-bottomを指定していないので、
高さは0になっています。

逆に考えてみてほしいのですが
高さを指定していないのに勝手に高さが指定されて仕様だと、困りませんか?


ただ、CSSのテクニックとして、 
padding-bottom: 50%;を指定すると、横幅の50%になる、
つまり横幅の値を元に高さを表現する方法もあるので共有します。

YouTube動画の縦横比を固定という文脈でよく目にする方法です。
もしかしたら参考になるかもしれません。

参考: padding-bottomの書き方に注目してください。
youtubeの動画をCSSで固定比レイアウトにする


あとmin-heightというCSSプロパティをご存知なければ、もしかしたら役に立つかもしれません。

参考: 
min-height - CSS: カスケーディングスタイルシート | MDN

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

初めまして。

まず、前提を確認しておきたいのですが、質問者様のされたいことは「img.ta.pngを表示したい」ということで、よろしいでしょうか? 私の勘違いでしたら申し訳ありません。

そのようなケースですと、<div>タグのbackground-imageプロパティに画像を指定するよりも、<img>タグのsrc属性に画像のパスを指定する方法のほうが良いかと思います。ちょうど以下のような感じですね。

<img src="img.ta.png">

一般的に画像を表示させる場合は<img>タグのほうがよく使われるかと思います。

「じゃあ、background-imageプロパティって何のためにあるねん」というハナシですが、こちらは文字・画像・映像等のコンテンツの背景に画像を配置したいときに用います。一応、<img>タグの上に画像を配置することもできなくはないのですが、色々と面倒くさいところがありますので、そういうときはbackground-imageプロパティが便利です。


以上を踏まえたうえで――掲載されたコードにおいて、<div>タグのbackground-imageプロパティに画像を指定しているのにも関わらず、<div>タグの高さが0pxであるために画像が見えない問題というのは、先述した<img>タグとbackground-imageプロパティの役割の違いが影響しています。

<img>タグは画像を表示することを目的としたタグですので画像のパスさえ正しければ、画像がしっかり表示されます。その代わり、画像の上に文字などを配置するのは苦手です。

対して、backgrond-imageプロパティはコンテンツの背景に画像を配置するためのものですので、そもそもコンテンツが無ければ、背景も存在しないので画像が表示されないわけですね。

質問者様のコードは以下のような感じですが。

<div class="box"></div>

この<div>タグのなかに、以下のように適当な文字を入れて頂ければ画像が見えるようになるかと思います。

<div class="box">文字を入れたことで背景が生まれ、そこに画像が表示される</div>

以上、長くなりましたが回答とさせて頂きます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 89.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる