質問: ### 前提・実現したいこと HTML、CSSの勉強をして現在、初めてサイト(ポートフォリオ)作成しております。 そこで下記のサイトのデザインを参考にして進めています。 (参考サイト)https://nana-eyelash.com/ このサイトの「コンセプト」の部分の作り方を教えていただきたいです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d58b1153c1cc9c2942213cca717a9fac.png) ### 自分の考え(仮説) 1画像(左)と緑の背景(右)を2つのレイアウトで分ける。 2レイアウト同士重ねれるようにpositionのrelative or abusoluteを使用。 このように考えてしましたが、中々うまく出来ませんでした。 ▲実行したこと▲ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f5b12c8ade31c83cf81913feab4ec6d6.png) ・ ``` KIMOCHI “一緒にあなたの想いをカタチにする” テストテストテストテストテストテストテストテストテスト ``` ``` .kimochi-wrapper{ height: 350px; /* テスト */ /* border: solid 2px black; */ padding: 30px 40px; margin-top: 20px; width: 700px; margin: 0 auto; max-width: 50%; background-color:rgba(188,143,143,0.4); position: relative; } .concept-img{ height: 250px; } ``` 画像を重ねることが出来ましたが、ピンクの背景をもう少し右にしたいのですが その方法がわかりません。これはレイアウトの決め方?(paddingとか)が間違えているのでしょうか? まだプログラミング初心者で説明がうまくできませんが、何卒よろしくお願いします。
回答: 値とかは適当にいじってください。 あと、画像だけ見て作っているので実際のとは違うかもしれません。 ``` HTML、CSSの勉強をして現在、初めてサイト(ポートフォリオ)作成しております。そこで下記のサイトのデザインを参考にして進めています。(参考サイト)https://nana-eyelash.com/ このサイトの「コンセプト」の部分の作り方を教えていただきたいです。1画像(左)と緑の背景(右)を2つのレイアウトで分ける。2レイアウト同士重ねれるようにpositionのrelative or abusoluteを使用。このように考えてしましたが、中々うまく出来ませんでした。 ``` ``` *{margin:0;padding:0} img {width:30vw;position:absolute;top:-10vw;left:-27vw} .con{width:30vw;padding:5vw;background-color:skyblue;margin:15vw 16.5vw 0 auto;position:relative} ``` vwを使っているのでviewportの読み込みもお願いします。(vwだけってのもよくないかな...) フルビュー