画像に余白を指定してfloatでキレイに横並びにする方法。Fantastech(ファンタステック)Fantastech!!WordPressGoogleアドセンスSEO対策サイトマップ画像に余白を設定してfloatでキレイに横並びにする方法。吹き出し風テキスト商品の紹介などで、画像を左(右)に、テキストを右(左)にする時、基本的にはfloatで横並びにすると思います。margin-left:120px;}ただ、このCSSだと、動的に画像のサイズが変わる時に上手く対応できません。画像の横幅が130pxならテキストの余白を150pxにする必要があるし、画像の横幅が150pxならテキストの余白を170pxにする必要があるからです。その対処法としては、画像の親要素にサイズを指定するのが最も簡単ですが、画像の縦横の比率が違う場合や、サイズが小さすぎる(大きすぎる)場合には、あまり使いたくない方法。できれば、画像側で余白を設定したいですよね?意外と便利なoverflow:hiddenそこで、おすすめなのが下記のCSS。overflow:hidden;「要素からはみ出すものは表示しない」というコードで、主に、デザインが崩れないように使うCSSなんですが、実は、違う使い方もできます。どのように使うのかサンプルで確認してみましょう。画像の横幅がテキストの余白よりも大きくて回り込んでしまうこちらが問題のケース。ご覧のように、画像の横幅がテキストの余白よりも大きいため、テキストが回り込んでデザインが崩れています。CodePen.overflow:hiddenを適用するとデザインが崩れないこちらが、テキストにoverflow:hiddenを適用したサンプル。余白は画像側で設定しているので、画像のサイズが動的に変わっても対応できます。画像が動的に変化して困ることもあまりないかもしれませんが、身近な活用例だと、スマホとPCとでサムネイル画像のサイズを変える場合などが考えられるでしょうか。margin-left:170px;}}のように、テキスト側の余白を画面幅に合わせて変更する必要がありますが、テキストにoverflow:hiddenを指定すれば、メディアクエリを使う必要はありません。overflow:hidden;}テキスト側で余白を設定するより、画像側で余白を設定した方が管理しやすいので、おすすめですよ。無料コードエディタ「ATOM」をおすすめする4つの理由2019/2/15もっと見るサイトの文字や画像をコピー禁止にする方法【コピーガード】2018/7/18もっと見るPHPのstr_replaceとpreg_replace(正規表現)の使い方2018/7/4もっと見るCSSで文字数に合わせて吹き出しの横幅を変える簡単な方法2018/5/22もっと見るWindowsのブラウザ別スクロールバー非表示方法【CSS】2018/3/23もっと見るプログラミング初心者の無料の学習方法は?独学できる?2018/3/9もっと見るechoしたパラメータを返り値で扱えるob_start関数の使い方2018/1/20もっと見る要素1つで中央寄せ、2つ以上で横並びにするCSS。ΔPHPで条件分岐をしてJavaScript(jQuery)を実行する方法。【PHP】テキストボックスに入力した値で条件分岐する方法。Reviews」をリリースしました!口コミが投稿できる国産WordPressプラグインを開発した話きたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。