画像の下にテキストが回り込むのを2STEPで回避するCSS設定
はじめに
WEBサイトのレイアウトで「画像は左、テキストは右（下図参照）」とレイアウトされている時、画像の下に急にテキストが回り込まれると読みにくくないですか？
個人的には非常に違和感を覚えます。
現象の再現
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。
テキストを回り込みさせずに配置したいと思っていたところ、CSSに1行記述を増やすだけでそれを回避できる方法がありましたので、その手順を紹介します。
目次
Apple iMac純正キーボードモチーフ
通常、「写真は左でテキストは右」という場合、cssでfloat:leftを使用すればレイアウトできます。これは従来と同じです。
HTML
- <img src="hogehoge.jpg" alt="hoge">
- <p>「天は人の上に人を造らず人の下に人を造らず」と言えり。～（以下略）</p>
CSS
- img {
- float:left;
- margin-right: 10px;
- }
できあがったもの
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。
これだと、上述のとおり画像の下にテキストが回り込まれますので、次のステップでCSSに追加の記述をします。
テキストの回り込みを回避するCSSを追加する
テキストの回り込みの回避には、テキストpにoverflow:hiddenを追加するだけで良いです。
HTMLに変更は無いため割愛します。
CSS
- img {
- float:left;
- margin-right: 10px;
- }
- p {
- overflow:hidden;
- }
できあがったもの
「天は人の上に人を造らず人の下に人を造らず」と言えり。されば天より人を生ずるには、万人は万人みな同じ位にして、生まれながら貴賤上下の差別なく、万物の霊たる身と心との働きをもって天地の間にあるよろずの物を資り、もって衣食住の用を達し、自由自在、互いに人の妨げをなさずしておのおの安楽にこの世を渡らしめ給うの趣意なり。されども今、広くこの人間世界を見渡すに、かしこき人あり、おろかなる人あり、貧しきもあり、富めるもあり、貴人もあり、下人もありて、その有様雲と泥との相違あるに似たるはなんぞや。
これで画像の下部に余白ができて、テキストが回り込むのを回避する事ができました。
