【CSS】h1を画像にしたいのですが、Dreamweaver上では表示されてもプレビューで消えてしまいます！

質問

h1にテキストをいれていますが、それを背景画像で見せたいため、display:none;で見えなくしています。
背景画像logo.pngは表示させたいのですが、Dreamweaver上では表示されてもプレビューでどのブラウザでも消えてしまいます！
どなたかよろしくおねがいします！

【CSS】
#logo{ margin:40px 50px 0px 0px;
padding:0px;
background:url(images/logo.png) no-repeat;
}
h1{margin:0px;
　　padding;0px;}
h1 span{display:none;}
h2{margin:0px 50px 0px 0px;
　　padding:0px; }
h2 span{display:none;}
---
【HTML】
<h1 id="logo"><span>Ethiopa</span></h1>
<h2><span>Ethiopa　Blog</span></h2>

回答No.2

abril · ベストアンサー

> visibility:hiddenとdisplay:none;はずいぶん違うんですね。

visibilityプロパティは「要素が生成するボックスの表示・非表示を指定。ただし、要素を非表示に指定しても、その要素が生成するボックス分のスペースは残り、レイアウトにも影響する。」であり、displayプロパティは「要素が生成するボックスをどのように表示させるか、その表示形式を指定。」です。

ですので
"visibility: hidden"だと「要素が生成するボックスを不可視（透明）にする」だけなので、”見えて”いないだけで要素分のスペースは確保されています。この場合だと、h1の持つ幅（特に指定していなければ親要素の幅と同一）×テキスト”Ethiopa”の高さ、が背景画像のレンダリング領域として与えられます。しかし、"display: none;"だと「何も表示しない（要素自体がない）」となってしまうので、当該要素分の空白も生成されない為、”中味がない”という状態になります。

なので、後者（h1 span{display:none;}）だと、
<h1 id="logo"><span>Ethiopa</span></h1>とした場合、
<span>Ethiopa</span>の部分は「透明」とはならず「中味なし」となってしまう為、親要素の<h1 id="logo">～</h1>も中味なし＝幅も高さも生成されない、という状態になります（margin分は別ですが、それは外側の余白です）。ですので、いくらh1#logoに背景画像を設定してあっても、それをレンダリングする領域が生成されない為、何も表示されない様に見えるのです。もし<span>に対して"display: none;"を使うなら、<h1>に対して予め（背景画像を表示する分の）幅と高さを具体的に設定しておく必要がある、という事です。

お礼

なるほど！よくわかりました。
丁寧に説明していただき、ありがとうございました。
とても勉強になりました！

回答No.1

yambejp

h1 span{display:none;}
を
h1 span{visibility:hidden;}
にしてみてください

お礼

ありがとうございます！！現れました！
visibility:hiddenとdisplay:none;はずいぶん違うんですね。
参考になりました。ありがとうございました！