【初心者向け】画像を左右交互に表示！スマホで縦並びに変換する方法

画像を左右交互に配置してメリハリのあるページづくりに

　ブログやコーポレートサイトを作成時、画像を左右交互に並べたいと思ったことはありませんか？特にアパレルサイトなどでは、商品画像を交互に並べることで見やすくスタイリッシュな印象を与えることができます。

　PC向けに画像とテキストを左右交互に並べたい時、floatプロパティやtableタグを使えば割と簡単に実装できます。

　しかしfloatやtableの場合はスマホ表示で縦並びに切えた際、左側の内容を先に表示。右に画像を配置した場合、テキストの下に回り込んでしまいます（下図の左側）。

　これは元々floatやtableがスマホの縦長画面に対応していないため。スマホ表示ではレイアウトが崩れてしまうのです。

　スマホ表示の際、画像とテキストを入れ替えテキストを下に配置するには『メディアクエリ』と『flexbox』をセットで使う方法がおススメ（下図の右側）。

　そこで今回は、初心者でも簡単に『画像を左右交互に表示・スマホ表示でもレイアウトを整える方法』を具体的なコード例とともに紹介していきます。

　使用するコードもHTML+CSSのみ。PHPやJava Scriptなどプログラム言語を使用する必要も無く、レイアウトなど後のメンテナンスも行いやすいものです。

　この解説を参考に、見やすくおしゃれなサイトづくりにお役立て下さい。

※ファビコン作成・画像編集・動画編集など全部入りで約53%OFF！プロが使うツール『Adobe CC』を格安購入なら以下の記事をご参照ください。

※SEO対策の専門企業が開発したWordPressテーマ『賢威』。筆者が15年使い続けた理由を、以下の記事にて解説しています。

PCとスマホ表示の切り替えには『メディアクエリ』を使う

『メディアクエリ』は、表示する媒体（PC・タブレットPC・スマホ・印刷物など）によってレイアウトを自動的に切り替える機能。CSSに『@media～』というコマンドを記入する事で実装できます。

　記入の際は『媒体』『条件』『変化する内容』を指定する事が必要があります。

　今回はPC表示を基準として、以下の条件を満たした場合に切り替える設定にします。

• 媒体：タブレットPC・スマートフォン
• 条件：画面幅が600px以下に切り替わった場合
• 内容：画像やテキストを縦並びに組みかえる

　『条件』を『600px以下』としたのはタブレットPCの画面幅を想定しての事。つまり普段PC画面で表示されているレイアウトが、タブレットPCやスマホ表示の際は自動的に切り替わるという設定です。

　以下がメディアクエリの記述内容の例。(max-width:600px) がブレイクポイント（切り替わるタイミング）です。

<style>

@media only screen and (max-width : 600px) {

	/* ここに切り替えるコードを入力 */

}

</style>

　肝心な『画像やテキストを縦並びに組みかえる』工程は、displayプロパティに『flexbox』を指定して実行します。

スマホ表示時の画像の並び替えにはflexboxが便利

　PC画面でテキスト右側に並んだ画像を、スマホ表示時に上部配置したい場合flexboxという機能が便利に使えます。

　次にflexboxを使って、左右交互に画像を配置する方法・スマホ表示時にレイアウトを適正化（画像を上部に配置）する具体的な方法を解説します。

画像とテキストを交互表示・スマホ表示で縦並びにする具体的な方法

　まずは以下の画像をご確認ください。

　上図は前出アパレルサイトの並びを再現したものです。この画像を使って解説していきます。

※記事の最後に実際のHTML+CSSのコード表を記載しています。これから先の記事内容と照らし合わせながら作業を進めて下さい。

PC表示の際『flexbox』内はデフォルトで横並び配置

　flexbox内では初期状態でインライン要素として扱われます。

　例えば、上記の『画像』と『テキスト』は2行ともそれぞれのflexbox内（クラス名：box）に収まっています。

　何の属性も与えていないので、普通に横並びに配置。2段目の画像とテキストがすでに左右逆並びになっているのは、単にHTML上で逆に書いているだけです。

　HTMLコード

　PC表示上の挙動は各内容を横並びにしているだけ。『float:left』を適用した時と変わりありません。

　ですが今回のコードでは各boxに『box-01』と『box-02』というwidth:600px以下で機能するクラス名を追記しています。

『box-01』『box-02』の内容は以下の通り。ここで登場する『flex-direction』プロパティは、今回のテーマである『右側表示の画像をスマホ表示で上部に移動』する工程の要（かなめ）となります。

『flex-direction』は内容物を自在に配置できるプロパティ

　flex-directionはflexbox内で要素の並び方を制御するプロパティ。与える値によって、以下の様に内容が並べられます。

※『flex-direction』は柔軟に内容物のレイアウトを決められる、非常に機能性の高いプロパティです。ですがflexbox内でしか機能しませんのでご注意下さい。

　今回は『 box_01 』に『 flex-direction:column 』を設定し内容を普通に縦に並べ替え、『 box_02 』には『 flex-direction:column-reverse 』を充てて『内容を縦に並べ替えて上下を逆にする』設定にしました。

『flex-direction』によってレイアウトが切り替わるプロセスは以下の通り。

　まず上記2段の画像とテキストは、それぞれのflexbox(display:flex)に収められています。ここで画面幅が600px以下に変わるとメディアクエリが起動。

　上部box内はflex-direction:columnによってそのまま左側のSample-01画像より順に段積みされ、下部box内はcolumn-reverseの命令で右に配置されたSample-02画像を先に段積みします。

　以下の様に並び替えられました。

　サイトの全体幅のクラス名『resp-container』は、PC表示時800pxに指定していましたが、600px以下で『画面全体の80%幅で表示』に切り替わわる設定です（『 margin:auto 』はセンタリングする設定）。

ここでは『スマホの画面全体の80%幅の中で100%広げて画像やテキストを表示する』という記述をしています。

　以上です。

　以下に今回のHTML+CSSのコードを記載します。

　CSSコード

<style>


	.resp-container {							/* PC表示時のコンテナサイズ */
			width: 800px; margin: auto;					/* 幅サイズを800pxに指定。水平方向は中央に配置 */
		}

	.box {										/* 『Sample-01 画像』と『text-01』、『Sample-02 画像』と『text-02』それぞれの設定 */
			display :flex;						/* 『flexbox』を適用 */
		}
	
	.text-01 {									/* Sample-01・テキストのスタイル（上段） */
			line-height: 35px;					/* 行の高さ */
			font-size: 16pt;					/* 文字のサイズ */
			letter-spacing: 1px;				/* 文字間隔 */
			text-align: left;					/* 左寄せ表示 */
			padding-left: 25px;					/* テキストの左側余白（内側）※Sample_01画像と接触しない為の設定 */
		}
		
	.text-02 {									/* Sample-02・テキストのスタイル（下段） */
			line-height: 35px;					/* 行の高さ */
			font-size: 16pt;					/* 文字のサイズ */
			letter-spacing: 1px;				/* 文字間隔 */
			text-align: left;					/* 左寄せ表示 */
			padding-right: 25px;				/* テキスト右側の余白（内側）※Sample_02画像と接触しない為の設定 */
		}
		
	.img-size {									/* PC表示時の画像サイズ */
			width: 300px;						/* 幅：300px */
		}
		
@media screen and (max-width: 600px) {			/* スクリーン幅が600px以下になったら適用（メディアクエリ） */

	.resp-container {							/* 画面幅600px以下時のコンテナの設定 */
			width: 80%;							/* 画面幅の80%を使用 */
			margin: auto;						/* 画面の中央に配置 */
		}
		

	.box-01 {									/* Sample-01のスタイル（上段） */

			flex-direction: column;				/* スマホ時に縦並び */
			text-align: center;					/* 水平方向を中央に配置 */
		}
		
	.box-02 {									/* Sample-02のスタイル（下段） */

			flex-direction: column-reverse;		/* スマホ時に上下逆にして縦並び */
			text-align: center;					/* 水平方向を中央に配置 */
		}
		
	.text-01, .text-02 {						/* スマホ時の各テキスト設定 */
			line-height: 35px;					/* スマホ時の行の高さ */
			font-size: 16pt;					/* スマホ時の文字サイズ */
			letter-spacing: 1px;				/* スマホ時の文字間隔 */
			padding: 0;							/* 内側の余白 */
			width: 100%;						/* スマホ時はテキスト幅をコンテナ内いっぱいに広げる（つまり画面幅の80%） */
		}
		
		.img-size {								/* スマホ時の画像のサイズ（ Sample-01 / Sample-02 ） */
			width: 100%;						/* スマホ時はコンテナ内いっぱいに広げる（つまり画面幅の80%） */
		}
		
		.align-c {								/* スマホ時の画像の位置（ Sample-01 / Sample-02 ） */
			text-align: center;					/* スマホ時は水平方向の中央に配置 */
		}

	}											/* @media（メディアクエリ）の閉じカッコ（ここを忘れずに！） */
	
</style>

　HTMLコード

<div class="resp-container"><div class="box box-01">

<p class="align-c">

<img src="《 Sample-01 画像 》" alt="sample-01" class="img-size">

<p class="text-01">　こちらはSample-01のテキストです。PC表示の際は画像の右側に配置。画面幅が600px以下になると画像の下に配置します。</p>

</div>

<br>

<div class="box box-02">

<p class="text-02">　こちらはSample-02のテキストです。PC表示の際は画像の左側に配置。画面幅が600px以下になると画像の下に配置します。</p>

<p class="align-c">

<img src="《 Sample-02 画像 》" alt="sample-02" class="img-size">

</p>


</div>

</div>

※画像ファイルは自身でご用意ください。サイズは幅600px以上の正方形を推奨します。

　今回は以上です。これまでの流れを見てお気づきかも知れませんが『flex-direction』は、使い方を変えれば入力済みのHTMLコードをあまり変更せずに適用する事も可能です。

　例えば画像の左右入れ替えをCSS側のみで行う事や、スマホ表示時に非表示にするなど、色々と応用が効くのでお試し下さい。

画像の左右逆配置で記事にメリハリをつける

　コーポレートサイトやECサイトでよく見かける画像の左右逆配置。

　普段のブログ運営では必要ない技術と思われるかもしれませんが、記事にメリハリをつけたり、読者の視線を誘導したりと、意外と使いどころはたくさんあると思います。

　そこには、次の様なメリットが。

• ● 単調な記事レイアウトに変化を与えメリハリをつけられる
• ● 重要な画像や見出しを強調
• ● 読者の視線を誘導し記事全体を読んでもらう

具体的な例

• ● インタビュー記事：インタビュー相手の写真と回答を左右交互に並べる
• ● 商品紹介記事：商品の正面画像と背面画像を左右に並べる
• ● 比較記事：比較対象となる2つの製品の画像を左右に並べる

　画像の左右逆配置は、記事にメリハリをつけ読者の視線を誘導する効果的なテクニック。

　普段のブログ運営で使う機会は少ないかもしれませんが、覚えておいて損はない技術かと思います。