画像の横に文字を表示するには

画像の横に説明文などが表示されているのを良く見かけます。下に表示されるより何となくわかりやすくて良いですよね。

画像の横に文字を表示するのは、画像 <img> に float 指定をすると簡単に実現できます。

例として下のUSBフラッシュメモリの紹介画面をTable を使わずに作ってみます。インターフェース ：USB3.0 / USB2.0までが商品説明です。

持ち運びに便利なキャップレス！！ワンプッシュでコネクタを収納！
コネクターを傷つけないスライド・リトラクタブル（伸縮）タイプ！

シリーズ名 ： USB3.0 Express ST1-2
タイプ ：USBフラッシュメモリ
インターフェース ：USB3.0 / USB2.0

CSS float で画像の回りこみを作ってみる

画像img要素にstyle=”float:left”を指定します。これで次の要素に対して左側に画像が回り込むようになります。その後、商品説明を書いて、最後に念のため style=”clear:both” で回り込みをクリアします。

持ち運びに便利なキャップレス！！ワンプッシュでコネクタを収納！
コネクターを傷つけないスライド・リトラクタブル（伸縮）タイプ！

シリーズ名 ： USB3.0 Express ST1-2
タイプ ： USBフラッシュメモリ
インターフェース ： USB3.0 / USB2.0

<img src="https://memo.itsysgroup.com/wp-content/uploads/2018/04/042718_0554_USB1.jpg" alt="" width="209" height="218" style="float:left"/>
<p>
  持ち運びに便利なキャップレス！！ワンプッシュでコネクタを収納！
  <br>
  コネクターを傷つけないスライド・リトラクタブル（伸縮）タイプ！
</p>
<p>
  シリーズ名  ： USB3.0 Express ST1-2<br>
  タイプ  ： USBフラッシュメモリ<br>
  インターフェース  ： USB3.0 / USB2.0
</p>
<br  style="clear:both">

簡単にイメージ通り表示されたと思います。
画像を商品説明の右側に回り込ませたい場合は、float:right を指定します。

ちなみにtable を使わないでと書きましたが、ふと商品説明は table を使った方が見易そうですね。やってみます。

持ち運びに便利なキャップレス！！ワンプッシュでコネクタを収納！
コネクターを傷つけないスライド・リトラクタブル（伸縮）タイプ！

<img src="https://memo.itsysgroup.com/wp-content/uploads/2018/04/042718_0554_USB1.jpg" alt="" width="209" height="218" style="float:left;"/>
<p style="font-size:0.7em; font-weight: bold;">
  持ち運びに便利なキャップレス！！ワンプッシュでコネクタを収納！
  <br>
  コネクターを傷つけないスライド・リトラクタブル（伸縮）タイプ！
</p>
<br>
<div style="float:left;">
  <table>
    <tr><td>シリーズ名</td><td>USB3.0 Express ST1-2</td></tr>
    <tr><td>タイプ</td><td>USBフラッシュメモリ</td></tr>
    <tr><td>インターフェース</td><td>USB3.0 / USB2.0</td></tr>
  </table>
</div>
<br  style="clear:both">

うーん……変わらなかったかも……
ちなみに上の例では table要素を div要素で囲みましたが、table要素にstyle=float:left; width: 300px; のように float指定をしてもかまいません。div要素で囲んだ方が楽かなと思って囲んだだけですので。

以前『CSS　floatの使い方』として段組み記事を書きましたので段組みが気になるなら少し覗いてみてください。

以上、「画像の横に文字を表示するには」でした。