レスポンシブな画像とテキストの横並びを表示する

レスポンシブな画像とテキストの横並びを表示する方法を紹介します。

実際には以下のような表示となります。

スマホでご覧の方は1カラムで表示されていると思いますが、
PCでは画像とテキストが横並びの2カラム表示になります。

PCでは2カラム、スマホでは1カラムに自動調整されます。

画像の左右はセレクタで変更できます。
左画像ならline-box-left-imageとなります。

右画像ならline-box-right-imageとなります。

画像のコードは先に書くようにしてください。
あとに書くとレスポンシブしなくなります。

レスポンシブな画像とテキストの横並びを表示する手順

HTMLコードを記事に記述

レスポンシブ表示をするには、
以下のコードを記事内で記述します。

左画像のコードサンプル

<div class="line-box">
<div class="line-box-left-image"><img src="画像URL" alt="画像サンプル" width="250" height="auto" itemprop="image"/></div>
<div class="line-box-text">

ここにテキストを記入します。
テキストの前後は1行空行を作ってください。

</div>
</div>

右画像のコードサンプル

<div class="line-box">
<div class="line-box-right-image"><img src="画像URL" alt="画像サンプル" width="250" height="auto" itemprop="image"/></div>
<div class="line-box-text">

ここにテキストを記入します。
テキストの前後は1行空行を作ってください。

</div>
</div>