W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:ozc5hp さんの質問

「幅100%で背景画像を敷いて、その中に幅900pxのコンテンツを作る」みたいな場合、どのように作ってらっしゃいますか?
<div class="幅100%で背景画像を敷いたボックス">
<div class="幅900pxのコンテンツ">
コンテンツ部分
</div>
</div>
今まで↑のように作っていたんですが、個人的にdivボックスをいっぱい重ねるのが好きじゃないので、効率の良いもっとシンプルな書き方が無いかなーと悩んでいます。

みんなの回答 4 件

ID:zHEPxh さんの回答

俺も基本スレ主と同じです。divを1つにしたいなら擬似要素でできないかな?

ID:ozc5hp

ありがとうございます。
擬似要素でどうやってできるんでしょうか…?beforeとかafterとかですかね??

ID:zHEPxh

そうそう。試してないけどね。absoluteの横100%で配置した擬似要素ね。

ID:U7hBcy さんの回答

自分も同じマークアップだな。sectionタグで括ればdiv重ならないし構造化されたマークアップになるのでは。

ID:ozc5hp

ありがとうございます。
sectionとかarticleとか使うと構造が綺麗になりますね!でもどちらかというと…
<div class="背景画像は100%だけどコンテンツは900pxのボックス">
コンテンツ
</div>
のように、一つのボックスで全部まかなえる画期的な方法は無いかな~と思ったんです。これ絶対便利だと思うんですけど…

ID:SjDKHZ さんの回答

敬愛すべきIE様がいらっしゃいますが、今だとこんな感じでもいいかもですね。
div{
background-iamge:url(img1.jpg),url(img2.jpg);
background-size: 900px auto,auto;
background-position:center 0,0 0;
background-repeat: no-repeat,repeat;
padding: 0 calc(50vw - 900px/2);
}

ID:ozc5hp

見たこと無い書き方でした…!一度試して見ます。ありがとうございます!
IEは…まあ…

ID:bzo0ag さんの回答

背景画像は <body> に指定すりゃいいじゃん。
なんで <div> 2重にしてんの?

ID:a.tkw0

私もそう思ったが、一部に背景しくのかなとおもったんでだまってた

ID:ozc5hp

言葉足らずですみません。コンテンツごとに交互に背景を敷きたかったので、<body>には入れたくなかったんです…。
そのような場合、どうしていますか?

ID:w/FCGO

LPかな?
<body>
<section class="block 1000px">
<div class="warp 900px">
</div>
<section>
...
</body>

最終更新日:2015-08-01 (2,170 views)

関連するトピックス

ページ上部に戻る