画像が重なっているデザインで可変対応できるCSSの書き方

こんにちは。

今日は画像が複数重なっているデザインのCSSについて書きます＾＾

イメージはこんな感じです！

私が初めてこのデザインを実装したときマイナスマージンをpx指定にしていたのですが、画面サイズを変えるとレイアウトが崩れてしまい悩んでいました。（テキストと画像の横幅の割合を％指定にしているため）

結論から言うと、マージンを%指定すると良いと教えてもらいそれで解決しました＾＾

ではさっそくコーディングをのせますー！

コーディング編

HTML編

      <section class="contSect">
        <div class="inner">
          <div class="sectInner">
            <div class="txtBlock">
              <div class="txt">
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              </div>
            </div>
            <!-- /.txtBlock -->
            <div class="photoBlock">
              <ul class="itemList">
                <li class="photo01">
                  <figure><img src="assets/images/cont_img01.jpg" alt=""></figure>
                </li>
                <li class="photo02">
                  <figure><img src="assets/images/cont_img02.jpg" alt=""></figure>
                </li>
                <li class="photo03">
                  <figure><img src="assets/images/cont_img03.jpg" alt=""></figure>
                </li>
              </ul>
            </div>
            <!-- /.photoBlock -->

          </div>
        </div>
        <!-- /.sectInner -->
      </section>
      <!-- /.contSect -->

右側にテキスト、左側に写真のレイアウトにしてみました。
画像は上から順番にクラスを振っています。

CSS編

.contSect .photoBlock .itemList > li:nth-child(2n) {
  text-align: right;
}

.contSect .photoBlock .itemList > li.photo02 {
  position: relative;
  z-index: 2;
}

@media only screen and (min-width: 769px) {
  .contSect .sectInner {
    display: flex;
    flex-direction: row-reverse;
  }
  .contSect .txtBlock {
    width: 33%;//任意の数値
    padding-top: 62px;//任意の数値
  }
  .contSect .photoBlock {
    flex: 1;
    margin-right: 114px;//任意の数値
  }
  .contSect .photoBlock .itemList > li.photo01 {
    width: 71%;//任意の数値
  }
  .contSect .photoBlock .itemList > li.photo02 {
    margin-top: -6%;//任意の数値
  }
  .contSect .photoBlock .itemList > li.photo02 img {
    width: 50%;//任意の数値
  }
  .contSect .photoBlock .itemList > li.photo03 {
    width: 56%;//任意の数値
    margin-top: -38%;//任意の数値
  }
}

これは実務で使った数値をそのまま使っているのでレイアウトに合わせて柔軟に変えてください！

簡単にポイントを書きます＾＾

マイナスマージンを％することの意味ですが、％にすると横幅に対する割合で計算してくれる仕様なのでレイアウト崩れが生じにくいとのこと。

これは先日記事にしたアスペクト比に対する考えと同じです！