画像のようなものをhtmlとcssで作成するにはどうしたらよいでしょうか…？

Question

画像のようなものをコーディングする際、
どのように組んだらよいでしょうか。
大きく上と下で分けて、その中で左右を％で分け、
flexで組む形でしょうか…？
どの幅の画面で見てもある程度崩れないようにしたく、
お教えいただきたいです。

初心者のため困り果てており、お知恵をお貸しいただければ幸いです。

グレーの箇所は画像です。
ボタンと書いている場所は画像ではなくボタンの記述で表す予定です。
黄緑の箇所は背景色で、一番上の画像のように背景色から飛び出す画像がある想定です。

Answer 1

ブロークングリッドレイアウトですね。

arcxor さんのご回答のように絶対配置をするか、無理やりグリッド線を引いてグリッドレイアウトで配置するか、画像を背景にして複数背景で設置するか、あたりでしょうか。

「broken grid layout CSS」でググったところ、動画がありましたのでご紹介しておきます。
A "Broken Layout" to HTML & CSS - Full Process! - YouTube

Comments

[rarirure777]

ご回答いただきありがとうございます。
positionについて調べ、positionのabsoluteとrelativeを使用しPCサイズとスマホサイズを作れました。

ですが、PCサイズとSPサイズの中間のサイズ（横幅を変えた時）に崩れてしまう状況です。
このような時、positionで指定した比率を維持したままどのような横幅でも
崩れないようにする方法はありますでしょうか？
細かくメディアクエリをつけていくしかないのでしょうか、、、

お教えいただけますと幸いです。

[Lhankor_Mhy]

具体的なコードがないので具体的な回答はできませんが、パーセンテージを使うのがいいかと思います。

Answer 2

position: absolute を活用してみてください。

他の疑問が解消しないようであれば、追加質問していただければ回答します。

Comments

[rarirure777]

ご回答いただきありがとうございます。
positionについて調べ、positionのabsoluteとrelativeを使用しPCサイズとスマホサイズを作れました。

ですが、PCサイズとSPサイズの中間のサイズ（横幅を変えた時）に崩れてしまう状況です。
このような時、positionで指定した比率を維持したままどのような横幅でも
崩れないようにする方法はありますでしょうか？
細かくメディアクエリをつけていくしかないのでしょうか、、、

お教えいただけますと幸いです。
topはpxで指定しており、leftは%で指定しています。

[arcxor]

確認遅れました。

SPサイズに切り替わるブレークポイントよりも大きいウィンドウ幅の場合の表示方法をきちんと考えるべきです。メディアクエリは例えば768px未満がSPで、768px以上がPCというブレークポイントのみで良いと思います。

具体的なSP、PCそれぞれのデザインカンプが提示されていないのでアドバイスができませんが、実現は可能なはずです。なお、px 指定と % 指定を同時に行うような calc() 関数を用いることも考えられます。