ホームページ制作に使える情報

Archive for the ‘CSS’ Category

clearfixを使う

floatした要素が親要素の高さを超えてはみ出してします時があります。

例えば、親要素にborderの指定をしている時にborderからはみ出しているので、レイアウトが崩れて残念なWebサイトになってしまいます。

そんな時に使うのが、clearfixですね。clearfixは下記のようにclassを使って書く方が多いです。

.clearfix:after{

visibility: hidden;

display: block;

content: “.”;

height: 0;

clear: both;

}

clearfix {display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

IE7ハック

コーディングしているとブラウザの違いで同じように表示されずに面倒な作業をしなければなりませんが、まだまだ使用頻度も高いIE7はハックで調整しておいた方がいいですよね。

例えば次のようなHTMLがあるとしたら

HTML

<div id=”sample”></div>

—————————————–

CSS

#sample{ }

/*—–IE7——*/

*:first-child+html #sample{}
----------------------------------
cssでは通常のcssを記入した後に、*:first-child+htmlでIE7用のCSSを記入します。
そうするとIE７にもCSSがききますね。
記入する順番を間違えるとダメですから気をつける必要がありますね。

checkboxと文字の高さを揃える

チェックボックスの□と文字の高さが揃わないと気持ちが悪い。

【HTML】
<input type=”checkbox” name=”check” id=”check_btn” />

 

【CSS】
#check_btn{ vertical-align:middle; }

これで高さが揃うはず。

よく間違えるのはvertical-align:center;としてしまうので注意ですね！（自分だけ？