「float」で画像の横にテキストを表示させるボックス作成方法

author photo

Byinfobloger

ボックス作成方法

記事の中でよく使うのが画像の横に説明文を書く方法です。

やはり画像と説明がセットになって書かれている項目は読者にとっても理解されやすいコンテンツになります。

少し前までの手法が「float」を使う方法でした。
この「float」はモダンブラウザ以外でもサポートされていると言う利点があります。

ただ「float」には少々癖がありまして、色々と問題点もあります。

今回のテーマは「float」の問題点を解決しながら、画像とテキストを上手に見せる方法について具体例を上げながら説明していきます。

スポンサーリンク

画像を左にテキストを右に配置した例

画像テキスト回り込み

画像を左にテキストを右に配置したれいです。

画像の大きさはCSSで指定されていますので400px以上の画像を容易してください。

推奨サイズは横幅800px以上です。

HTML
<div class="float-box01 float-border-color01 float-lbg01 cf">
<img src="<!-- 画像URL -->" alt="<!-- 代替えテキスト -->" class="float_left">
<p><!-- 本文1 --></p>
<p><!-- 本文2 --></p>
<p><!-- 本文3 --></p>
</div>
画像テキスト回り込み

今度はテキストを右に画像を左に配置した例です。

こちらも同じく画像サイズはCSSで指定してありますので、400px以上、推奨サイズは横幅800px以上です。

HTML
<div class="float-box01 float-border-color01 float-lbg01 cf">
<img src="<!-- 画像URL -->" alt="<!-- 代替えテキスト -->" class="float_right">
<p><!-- 本文1 --></p>
<p><!-- 本文2 --></p>
<p><!-- 本文3 --></p>
</div>
画像テキスト回り込み

このボックスの使い方の注意点としては、画像の縦幅を大幅に超えるようなテキストを記入しないことです。

感覚的なものになってしまいますので何文字以内がベストだと言い切れませんが、画像とテキストのバランスを考えて使用するようにしてください。

実際にテキストの量が多すぎるとどんな表示になるのか?

このボックスでで試してみましょう。

こんな感じで見た目はあまり美しくないですよね。

でも見た目よりも中身ですから、書かなければいけない事は遠慮なく書いてもらって大丈夫です。

線色と背景色を変えた「float」ボックス例

画像テキスト回り込み

少し落ち着いた雰囲気を演出するために、青色の彩度を落とした色にしてみました。
無理に背景色のあるボックスを使う必要はありません。
ケースバイケースで使ってください。

HTML
<div class="float-box01 float-border-color02 float-bg02 cf">
<img src="<!-- 画像URL -->" alt="<!-- 代替えテキスト -->" class="float_left">
<p><!-- 本文1 --></p>
<p><!-- 本文2 --></p>
</div>
画像テキスト回り込み

暖色系の線色に背景も薄い暖色系にしてみました。
こちらも使いすぎると記事の統一感がなくなるので注意しながら使いましょう。

HTML
<div class="float-box01 float-border-color03 float-bg03 cf">
<img src="<!-- 画像URL -->" alt="<!-- 代替えテキスト -->" class="float_right">
<p><!-- 本文1 --></p>
<p><!-- 本文2 --></p>
</div>

画像のサイズを小さくした「float」ボックス例

画像テキスト回り込み

少し画像が大きすぎると感じる方もいるかもしれません。
画像サイズを小さくしみました。

テキストの量が多い場合は、こちらのボックスを使用してください。

HTML
<div class="float-box01 float-border-color01 float-lbg01 cf">
<img src="<!-- ここに画像のURLを挿入 -->" alt="<!-- ここに代替えテキスト -->" class="float_left-S">
<p>
<!-- ここに本文を記入してください -->
</p>
</div>
画像テキスト回り込み

CSSにはコメントがかいてあるので、そのコメントを読みながらサイズを変えてみてください。

CSSを書き換えなくても、この2種類で充分だとは思いますが。

HTML
<div class="float-box01 float-border-color01 float-lbg01 cf">
<img src="<!-- ここに画像のURLを挿入 -->" alt="<!-- ここに代替えテキスト -->" class="class="float_right-S">
<p>
<!-- ここに本文を記入してください -->
</p>
</div>

「float」ボックスのテキスト欄にタイトルを入れた場合

画像テキスト回り込み

ここにタイトルを入れてください

個々にタイトルを付けて説明するときなどに役立つとおもいます。

画像テキスト回り込み

使い方の具体例

例えばメイクの方法をSTEP1~STEP3というように説明してもいいかもしれません。

HTML
<div class="float-box01 float-border-color01 float-border-bg01 cf">
<img src="<!-- 画像URL -->" alt="<!-- 代替えテキスト -->" class="float_left_S">
<p class="float-box-title"><i class="fas fa-check fa-fw fa-lg"></i><!-- ここにタイトルを入れてください --></p>
<p><!-- 本文1 --></p>
<p><!-- 本文2 --></p>
</div>

「float」の最大の弱点は縦幅を揃えること

画像の横にテキストを表示するには「float」でも充分に対応できますが、高さを揃えるとなると大変なんです。

特にレスポンシブに対応させようと思うと一筋縄ではいきません。

  • ボックス画像

    ここにタイトルを記入

    ここに説明文を書いてください。

    お申し込み
  • ボックス画像

    ここにタイトルを記入

    ここに説明文を書いてください。商品の特徴やメリットなどを書いてもいいかもしれません。

    お申し込み

「float」の弱点を克服する「flex box」

ここで登場するのが「flex box」です。

モダンブラウザの全てに対応していますし、レスポンシブにも対応しています。

簡単に高さを揃えながら横並びのボックスが完成です。

  • ボックス画像

    ここにタイトルを記入

    ここに説明文を書いてください。

    お申し込み
  • ボックス画像

    ここにタイトルを記入

    ここに説明文を書いてください。商品の特徴やメリットなどを書いてもいいかもしれません。

    お申し込み
HTML
<div class="float-box02 cf">
<ul class="infolist-contents">
<li>
<div><img src="<!-- 画像URL1 -->" alt="<!-- 代替えテキスト1 -->"></div>
<p class="infolist-title">
<!-- タイトル1 -->
</p>
<p class="infolist-info">
<!-- 説明文1 -->
</p>
<a class="btn" href="<!-- URL -->"><!-- 文字列 --></a>
</li>
<li>
<div><img src="<!-- 画像URL2 -->" alt="<!-- 代替えテキスト2 -->"></div>
<p class="infolist-title">
<!-- タイトル2 -->
</p>
<p class="infolist-info">
<!-- 説明文2 -->
</p>
<a class="btn" href="<!-- URL2 -->"><!-- 文字列2 --></a>
</li>
</ul>
</div>

まとめ

今回紹介した画像とテキストの組み合わせは利用する機会が非常に多いと思います。/

読者にとっても画像とテキストがセットで表示されると読みやすいのでないでしょうか。

  • ここは箇条書きが読者も読みやすいだろう
  • ここはテキストだけの方が分かりやすい
  • ここはボックスを使って画像とテキストを表示しよう

全てに共通して言える事ですが適材適所が一番肝心です。

今回のテーマはいかがだったでしょうか?

それでは、また次回お会いしましょう!

関連記事
Share

Comments 0

Leave a reply