HTML/CSSコーディング練習でたまに見かける段違いレイアウトの解説

2021年9月10日 2021年11月13日

HTML/CSS の模写コーディングやデザインカンプからのコーディング練習を行っていると、たまに以下のようなレイアウトが出てきます。

staggered layout

上記図のような、２段組みレイアウトで段違いになっている場合でも Flexbox を使用してレイアウトを行うのですが、あまり理解できていない人も多いのではないでしょうか？
この記事では、上記レイアウトの作成方法を解説していきます。

Flexbox のおさらい
段違いレイアウトの作成方法

Flexbox のおさらい

まずは、Flexbox のおさらいです。
詳しい Flexbox の使用方法は以下を参照してみてください。

: 参考【FlexBoxで簡単に横並び】を実現！定番プロパティやレイアウトを解説

「display: inline-block;」でブロック要素を横並びにできますが、それよりも簡単に横並びにできるFlexbox。この記事では、Flexboxの基本的な使い方とよく使われているプロパ ...

続きを見る

さっそくコードを見ていきます。
親要素コンテナに対して、「display: flex;」の1行を入れるだけで横並びになります。

<body>
  <div class="flex-container">
    <div class="flex-item">子要素1</div>
    <div class="flex-item">子要素2</div>
    <div class="flex-item">子要素3</div>
  </div>
</body>

/* 親要素(コンテナ) */
.flex-container {
  display: flex;
}

/* 子要素(アイテム) */
.flex-item {
  background-color: skyblue;
  margin: 10px;
}

flex row

縦並びにする場合は、「flex-direction: column;」を使用します。

/* 親要素(コンテナ) */
.flex-container {
  display: flex;
  flex-direction: column;
}

/* 子要素(アイテム) */
.flex-item {
  background-color: skyblue;
  margin: 10px;
}

flex column

段違いレイアウトの作成方法

段違いレイアウトは、Flexbox を使用して、横並びと縦並びを組み合わせて作成します。
以下の図をみてください。

staggered layout sample

図のように赤枠部分を横並び、青枠部分を縦並びにします。

実際のコードは以下のようになります。

<div class="flex-row-container">
  <div class="flex-column-container">
    <div class="flex-item item1">アイテム1</div>
    <div class="flex-item item2">アイテム2</div>
  </div>
  <div class="flex-column-container">
    <div class="flex-item item3">アイテム3</div>
    <div class="flex-item item4">アイテム4</div>
  </div>
</div>

.flex-row-container {
  display: flex;
}

.flex-column-container {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.flex-item {
  background-color: skyblue;
  margin: 20px;
  padding: 50px;
  border: 2px solid blue;
}

赤枠部分を横並びにするために「flex-row-container」クラスに「display: flex;」を指定しています。
次に、「flex-column-container」クラスに「flex-direction: column;」を指定します。
そうすることで、赤枠部分の中の子要素アイテム（青枠部分）を縦並びにします。

そして、上記コードでは以下のような２段組みレイアウトになります。

flex layout

さらに、段違いレイアウトにするため、最初の子要素アイテムだけ上側の margin を設定します。

.item1 {
  margin-top: 80px;
}

そうすると、以下のような段違いレイアウトになります。

flex layout2

まとめ

段違いレイアウトは、Flexbox の横並びと縦並びを組み合わせて使用します。
Flexbox をきちんと理解していれば、難なくとレイアウト作成できるでしょう。

Flexbox の横並びと縦並びを組み合わせて、段違いレイアウトを作成する
段違いにするために、最初のアイテムだけマージンを設定する

HTML/CSSコーディング練習でたまに見かける段違いレイアウトの解説

Flexbox のおさらい

参考【FlexBoxで簡単に横並び】を実現！定番プロパティやレイアウトを解説

段違いレイアウトの作成方法

まとめ