画像の下にテキストが回り込むのを2STEPで回避するCSS設定

2020年5月7日

WEBサイトのレイアウトで「画像は左、テキストは右(下図参照)」とレイアウトされている時、画像の下に急にテキストが回り込まれると読みにくくないですか?

個人的には非常に違和感を覚えます。

イメージ

「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。

福沢諭吉「学問のすゝめ」より抜粋

テキストを回り込みさせずに配置したいと思っていたところ、CSSに1行記述を増やすだけでそれを回避できる方法がありましたので、その手順を紹介します。

基本のレイアウトを作る

通常、「写真は左でテキストは右」という場合、cssでfloat:leftを使用すればレイアウトできます。
これは従来と同じです。

HTML

<img src="hogehoge.jpg" alt="hoge" class="left">
<p>「天は人の上に人を造らず人の下に人を造らず」と言えり。~(以下略)</p>

CSS

.left {
	float:left; //画像を左に配置
	margin-right:10px; //画像の右に余白を作る
}

これだと、上述のとおり画像の下にテキストが回り込まれますので、cssに以下を追加します。

テキストの回り込みを回避するCSSを追加する

回り込みの回避には、テキスト側(p)にoverflow:hiddenを追加するだけで良いのです。
たった1行で済むのでとても簡単ですね。

CSS

.left {
	float:left;
	margin-right:10px;
}
p {
	overfloa:hidden;
}

出来あがった物

イメージ

「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。

福沢諭吉「学問のすゝめ」より抜粋