シュウ

今回は【CSS】画像を左右交互に配置に解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• flexboxの使い方について学びたい方へ
• 今回は画像を左右交互に配置について解説しております。

画像を左右交互について

CSSで画像を左右に配置する方法には、いくつかの方法があります。どの方法を使うかは、レイアウトの複雑さや、他の要素との関係性によって変わってきます。
今回は以下のようなイメージになります。

なぜflexboxを使うのか？

flexboxは、要素の配置を柔軟に制御できる強力なCSSのレイアウトモジュールです。特に、複数の要素を一行に並べたり、隙間なく配置したりする際に便利です。画像を左右交互に配置するようなケースも、flexboxを使うことで簡単に実現できます。

STEP01 flexbox

<ul>
	<li>
		<div class="area">
			<p>文章が入ります。文章が入ります。文章が入ります。</p>
			<div class="thumbnail"><img src="thumbnail.jpg" width="" height="" alt=""></div>
		</div>
	</li><!--1つ目のブロック-->
	<li>
		<div class="area">
			<p>文章が入ります。文章が入ります。文章が入ります。</p>
			<div class="thumbnail"><img src="thumbnail.jpg" width="" height="" alt=""></div>
		</div>
	</li><!--2つ目のブロック-->
</ul>

ul li + li {margin-top: 30px;}

STEP01では、基本的なHTML構図になります。
文章、画像の順で並べています。

STEP02 flexbox

省略

ul li + li {margin-top: 30px;}
ul li .area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

STEP02では、親要素にCSSを記述します。
display: flex: 親要素をflexコンテナに変換します。
flex-wrap: wrap: 子要素がコンテナの幅を超えたときに、次の行に折り返します。
justify-content: space-between: 子要素の間隔を均等に割り当て、両端の要素はコンテナの端につきます。

STEP03 flexbox

省略

ul li + li {margin-top: 30px;}
ul li .area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul li:nth-child(even) .area {
    flex-direction: row-reverse;
}

STEP03では、偶数の要素にCSSを記述します。
:nth-child(even): 偶数のみにCSSを適用させます。
flex-direction: row-reverse: 表示方向を右から左に反転させます。
これで完成です。

まとめ

flexboxを使うと、画像を左右交互に配置するような複雑なレイアウトも、シンプルなCSSで実現できます。flex-wrap, justify-content, flex-directionといったプロパティを組み合わせることで、様々なレイアウトをデザインすることができます。

< 前の記事

【CSS】グラデーション色々なパターンを解説！

次の記事 >

【WordPress】2025年、MW WP Formの使い方を解説