このデザインの仕方（html・css）

前提・実現したいこと

HTML、CSSの勉強をして現在、初めてサイト（ポートフォリオ）作成しております。
そこで下記のサイトのデザインを参考にして進めています。
（参考サイト）https://nana-eyelash.com/

このサイトの「コンセプト」の部分の作り方を教えていただきたいです。

自分の考え（仮説）

①画像（左）と緑の背景（右）を２つのレイアウトで分ける。
②レイアウト同士重ねれるようにpositionのrelative or abusoluteを使用。
このように考えてしましたが、中々うまく出来ませんでした。

▲実行したこと▲

・

html
1<div class="kimochi-container">
2        <img src="./img/concept.jpg" class="concept-img">
3        <h1 id="kimochi-title">KIMOCHI</h1>
4        <h3>“一緒にあなたの想いをカタチにする”</h3>
5        <div class="kimochi-text">
6          <p>テストテストテストテストテストテストテストテストテスト</p>
7
8        </div>
9      </div>

css
1.kimochi-wrapper{
2  height: 350px;
3  /* テスト */
4  /* border: solid 2px black; */
5  padding: 30px 40px;
6  margin-top: 20px;
7  width: 700px;
8  margin: 0 auto;
9  max-width: 50%;
10  background-color:rgba(188,143,143,0.4);
11  position: relative;
12}
13
14.concept-img{
15  height: 250px;
16
17}

画像を重ねることが出来ましたが、ピンクの背景をもう少し右にしたいのですが
その方法がわかりません。これはレイアウトの決め方？（paddingとか）が間違えているのでしょうか？

まだプログラミング初心者で説明がうまくできませんが、何卒よろしくお願いします。

gentaro

2019/08/14 16:33

> このサイトの「コンセプト」の部分の作り方を教えていただきたいです。だけだと丸投げになるんで > 中々うまく出来ませんでした。の「どこがうまくいかなかったのか」を記載しましょう。 https://teratail.com/help/question-tips ちなみに丸投げはガイドライン違反です。 https://teratail.com/help/avoid-asking

javahack

2019/08/14 17:14

ブラウザのデベロッパーズツールでソースは見てみましたか。

m.ts10806

2019/08/14 22:32

とりあえずブラウザの名前を付けて保存で全部持って来ればいいのでは。

yoshinavi

2019/08/14 23:36

「問題がある」場合は、そのコードを、各コードブロックで提示してください。「position」で重なりを表現する場合、z-indexも見直すと良いかと思います。

退会済みユーザー

2019/08/15 04:57

質問を丸投げしようと思って質問した訳ではありませんが、私の質問の仕方が悪かったと思います。次回から気をつけます。わざわざご指摘誠にありがとうございます。

m.ts10806

2019/08/15 05:00 編集

質問編集して追記すれば良いのでは。 >「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

yoshinavi

2019/08/16 01:23

解決済ですが、気になったので･･･提示のコードで、現状が再現されていますか？レイアウトに関する質問の場合、現状が再現するコードでないと、検証が出来ません。 CSSのコードが原因なのか？HTMLの組み方も変えなければいけないのか？単に一部の誤記述なのか？など、いろいろな原因がありますので、「現状を再現するコードの提示」が解決への早道です。次回からの、参考にしてください。

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

回答1件

ベストアンサー

値とかは適当にいじってください。
あと、画像だけ見て作っているので実際のとは違うかもしれません。

HTML
1<div class=con><img src=https://placehold.jp/1600x1200.png>HTML、CSSの勉強をして現在、初めてサイト（ポートフォリオ）作成しております。そこで下記のサイトのデザインを参考にして進めています。（参考サイト）https://nana-eyelash.com/ このサイトの「コンセプト」の部分の作り方を教えていただきたいです。①画像（左）と緑の背景（右）を２つのレイアウトで分ける。②レイアウト同士重ねれるようにpositionのrelative or abusoluteを使用。このように考えてしましたが、中々うまく出来ませんでした。</div>

CSS
1*{margin:0;padding:0}
2img {width:30vw;position:absolute;top:-10vw;left:-27vw}
3.con{width:30vw;padding:5vw;background-color:skyblue;margin:15vw 16.5vw 0 auto;position:relative}