• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

左右交互のレイアウトをCSS(flexbox)を使ってかんたんに作る方法

flexboxを使って同じ要素のコンテンツを左右交互にレイアウト

同じ要素の並びになっているデザインで、左右交互のレイアウトをよく見かけますよね。

方法は色々ありますが、今回はHTMLをなるべく汚さないように、
CSS(Sass)のflexboxnth-childを使ってかんたんに作る方法をご紹介します。

実際のコード

<div class="wrap">
  <div class="card">
    <div class="card-thumbnail"><img src="https://placehold.jp/48/eeeeee/212121/300x300.png?text=SAMPLE" alt="SAMPLE" class="card-img"></div>
    <p class="card-caption">説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。</p>
  </div>
  <div class="card">
    <div class="card-thumbnail"><img src="https://placehold.jp/48/eeeeee/212121/300x300.png?text=SAMPLE" alt="SAMPLE" class="card-img"></div>
    <p class="card-caption">説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。</p>
  </div>
  <div class="card">
    <div class="card-thumbnail"><img src="https://placehold.jp/48/eeeeee/212121/300x300.png?text=SAMPLE" alt="SAMPLE" class="card-img"></div>
    <p class="card-caption">説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。説明が入ります。</p>
  </div>
</div>
.card {
  & {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 600px;
    margin: 0 auto 32px;
    &:nth-child(even) {
      flex-direction: row-reverse;
    }
  }
  &-thumbnail {
    width: 150px;
  }
  &-img {
    width: 100%;
    display: block;
  }
  &-caption {
    width: 430px;
    font-size: 16px;
    line-height: 1.5;
  }
}

Sassを使わずにCSSで記述する場合は以下のとおりです。

.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 600px;
  margin: 0 auto 32px;
}

.card-thumbnail {
  width: 150px;
}

.card-img {
  width: 100%;
  display: block;
}

.card-caption {
  width: 430px;
  font-size: 16px;
  line-height: 1.5;
}


/* 偶数番目に登場する.cardは右から左に要素が配置されるようにする */

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

実装した結果

実装についての補足と解説

flex-direction / row-reverse

CSSでdisplay:flexを指定した要素はflexコンテナーとなり、
子要素に対してレイアウト位置を指定するプロパティが利用可能になります。

そのうちのひとつがflex-directionです。

通常、HTMLの要素は左上を基点として左から右へ、
上から下へ並べられていく仕様になってますよね。

このflex-directionrow-reverseという値を指定すると、
反対の流れ、つまり右からスタートして左へ順番に配置されていきます。

:nth-child

CSSの指定を行う場合、一般的にはclassを付与して、
そこに対してプロパティと値をセットしていきます。

例えば同じHTMLの構造を持つ要素の内、2番目に登場するものだけ見た目を変更したいケースであれば、
専用のclassを付与する方法でも実現可能です。

ですが、HTML側の記述が増えることは可読性の低下にも繋がりますので、
なるべくそれを避ける方法として今回nth-childという疑似要素を利用しました。

これによって、兄弟要素の中で何番目という指定が可能になります。
単純ではないケースもありますが、基本は以下の考え方です。

<div class="card">
  <p>私は長男です。</p><!-- p:nth-child(1) or p:first-child -->
  <p>私は次男です。</p><!-- p:nth-child(2) -->
  <p>私は三男です。</p><!-- p:nth-child(3) or p:last-child -->
</div>

今回のサンプルコードでは数値で指定せずにevenとすることで
偶数番目のものにすべて適用という指定の方法をとっています。
ちなみに奇数の場合はoddになります。

最後に

製品や説明において画像と組み合わせたデザインとして、
よく使われるレイアウトの実装方法をご紹介しました。

flexboxは奥が深いですが、使い慣れるとレイアウトが非常にかんたんになります。
今回のコードが参考になれば幸いです。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND