Retty風のトップ画面を作りたい（CSS）

・Rettyグルメ[レッティ]
https://retty.me/

Rettyのトップ画面のように上と下の要素の間にもう１つ要素を入れたデザインを作りたいです。
要素を調査で見たり、コピペしてみたりしたんですけどうまく再現できませんでした。

1:そもそもこのようなデザインをなんと呼ぶのでしょうか。
（検索するワードがわからないです。。）

2:理解としては「赤」と「青」のクラスがあり、「緑」は「赤」の中にあり、かつ背景画像で赤のクラスを超えているという事でしょうか。

3:どうやったら簡易的なものは作れるのでしょうか。

詳しい方いましたらお願いいたします。

yoshinavi

2019/03/08 01:14

トップの画像部分は「背景」になります。「赤」がヘッダー、「青」がメインであり、「赤」と「青」の写真が見える部分（緑も含めて）は「背景」が見えている状態です。

退会済みユーザー

2019/03/08 04:43

お世話になっております。 >>「赤」と「青」の写真が見える部分（緑も含めて）は「背景」が見えている状態です。こちらもう少し詳しくお聞きしてもよろしいでしょうか。。なぜ「青」の.main-contentsは「赤」のクラスに入っているのでしょうか。。緑の部分が.main-contentsのwidth:1140pxと背景の1160pxの差で表示されるのはわかるのですが、、「青」が「赤」の領域に入るcssがわかりません。。（認識あっていますでしょうか。）よろしくお願いいたします。

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

回答1件

ベストアンサー

「赤」の部分が全て固定ヘッダーではありません。上の白い部分のみです。「青」が「赤」に入り込んでいる訳ではありません。「青」との間に背景が透明なdivのBOXが入っています。

簡易的なイメージは以下のとおり。

HTML
1<header></header>
2<div></div>
3<main></main>
4<img src="" class="haikei">

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5
6header {
7  margin: 0 auto;
8  width: 100%;
9  height: 100px;
10  background-color: red;
11  position: fixed;
12}
13
14div {
15  height: 200px;
16}
17
18main {
19  margin: 0 auto;
20  width: 80%;
21  height: 1000px;
22  background-color: blue;
23}
24
25.haikei {
26  position: absolute;
27  top: 100px;
28  width: 100%;
29  height: 300px;
30  background-color: silver;
31  z-index: -1;
32}
33

投稿2019/03/08 05:18

yoshinavi

総合スコア3523

退会済みユーザー

2019/03/08 08:27

お世話になっております。再現してみました。いただいたCSSはヘッダー100px、<div></div>が200pxの高さで、次にmainクラス1000px、そこにimgクラス300pxをz-index:-1;+position:absolute; top:100px;で背景にしているという理解でよろしいでしょうか。。・Rettyはmainクラスに背景やshadowなどで区切ったデザインにしているということでしょうか。（勉強になります。）