画像の下にできる隙間をなくす方法。

画像をdivやh1タグなどのブロック要素に入れると画像の下に数ピクセルほどの隙間ができてしまいます。気にするほどのことでもない範囲ではありますが、デザイン上1pxのずれもだしたくない場合はこの不要な余白を取り除く必要があります。ここではそれを解決する3つの方法を紹介します。

Continue reading

positionのabsolute指定で親要素の高さが潰れてしまったときの対処法。

positionを多用してレイアウトしていると親BOXの高さが潰れてしまうことがよくありますね。デザイン上問題なければそのまま放ったらかしにしてもよいのですが、CSSなどで親要素を装飾したい場合はしっかり高さを復活させてあげましょう。

Continue reading

CSSで簡単!画像を画面の真ん中に配置する方法

画像を画面の中心に配置する方法です。

Webページをレイアウトする上で一つ重要になってくるのが、様々な大きさ(解像度)のスクリーンでも崩れることなく表示させるようにすることですよね。ということは、パソコン、タブレット、スマートフォンの端末からアクセスを想定して作ることになります。さらに、パソコンのスクリーンだけでも小さいものから大きいものまであるので一概に「このサイズで作れば大丈夫」というのがありません。

現在、主流なページのサイズである1024px × 768pxも実は一番解像度の低いパソコンのスクリーンを想定したサイズです。では、そのような様々なスクリーンサイズがあるなかで、常に画像が背景の中心に表示させるようにするにはどうしたらいいのでしょうか。

実はCSSやJavascriptを駆使するたくさんの方法があり、中級者以上のかたにとっては「そんなの簡単!」という方がほとんどだと思いますが、コーディングを初めたばかりの初心者にとってはつまづくポイントだったりします。そんな方のために今回はcssを使った2つの簡単な方法を紹介します。

Continue reading

カラムの高さをjQueryを使って簡単に揃える方法

複数のカラムでレイアウトを配置するとき、それぞれのカラムの高さを揃えるのって以外と難しかったりします。特にdiv要素を使ったブロック要素の場合です。

例えば、簡単な2カラムのサイトレイアウトでも、サイドバーの高さとメインコンテンツの高さを揃えたいけどどうすればいいの?ということがありますよね。

カラム(ブロック要素)の高さを揃える方法としてはCSSで揃える方法、jQueryのプラグインを使う方法、他にもたくさんあります。

ここでは、私が見つけたなかで一番簡単な方法を紹介します。

Continue reading

CSS 簡単に Clearfix で float を解除する方法。

floatを使ってレイアウトを構築する場合、確実にfloatを解除することが大切になってきます。

解除方法として一番簡単なのは、floatをかけた要素の次にくる要素に clear:both をかけることです。

ただし、いつもその次の要素があるわけではありませんよね。そこで便利な手法を紹介します。

Continue reading