Q&A
前提・実現したいこと
初心者です。
divの高さが０になる原因を特定したい。
divの高さが０になっているのでCSSが効いていても表示されない。
CSSでbackground-imageなどを指定しているのですが、高さが０のため表示されません。
高さを指定すると正しく表示されています。
ちなみに、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が効いていることが確認できました。 また、検証でブロック要素？の高さが０になっているところを、数値を入れることで高さを出し、 CSSが効いていることを確認できました。 ](59d96c56554e51f898cb321a7c264252.jpeg) ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。 ### 前提・実現したいこと ここに質問の内容を詳しく書いてください。 （例）PHP(CakePHP)で●●なシステムを作っています。 ■■な機能を実装中に以下のエラーメッセージが発生しました。 ### 発生している問題・エラーメッセージ
エラーメッセージ
### 該当のソースコード ```ここに言語名を入力 ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
初めまして。
まず、前提を確認しておきたいのですが、質問者様のされたいことは「img.ta.pngを表示したい」ということで、よろしいでしょうか？ 私の勘違いでしたら申し訳ありません。
そのようなケースですと、<div>タグのbackground-imageプロパティに画像を指定するよりも、<img>タグのsrc属性に画像のパスを指定する方法のほうが良いかと思います。ちょうど以下のような感じですね。
html
1<img src="img.ta.png">
一般的に画像を表示させる場合は<img>タグのほうがよく使われるかと思います。
「じゃあ、background-imageプロパティって何のためにあるねん」というハナシですが、こちらは文字・画像・映像等のコンテンツの背景に画像を配置したいときに用います。一応、<img>タグの上に画像を配置することもできなくはないのですが、色々と面倒くさいところがありますので、そういうときはbackground-imageプロパティが便利です。
以上を踏まえたうえで――掲載されたコードにおいて、<div>タグのbackground-imageプロパティに画像を指定しているのにも関わらず、<div>タグの高さが0pxであるために画像が見えない問題というのは、先述した<img>タグとbackground-imageプロパティの役割の違いが影響しています。
<img>タグは画像を表示することを目的としたタグですので画像のパスさえ正しければ、画像がしっかり表示されます。その代わり、画像の上に文字などを配置するのは苦手です。
対して、backgrond-imageプロパティはコンテンツの背景に画像を配置するためのものですので、そもそもコンテンツが無ければ、背景も存在しないので画像が表示されないわけですね。
質問者様のコードは以下のような感じですが。
html
1<div class="box"></div>
この<div>タグのなかに、以下のように適当な文字を入れて頂ければ画像が見えるようになるかと思います。
html
1<div class="box">文字を入れたことで背景が生まれ、そこに画像が表示される</div>
以上、長くなりましたが回答とさせて頂きます。
投稿2020/03/26 22:54
総合スコア60
0
<img src="...">で画像を指定したときは、要素の高さ=画像の高さですが、
CSSで背景画像を設定したときはそうではありません。
heightやpadding-top、padding-bottomを指定していないので、
高さは0になっています。
逆に考えてみてほしいのですが
高さを指定していないのに勝手に高さが指定されて仕様だと、困りませんか?
ただ、CSSのテクニックとして、
padding-bottom: 50%;を指定すると、横幅の50%になる、
つまり横幅の値を元に高さを表現する方法もあるので共有します。
YouTube動画の縦横比を固定という文脈でよく目にする方法です。
もしかしたら参考になるかもしれません。
参考: padding-bottomの書き方に注目してください。
youtubeの動画をCSSで固定比レイアウトにする
あとmin-heightというCSSプロパティをご存知なければ、もしかしたら役に立つかもしれません。
投稿2020/03/26 22:29
編集2020/03/26 22:37
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。