CSSのfloatを使って背景や枠線が付かないとか画像や文章がはみ出すなんて場合の対処法 結城永人 - 2018年3月11日 (日) サイトのデザインでCSSのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。 しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。 何とかならないかと考えながら対処法が見付かったので、纏めておきたい。 floatで背景や枠線が付かなければoverflowのhiddenも使おう 一文目二文目三文目四文目 サンプルのソースコード HTML <div class="fbox"> <p>一文目<br>二文目<br>三文目<br>四文目</p> <img src="画像URL"> </div> CSS .fbox {border:2px #00008b solid;background:#fffaf0;overflow:hidden;} .fbox p {float:left;} .fbox img {float:right;max-width:140px;} floatを使うとコンテンツが背景や枠線を指定した親ボックスのdivなどから浮き上がって抜け出してしまうから何も入ってないような感じにデザインが崩れるんだ。 親ボックスのdivなどにoverflow（超過）のhiddenを追加して使うと囲まれたコンテンツの全域にデザインが反映するようになる。 floatで画像や文章がはみ出したら先ずは両方にfloatを使おう 動かしたい画像や文章のどちらか一つにfloatを使うと親ボックスのデザインは反映する。 ただしfloatのコンテンツは浮き上がっているから実際にデザインがかかっているのはfloatがかかってないコンテンツのためなんだ。 画像や文章でfloatをかけた方よりもかけない方が小さいとデザインがはみ出してしまう。 どちらも親ボックスに収まったようにデザインをかけるにはfloatを先ずは両方に使わなくてはならない。 その上で、さらに親ボックスのdivなどにoverflowのhiddenを使うと大丈夫なんだ。 CSSのfloatは親ボックスのoverflowのhiddenとセットにして使わないと含まれるコンテンツに共通のデザインを付けられないと知ると背景や枠線が付かないと画像や背景がはみ出すなんて失敗しなくなる。 参考サイトoverflowを使ってfloatの問題を解決するスタイルシートのテクニック コメント 新しい投稿 前の投稿
結城永人
結城永人
コメント