[HTML&CSS]画像と文字を互い違いに表示させる方法

忘れたときすぐ見れるよう自分用メモ

こういうよく見るレイアウト

HTMLはこんな感じ

<div id="businesses">

      <div class="business">
        <img src="imgges/picture_pc_0c274de1b76f4063c7ce088be3b57004.jpg" alt="ビジネス1">
        <div class="desc">
          <h3>1.テキストテキストテキスト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>

      <div class="business">
        <img src="imgges/picture_pc_3d21e88b8ee49951e3c0931173a8f8ed.jpg" alt="ビジネス2">
        <div class="desc">
          <h3>2.テキストテキストテキスト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>

      <div class="business">
        <img src="imgges/picture_pc_c61a50ca0b2335d65a46645b73a2a480.jpg" alt="ビジネス3">
        <div class="desc">
          <h3>3.テキストテキストテキスト</h3>
          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>

    </div>

CSSはこんな感じ

.business {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

.business:nth-child(even) {
  flex-direction: row-reverse;
}

/*これ以下は無視して*/
.business img {
  width: 50%;
  height: auto;
}

.business .desc {
  width: 50%;
  padding: 40px 20px;
  background-color: #aaaaaa;
  color: #fff;
}

.business .desc h3 {
  font-size: 20px;
  margin-bottom: 30px;
}

.business .desc p {
  width: 80%;
}

#ちょっと解説
今、HTMLの構造は以下の通り(descより下は無視)

まずbusinessの2つの子要素img、descを横並びにさせたいのでbusinessのdisplayをflexにする

.business {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

display:flexは通常左から右に横並びさせるので、この場合2番目のbusinessの並び順を右から左に変えてやれば写真とテキストが互い違いに表示される
2番目のbusinessの並び順を右から左にするにはこう

.business:nth-child(even) {
  flex-direction: row-reverse;
}

このコードは偶数個目のbussinesの並び順を逆転させることができるので、businessをあとから追加しても自動的に互い違いに表示される

#最後に
【初心者向け】HTML+CSS練習用のサンプルコード
題材、画像はここからお借りしました

解説もあるので置いときます
初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その1
【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その2
【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その3