画像をdivやh1タグなどのブロック要素に入れると画像の下に数ピクセルほどの隙間ができてしまいます。気にするほどのことでもない範囲ではありますが、デザイン上1pxのずれもだしたくない場合はこの不要な余白を取り除く必要があります。ここではそれを解決する３つの方法を紹介します。
画像の下にできる隙間をなくす方法。
Tag Archives: css
CSSで簡単！画像を画面の真ん中に配置する方法
画像を画面の中心に配置する方法です。
Webページをレイアウトする上で一つ重要になってくるのが、様々な大きさ(解像度)のスクリーンでも崩れることなく表示させるようにすることですよね。ということは、パソコン、タブレット、スマートフォンの端末からアクセスを想定して作ることになります。さらに、パソコンのスクリーンだけでも小さいものから大きいものまであるので一概に「このサイズで作れば大丈夫」というのがありません。
現在、主流なページのサイズである1024px × 768pxも実は一番解像度の低いパソコンのスクリーンを想定したサイズです。では、そのような様々なスクリーンサイズがあるなかで、常に画像が背景の中心に表示させるようにするにはどうしたらいいのでしょうか。
実はCSSやJavascriptを駆使するたくさんの方法があり、中級者以上のかたにとっては「そんなの簡単！」という方がほとんどだと思いますが、コーディングを初めたばかりの初心者にとってはつまづくポイントだったりします。そんな方のために今回はcssを使った２つの簡単な方法を紹介します。
CSS 簡単に Clearfix で float を解除する方法。
floatを使ってレイアウトを構築する場合、確実にfloatを解除することが大切になってきます。
解除方法として一番簡単なのは、floatをかけた要素の次にくる要素に clear:both をかけることです。
ただし、いつもその次の要素があるわけではありませんよね。そこで便利な手法を紹介します。