奇数番目は画像が左で文章が右、偶数番目は文章が左で画像が右、というジグザグ配置

まずは、画像と文章を1つずつ掲載したボックスを複数個並べ、そのボックス内で文章と画像の左右配置を1個ずつ逆転させるジグザグ配置の表示例をご紹介しておきます。

上記の表示例では、1つのボックス内にある「画像と文章の左右配置」が、ボックスごとに逆転しています。

偶数・奇数の判定も左右配置の入れ替えもCSSだけで実現できる

このような左右の配置を、HTMLソースの段階で固定してしまうと、途中にボックスを追加したくなった際の修正作業がとても面倒になってしまいます。文章と画像のどちらを左側(または右側)にするかに関係なくHTMLソースは固定しておき、CSSだけを使って左右の配置を入れ替える方法を採用すれば、更新時の手間が省けてとても楽に作れます。

先程の表示サンプルでは、下図右側に掲載したように、どの項目もHTMLソース内では「文章ボックスが先で画像ボックスが後」という記述順序になっています。この状態で、実際に画像を右側に配置するか左側に配置するかは、CSSだけで調整しています。

この方法なら、ボックスの順序を入れ替えたり、新しいボックスを途中に挿入したりしても、左右のジグザグ配置は自動的に調整されるため、見た目を再調整する手間が不要でとても楽です。

▼HTMLソースでの順番は常に同じで良い（文章が先で画像が後）

まずは、HTMLソースを記述しましょう。ボックス内部で画像と文章のどちらを左側にしたい場合でも関係なく、HTMLソース内では文章を先に、画像を後に書いておきます。（順序は逆でも構いませんから、画像を先にして文章を後にしても問題ありません。どちらかに統一しておいて下さい。）

<div>
   <div class="complexBox">
      <p class="text">表示上の配置に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo1.jpg" alt="写真1"></p>
   </div>
   <div class="complexBox">
      <p class="text">表示上の配置に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo2.jpg" alt="写真2"></p>
   </div>
   <div class="complexBox">
      <p class="text">表示上の配置に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo3.jpg" alt="写真3"></p>
   </div>
   　：　：　：　（必要なだけ繰り返して記述して下さい）　：　：　：
</div>

※CSSで「何番目の子要素か」を判定することによって左右の配置を入れ替えますので、全体の外側に1つ適当なブロック要素が必要です。ここでは単にdiv要素で囲んでいます。

次に、CSSで偶数番目か非数番目かを判断し、それに応じて左右の配置を決める装飾を記述します。

▼ボックスが偶数番目にあるか奇数番目にあるかを判断するCSSの書き方

次に、CSSソースを記述しましょう。まずは、偶数番目のボックスと奇数番目のボックスで装飾を分ける書き方を紹介しておきます。

.complexBox:nth-child(2n+1) { /* 奇数番目 */ }
.complexBox:nth-child(2n  ) { /* 偶数番目 */ }

ここで重要なのは、nth-child疑似クラスです。これは、対象の要素が「親要素に含まれている子要素の中で、何番目の子要素なのか」を示せる疑似クラスです。丸括弧の中に「何番目なのか」を示す式を記述して使います。
ここでは偶数番目と奇数番目を判別できれば良いので、以下のように記述します。

• 「nth-child(2n )」： 『2の倍数』番目の場合に該当します。つまり偶数番目ということです。
• 「nth-child(2n+1)」： 『2の倍数＋1』番目の場合に該当します。つまり奇数番目ということです。

ここでは詳しくは触れませんが、例えば「3n」と書けば『3の倍数』番目になり、「3n+1」と書けば『3の倍数＋1』番目、「3n+2」と書けば『3の倍数＋2』番目を示せますから、3種類の装飾を順番に繰り返し登場させることもできます。

※注意

ブロックとブロックの間に例えば <br> などを入れてしまうと、そのbr要素も1つの要素としてカウントされるため、奇数番目・偶数番目の解釈がズレてしまう点に注意して下さい。そのような、カウント対象外にしたい要素が中間に含まれる場合には、nth-child疑似クラスの代わりにnth-of-type疑似クラスを使う方が良いかも知れません。nth-childが「何番目の子要素か」を示すのに対して、nth-of-typeは「指定の要素の中で何番目か」を示します。

あとは、奇数番目・偶数番目それぞれの場合で、ボックス内部の横並びの配置を左右逆転させるような装飾を書けば済みます。

▼ボックス内部の左右を入れ替えるにはCSSのflex-directionを使えば簡単

複数個並んでいるボックス（ここでは文章ボックスと画像ボックスの2つ）の横並び順序を変更するには、

• 2つのボックスをflexboxとして配置し、
• flex-directionで並び順の方向を指定する

という方法を使うと簡単です。
この方法なら、flex-directionプロパティの値を変化させるだけで、左右の配置を入れ替えられますから。

必要なCSSソースは以下の通りです。

.complexBox {
   display: flex;   /* 中身をflexboxとして配置する */
   margin: 5px 0;   /* 外側の余白量(上下に5px・左右にゼロ) */
}
.complexBox:nth-child(2n+1) { flex-direction: row; }         /* 奇数番目は左から右へ並べる */
.complexBox:nth-child(2n  ) { flex-direction: row-reverse; } /* 偶数番目は右から左へ並べる */

上記CSSソースの2行目で、displayプロパティの値に「flex」を指定しています。こうすると、その内部のボックスをフレックスボックスとして配置できます。

フレックスボックスでは、何も指定しなければ「横並び」で「左側から右方向へ」並べられます(※)が、flex-directionプロパティを使えば並べる方向を指定できます。

そこで、5行目と6行目では、

• 奇数番目では、flex-directionプロパティに値「row」を指定することで、「左から右へ横方向に並べる」よう指示しています。
• 偶数番目では、flex-directionプロパティに値「row-reverse」を指定することで、「右から左へ横方向に並べる」よう指示しています。

このため、

• 奇数番目では、文章ボックスが左側に配置され、画像ボックスが右側に配置されます。
• 偶数番目では、配置が逆になり、画像ボックスが左側に配置され、文章ボックスが右側に配置されます。

CSSだけでこのように左右の配置が入れ替わるため、HTMLソースの記述を入れ替える必要はありません。

※厳密には「左から右」だと決まっているわけではなく「書字方向と同じ」です。文字を左から右へ向かって書く環境では、ボックスも左から右へ並びます。もし、文字を右から左へ向かって書く環境(アラビア語環境など)で表示される場合はボックスも右から左へ向かって並びます。

メリット：後から中程にボックスを追加しても、ジグザグ配置の構成は自動で維持される

ボックスの左右の位置関係を入れ替えるためにHTMLソースの修正が不要だということは、複数のボックスの中間に新たなボックスを追加しても、ジグザグ配置の構成は崩れないということです。
下記（左側）は、冒頭でもご紹介した5つのボックスの並びですが、ここで、上から3番目にボックスを1つ追加して下図右側のようにしても、文章ボックスと画像ボックスの左右関係は自動的に調整されて、正しい(意図通りの)ジグザグ配置が維持されます。

HTML＋CSSソースのまとめ

最後に、上記でご紹介したHTML＋CSSソースをまとめて再掲しておきます（まとめないといけない程に長くはありませんけども）。コピー＆ペーストして使ってみたい場合にご活用下さい。

<div>
   <div class="complexBox">
      <p class="text">表示上の位置関係に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo1.jpg" alt="写真1"></p>
   </div>
   <div class="complexBox">
      <p class="text">表示上の位置関係に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo2.jpg" alt="写真2"></p>
   </div>
   <div class="complexBox">
      <p class="text">表示上の位置関係に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo3.jpg" alt="写真3"></p>
   </div>
   <div class="complexBox">
      <p class="text">表示上の位置関係に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo4.jpg" alt="写真4"></p>
   </div>
   <div class="complexBox">
      <p class="text">表示上の位置関係に関係なく、文章ボックスを先に書きます。</p>
      <p class="photo"><img src="photo5.jpg" alt="写真5"></p>
   </div>
</div>

.complexBox {
   display: flex;   /* 中身をflexboxとして配置する */
   margin: 5px 0;   /* 外側の余白量(上下に5px・左右にゼロ) */
}
.complexBox:nth-child(2n+1) { flex-direction: row; }         /* 奇数番目は左から右へ並べる */
.complexBox:nth-child(2n  ) { flex-direction: row-reverse; } /* 偶数番目は右から左へ並べる */

以上、偶数番目か奇数番目かで画像の配置を左右逆転させるボックス構造の作り方でした。
ぜひ、使ってみて下さい。

(更新日：2020年05月16日)