【コピペOK】左右交互flexレイアウトの作り方【左右逆Verあり】

2021年7月2日2022年11月12日

以下の画像のようなレイアウトの作成方法です。

PC画面↓

SP画面↓

もちろんレスポンシブ対応もしてますので、コピペで使って下さい。

ブログのコーディングの記事。
「左右相互レイアウト」での検索ランキング1位になってました。

よく見かけるこんな感じのレイアウトがコピペで作れるので、必要な方はぜひどうぞ🤗https://t.co/tXcWHVEDjd pic.twitter.com/qgwgKfKJdW
— モリ｜Web系フリーランス (@MockRoll) December 7, 2021

コピペ用コード

下記、コピペ用コードです。

HTML

<div class="column-wrapper">
    <div class="column1">
      <div>
        <div class="column1title">テキストテキスト、テキスト。</div>
        <br>
        <div class="column1txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </div>
    </div>
    <div class="column2">
      <image src="〇〇.jpg"></image> <!-- 画像のURLを入力 -->
    </div>
  </div>

  <div class="column-wrapper">
    <div class="column1">
      <div>
        <div class="column1title">テキストテキスト、テキスト。</div>
        <br>
        <div class="column1txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </div>
    </div>
    <div class="column2">
      <image src="〇〇.jpg"></image> <!-- 画像のURLを入力 -->
    </div>
  </div>

  <div class="column-wrapper">
    <div class="column1">
      <div>
        <div class="column1title">テキストテキスト、テキスト。</div>
        <br>
        <div class="column1txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </div>
    </div>
    <div class="column2">
      <image src="〇〇.jpg"></image> <!-- 画像のURLを入力 -->
    </div>
  </div>

CSS

.column-wrapper {
  width: 100%;
  display: flex;
}
:nth-of-type(even) {
flex-direction: row-reverse;
}
.column1, .column2 {
  width: 50%;
  display: flex;
  align-items: center;
}
.column1 {
  background: #fce88d;
  padding: 60px;
  box-sizing: border-box;
}
.column-wrapper:nth-of-type(2n) .column1:nth-of-type(1){
  background: #b5ffb6;
}
.column1title {
  font-size: 25px;
}
.column1txt {
  font-size: 15px;
}
.column2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media screen and ( max-width:500px )
{
  .column-wrapper {
    flex-direction: column-reverse;
  }
  .column1, .column2 {
  width: 100%;
}
  .column1 {
  padding: 25px;
} 
}

左右交互を逆にしたい時は

上で紹介したものとは逆に、「左に画像、右にテキスト」にしたい場合もあると思います。

PC画面↓

SP画面↓

その際は、下記のコードをコピペでお使いください。

HTML

<div class="column-wrapper">
    <div class="column2">
      <image src="〇〇.jpg"></image> <!-- 画像のURLを入力 -->
    </div>
    <div class="column1">
      <div>
        <div class="column1title">テキストテキスト、テキスト。</div>
        <br>
        <div class="column1txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </div>
    </div>
  </div>

  <div class="column-wrapper">
    <div class="column2">
      <image src="〇〇.jpg"></image> <!-- 画像のURLを入力 -->
    </div>
    <div class="column1">
      <div>
        <div class="column1title">テキストテキスト、テキスト。</div>
        <br>
        <div class="column1txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </div>
    </div>
  </div>

  <div class="column-wrapper">
    <div class="column2">
      <image src="〇〇.jpg"></image> <!-- 画像のURLを入力 -->
    </div>
    <div class="column1">
      <div>
        <div class="column1title">テキストテキスト、テキスト。</div>
        <br>
        <div class="column1txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
      </div>
    </div>
  </div>

CSS

.column-wrapper {
  width: 100%;
  display: flex;
}
:nth-of-type(even) {
flex-direction: row-reverse;
}
.column1, .column2 {
  width: 50%;
  display: flex;
  align-items: center;
}
.column1 {
  background: #fce88d;
  padding: 60px;
  box-sizing: border-box;
}
.column-wrapper:nth-of-type(2n) .column1:nth-of-type(2){
  background: #b5ffb6;
}
.column1title {
  font-size: 25px;
}
.column1txt {
  font-size: 15px;
}
.column2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media screen and ( max-width:500px )
{
  .column-wrapper {
    flex-direction: column;
  }
  .column1, .column2 {
  width: 100%;
}
  .column1 {
  padding: 25px;
}
}

どこを変えたのか一応記します。

HTML
・クラス”column1”と、”column2”の位置を差し替え。

CSS
・18行目、”.column1:nth-of-type(1)”の部分を”.column1:nth-of-type(2)”に変更。
・35行目、”column-reverse”の部分を”column”に変更。

これだけです。