画像をdivやh1タグなどのブロック要素に入れると画像の下に数ピクセルほどの隙間ができてしまいます。気にするほどのことでもない範囲ではありますが、デザイン上1pxのずれもだしたくない場合はこの不要な余白を取り除く必要があります。ここではそれを解決する3つの方法を紹介します。
Author: hiroki
背景に合わせてテキストの色を自動で変更するプラグイン Backgroundcheck
背景の明度を自動的に判別し、要素の色を最適化してくれるスクリプト「backgroundcheck」を紹介します。
bootcampのWindows8を使いやすくするための設定(トラックパッド編)
MacBookAirにWindows8をインストールして使っていますが、OSによって操作方法が若干違うために使っていて違和感を感じることがよくあります。特に、Macではトラックパッドのスクロール方向をナチュラルにしているので、Windows8のスクロール方向とは逆になってしまい、OSをスイッチする度に「あれ?スクロール方向はどっちだったかな?」と混乱してました。
そんな状況を打開するために私がした3つの設定を紹介します。すべて余計なソフトは使っておらず、設定方法も簡単です!
positionのabsolute指定で親要素の高さが潰れてしまったときの対処法。
positionを多用してレイアウトしていると親BOXの高さが潰れてしまうことがよくありますね。デザイン上問題なければそのまま放ったらかしにしてもよいのですが、CSSなどで親要素を装飾したい場合はしっかり高さを復活させてあげましょう。
CSSで簡単!画像を画面の真ん中に配置する方法
画像を画面の中心に配置する方法です。
Webページをレイアウトする上で一つ重要になってくるのが、様々な大きさ(解像度)のスクリーンでも崩れることなく表示させるようにすることですよね。ということは、パソコン、タブレット、スマートフォンの端末からアクセスを想定して作ることになります。さらに、パソコンのスクリーンだけでも小さいものから大きいものまであるので一概に「このサイズで作れば大丈夫」というのがありません。
現在、主流なページのサイズである1024px × 768pxも実は一番解像度の低いパソコンのスクリーンを想定したサイズです。では、そのような様々なスクリーンサイズがあるなかで、常に画像が背景の中心に表示させるようにするにはどうしたらいいのでしょうか。
実はCSSやJavascriptを駆使するたくさんの方法があり、中級者以上のかたにとっては「そんなの簡単!」という方がほとんどだと思いますが、コーディングを初めたばかりの初心者にとってはつまづくポイントだったりします。そんな方のために今回はcssを使った2つの簡単な方法を紹介します。