重なりのあるコーディングに関して

多層のデザインを実現するときのコーディングの考え方

このようなデザインを作成するときのコーディングの構成の仕方を知りたいです。

<div class="main_box">
<div class="ph_box"><img href="写真"></div>
<div class="contents_box">
 <dl class="main_word">
  <dt>サブタイトル</dt>
  <dd>本文テキスト本文テキスト</dd>
 </dl> 
</div>
</div>

html


main_wordの本文部分を画面のセンターにして、
contents_boxの白背景が左側だけズレて写真にかぶるような構成にしたいのですが、
CSSをどう記述するのがスマートでしょうか。

CSSはまだ記述していないのです。
かなり初歩的な質問になるかもしれませんが、
アドバイスいただけると助かります。


何卒宜しくお願いいたします。


／／／／／／／／／／／／／／／／／／／／／／／／／／／
追記

画面はレスポンシブ想定となりますので、
写真エリア、contents_boxも左右に伸びます。

ご助力いただけますと助かります。
宜しくお願いします

hatena19

2020/09/15 14:02

とりあえず現状のCSSコードも提示してください。その上でどの部分が想定と違うのか追記してください。現状では丸投げの質問に等しいので、推奨されない質問になってます。推奨していない質問｜teratail（テラテイル） https://teratail.com/help/avoid-asking

行動規範の内容に同意します

回答4件

ophiacodon様、hatena19様
具体的でない状態での質問に、丁寧に解説いただきありがとうございます。
上記で示していただいた考え方で、対応できました。
ありがとうございました。

投稿2020/09/15 20:12

katsumi_garden

総合スコア17

背景画像は画面幅一杯に広げるのでしょうか。
その前提で回答します。
（画面幅一杯に広げない場合は、.main_box に幅を設定すればいいでしょう。）

背景画像は、レスポンシブ対応にするにはCSSのbackgroundで設定したほうが自由度が高いでしょう。

contents_box を写真にかぶせるには、ネガティブマージンを使うといいでしょう。

左側だけ背景を白にするのは contents_box の背景をlinear-gradientで左半分を白、右半分は透明にしました。幅は100%です。

.main_word に幅を設定して中央寄せして、背景を白にします。

html
1<div class="main_box">
2  <h1>タイトル</h1>
3  <div class="ph_box">
4  </div>
5  <div class="contents_box">
6    <dl class="main_word">
7      <dt>サブタイトル</dt>
8      <dd>本文テキスト本文テキスト</dd>
9    </dl> 
10  </div>
11</div>

css
1h1 {
2  text-align: center;
3}
4.ph_box {
5  width: 100%;
6  height: 400px;
7  background: center / cover url(画像パス)
8}
9.contents_box {
10  margin-top: -5rem;
11  background: linear-gradient(to right, white 50%, rgba(255,255,255,0) 50%);
12  width: 100%;
13}
14
15.main_word {
16  max-width: 800px;
17  margin: 0 auto;
18  background-color: white;
19  padding: 1rem;
20}
21dt {
22    font-size: 2rem;
23    line-height: 3rem;
24    border-bottom: 3px solid;
25}
26dd {
27    padding: 1rem 0;
28}

CodePenサンプル

投稿2020/09/15 15:41

編集2020/09/15 15:43

hatena19

総合スコア34075

ベストアンサー

position 属性はいじらずに、contents_box にネガティブマージンを設定するという方法もあります。

CSS
1#contents_box {
2 background:antiquewhite;
3 margin-top:-50px;
4 width:600px;
5 height:500px;
6 padding:50px 10px 10px 100px;
7}

投稿2020/09/15 15:26

編集2020/09/15 15:27

ophiacodon

総合スコア24

そのまま貼っつけてください。
ポイントは

position: relative;
position: absolute;

でしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3<HEAD>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=960">
6<title>TEST</title>
7<style>
8* { padding:0;margin:0;box-sizing: border-box;}
9html,body{
10	background:#eee;
11	height:100%;
12	width:100%;
13	font-family:unset;
14	letter-spacing:0.1em;
15	font-size:12px
16}
17h1{
18	font-size:3rem;
19	line-height:6rem;
20	text-align:center;
21	background:white;
22	width:800px;
23	margin:0 auto;
24}
25#main_box {
26	background:white;
27	width:800px;
28	margin:0 auto;
29	position:relative;
30}
31#ph_box {
32	height:300px;
33	background:linear-gradient(blue 0%, cyan 100%);
34}
35#contents_box {
36	position:absolute;
37	top:250px;
38	background:white;
39	width:600px;
40	padding:50px 10px 10px 100px;
41}
42dt {
43	font-size: 2rem;
44	line-height: 3rem;
45	border-bottom:3px solid black;
46}
47dd {
48	padding: 1rem 0;
49}
50</style>
51</HEAD>
52<body>
53<h1>タイトル</h1>
54<div id="main_box">
55	<div id="ph_box"></div>
56	<div id="contents_box">
57		<dl id="main_word">
58			<dt>サブタイトル</dt>
59			<dd>本文テキスト</dd>
60		</dl>
61	</div>
62</div>
63</body>
64</html>