【CSS】画像を左右交互に配置について解説！

シュウ

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

こんな方に読んでほしい

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

[記事の内容]

画像を左右交互について

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

主な指定方法

シンプルな配置:flexboxが最も簡単です。
レスポンシブデザイン:flexboxが柔軟性がありおすすめです。
細かい位置調整:positionが有効です。※今回は解説しません。
複雑なレイアウト:gridが有効です。※今回は解説しません。
シンプルな配置:floatは使用しません。

なぜ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といったプロパティを組み合わせることで、様々なレイアウトをデザインすることができます。

POINT