CSSで背景画像指定

質問

どなたかアドバイスお願いします。

CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。
テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。
CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合
は、どのように対処すればよろしいのでしょうか？

回答No.5

abril · ベストアンサー

ANo.2-3です。
以下はANo.3でアドバイスさせて頂いた考え方の内の最後、入れ子構造のみで完結する場合のCSSサンプルです。
W500px×H成り行きのボックスの上下にW500px×H10pxの角丸部分のバー（上がhoge_top.jpg、下がhoge_bottom.jpg、内容部分の背景がhoge_middle.jpg）が表示されている場合です。角丸画像との上下の余白（padding）は画像の形態に合わせお好みで調節を。
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
div.hoge {
width: 500px;
padding-bottom: 10px;
background: url(../images/hoge_bottom.jpg) left bottom no-repeat;
}
div.hoge p {
margin: 0;
padding-top: 10px;
background: url(../images/hoge_top.jpg) left top no-repeat;
}
div.hoge p span.hoge_back {
display: block;
padding: 0 10px;
background: url(../images/hoge_middle.jpg) repeat;
}
----------------------------------------------------------------------
今回div→p→spanという親子関係でマークアップさせて頂いたのは、要素内容がpでのマークアップという事であれば、pの子要素としてはインライン要素しか入れられないので、であればspanでマークアップしても支障ないと判断した為です。今回の様なケースはどのみち力業のマークアップですので、好みの問題だと思います。ANo.4様の様にdiv→div→pという考え方も当然あるでしょうね。
※ほんとに疑似要素:beforeや:afterが使用できれば何も悩まずすっきりしたマークアップで済むのですが、いかんせんIEが…

お礼

なるほど～
ご丁寧にCSSのサンプルまでいただきましてありがとうございます＾＾
現段階では
<p>top背景</p>
<p>middle背景＆要素内容</p>
<p>bottom背景</p>
みたいに一段づつ区切って対応するのではなく
うまい具合に下記のように入れ子構造を作り対応するって感じなんですね
とても参考になりましたありがとうござます。
今後とも色々質問させていただく事がおおいと思いますが
またその時にはアドバイス願います。

<div>top背景＆bottom背景どちらでもよし
<p>→top背景＆bottom背景どちらでもよし
<span></span>→middle背景
</p>
</div>

回答No.4

noname#83877

角丸ボックスですと、現在はdivで囲うのが一番適切に思います。
1行だけならspanを使う方がより適切でしょう。

<div>
<div>
<p>要素内容</p>
</div>
</div>

現在のcssの限界としてdivやspanを使わざるをえないときの事例に入ると思います。

その他の方法として、例えばjavascriptの力を借りて(iE7以下が未対応なので)、:beforeや:afterを利用することで以下のようなhtmlに手を加えない方法もあります。

<p>要素内容</p>

p {
background:url(middle.gif) repeat-y;
}
p:before {
content:"";
background:url(top.gif) no-repeat;
}
p:after {
content:"";
background:url(bottom.gif) no-repeat;
}

この他にも将来的にはbackground-imageの複数指定ができるようになるかもしれない(safariでは実装されています)ので、実用段階になればそれが最善だと思います。
ですが、今のところ実用的なのはやっぱりdivもしくはspanを使うことだと思います。

お礼

なるほど～
ご丁寧にCSSのサンプルまでいただきましてありがとうございます＾＾
現段階では
<p>top背景</p>
<p>middle背景＆要素内容</p>
<p>bottom背景</p>
みたいに一段づつ区切って対応するのではなく
うまい具合に下記のように入れ子構造を作り対応するって感じなんですね
とても参考になりましたありがとうござます。
今後とも色々質問させていただく事がおおいと思いますが
またその時にはアドバイス願います。

<div>top背景＆bottom背景どちらでもよし
<p>→top背景＆bottom背景どちらでもよし
<span></span>→middle背景
</p>
</div>

回答No.3

abril

ANo.2です。投稿と入れ違いでANo.1様への補足を拝見しました。

> 角丸ボックスを縦に3分割して
> <p>top背景のみ</p>
> <p>middle背景＆要素内容</p>
> <p>bottom背景のみ</p>

上記の様なレイアウトであれば、上下の角丸部分の画像は、”<p>middle背景＆要素内容</p>”の前後の要素のスタイルに振り分けれるのが一番簡単な方法ですが。例えば、

<h1 class="hoge1">見出し</h1>←直前の要素の背景画像としてtop背景を指定

<p class="hoge2">要素内容</p>←middle背景を指定

<h2>次の見出し</h2>←直後の要素の背景画像としてbottom背景を指定

…という様な感じです。また、ある程度までは入れ子構造で対応する事も可能です。例えば、

<div class="hoge">←親要素の背景画像としてtop背景を指定
<p>要素内容</p>←middle背景を指定
</div>

<p class="hoge_next">次の要素</p>←直後の要素の背景画像としてbottom背景を指定

とか。どうしても前後に振り分けられず、入れ子で完結しなければならないのであれば、あまり美しくないですが、

<div class="hoge">←親要素の背景画像としてbottom背景を指定
<p>←pに対してtop背景を指定
<span class="hoge_back">要素内容</span>←spanをブロック要素化した上でmiddle背景を指定
</p>
</div>

…という様な手法も可能ではあります。

回答No.2

abril

> CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。

その背景画像はどの様な用途で使用したいのですか？
「背景指定のみでタグの中は内容が何も無い状態」の”パラグラフ”（<p></p>）というのは論理構造上おかしいですよね？
内容があるからこそパラグラフなのであって、入れるべき要素（テキストなり、「背景」ではない意味のあるイメージなり）が何もなければそれはパラグラフとして成立しません。

> テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。

上記はおそらく、背景画像を設定したtdの中に透明画像を入れてその画像の縦横サイズを指定するテーブル・コーディングならではのやり方の事だと思いますが、もしそれと同様に「背景画像のみを表示させる為のエリアを確保したい」という用途だけなら、同じ考え方でマークアップがpだろうが何だろうが：

<p><img src="/images/spacer.gif" alt="hoge" width="100" height="50"></p>

…とでもすれば済む話です。全く非論理的ですが。

背景画像はあくまでその上に載せるべき内容があっての”背景”に過ぎません。
ですかから、

> HTMLタグの中の要素が空になってしまう場合

というマークアップがそもそもNGです。まずマークアップを見直すのが宜しいかと思います。適切なマークアップができていれば、背景画像も適切に当てはめる事ができます。実現したいとイメージしている具体的なレイアウトを参照するなり添付するなりで示して下されば、マークアップを含めた面からアドバイスができるかと思いますが。

回答No.1

noname#83877

HTMLの状況によって変わってきます。
どのような状況で使われるのでしょうか？

補足

今回の使用例ですとザックリですが
角丸ボックスのような物を使用する時になります
角丸ボックスを縦に3分割して
top背景middle背景bottom背景って感じです。
こんな感じの場合middle背景には内容が入りますが
top背景とbottom背景は背景画像だけですので何も中身の要素がありません。HTMLで説明すると下記のような感じです。
こんな感じで大丈夫でしょうか？
宜しくお願いします。

<html>
<body>
<p>top背景のみ</p>
<p>middle背景＆要素内容</p>
<p>bottom背景のみ</p>
</body>
</html>