No.5ベストアンサー
- 回答日時:
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
- 回答日時:
角丸ボックスですと、現在は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
- 回答日時:
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
- 回答日時:
> 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
- 回答日時:
HTMLの状況によって変わってきます。
どのような状況で使われるのでしょうか?
この回答への補足
今回の使用例ですとザックリですが
角丸ボックスのような物を使用する時になります
角丸ボックスを縦に3分割して
top背景middle背景bottom背景って感じです。
こんな感じの場合middle背景には内容が入りますが
top背景とbottom背景は背景画像だけですので何も中身の要素がありません。HTMLで説明すると下記のような感じです。
こんな感じで大丈夫でしょうか?
宜しくお願いします。
<html>
<body>
<p>top背景のみ</p>
<p>middle背景&要素内容</p>
<p>bottom背景のみ</p>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Illustrator(イラストレーター) イラストレーターで文字の背景に自動で入れた長方形の左側の角だけ丸く(右側だけ直角に)する方法 4 2023/04/21 11:08
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- HTML・CSS 【CSS】特定のリンクを含むaタグを指定できるかどうか? 3 2022/10/15 02:45
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
LightBoxの矢印の出し方
-
background-repeat CSS で切れ...
-
背景画像を前面に表示させる方法
-
iframe内をクリックさせない方...
-
background-sizeの背景で最小値...
-
半透明のtable、画像は透過した...
-
HP作成 作成した画像を動画の上...
-
大至急。webのシングルページを...
-
画像上に文字を表示するとiPhon...
-
ページごとに背景画像を変更し...
-
背景画像の上に透過GIF背景...
-
IEでのbackground-size使用につ...
-
同じ画像 複数回使用
-
<hr>の縦バージョンはありますか?
-
背景部分を透けさせてデスクト...
-
下にスクロールしても、追従す...
-
CSS マウスオーバーでテキスト...
-
ページの上下に白い横線が入る
-
WEB上でディレクトリ内の画像を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報