画像に余白を設定してfloatでキレイに横並びにする方法。

  • 記事の一覧表示
  • 吹き出し風テキスト
  • 商品の紹介

などで、画像を左(右)に、テキストを右(左)にする時、基本的にはfloatで横並びにすると思います。

例えば、画像の横幅が100pxなら、下記のようにCSSを指定するのではないでしょうか?

.image {
  float:left;
}
.text {
  margin-left:120px;
}

ただ、このCSSだと、動的に画像のサイズが変わる時に上手く対応できません。

画像の横幅が130pxならテキストの余白を150pxにする必要があるし、画像の横幅が150pxならテキストの余白を170pxにする必要があるからです。

その対処方法としては、画像の親要素にサイズを指定するのが最も簡単ですが、画像の縦横の比率が違う場合や、サイズが小さすぎる(大きすぎる)場合には、あまり使いたくない方法。

できれば、画像側で余白を設定したいですよね?

意外と便利なoverflow:hidden

そこで、おすすめなのが下記のCSS。

overflow:hidden;

「要素からはみ出すものは表示しない」というコードで、主に、デザインが崩れないように使うCSSなんですが、実は、違う使い方もできます。

一体どのように使うのかサンプルで確認してみましょう。

画像の横幅がテキストの余白よりも大きくて回り込んでしまう

こちらが問題のケース。ご覧のように、画像の横幅がテキストの余白よりも大きいため、テキストが回り込んでデザインが崩れています。

See the Pen PjNgXe by Chef (@chef-aomori) on CodePen.

overflow:hiddenを適用するとデザインが崩れない

こちらが、テキストにoverflow:hiddenを適用したサンプル。余白は画像側で設定しているので、画像のサイズが動的に変わっても対応できます。

See the Pen float-overflow-hidden-sample by Chef (@chef-aomori) on CodePen.

おすすめの活用例

画像が動的に変化して困ることもあまりないかもしれませんが、身近な活用例だと、スマホとPCとでサムネイル画像のサイズを変える場合などが考えられるでしょうか。

例えば、スマホ表示時の横幅を100px、PC表示時の横幅を150pxにするなら、テキストを横並びで表示させるために、

.image {
  float:left;
}
.text {
  margin-left:120px;
}
@media only screen and (min-width: 780px) {
.text {
  margin-left:170px;
}
}

のように、テキスト側の余白を画面幅に合わせて変更する必要がありますが、テキストにoverflow:hiddenを指定すれば、メディアクエリを使う必要はありません。

.image {
  float:left;
  margin-right:20px;
}
.text {
  overflow:hidden;
}

テキスト側で余白を設定するより、画像側で余白を設定した方が管理しやすいので、おすすめですよ。

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!