1. まとめトップ

CSSで困った時に必要な知識をまとめてみた ※フロントエンジニアには必須項目

CSSを組む際、思うように表示をできない、IEで表示が崩れる、誰でも様々な問題に直面します。その際に役立った知識をまとめてみました、

更新日: 2013年07月03日

hydesamaさん

  • このまとめをはてなブックマークに追加
3 お気に入り 1827 view
お気に入り追加

個人的に決めているルール

・同じスタイルはまとめて指定する
・!importantはまとめて指定しない。極力使わない。
・不用意にid属性を使わない
・インデントで整理する
・不要なスタイルは書かない
・idと一緒にtagやclassを指定しない
・子孫セレクタは使わない
・子セレクタを使わない
・継承されるスタイルを二重で使わない
・@importを使わない
・ファイルはできるだけ少ない
・なるべくid, classで指定する
・ブラウザはセレクタを右から左へ判別することを考える
・なので指定するセレクタの数は少ない方がいい

CSSハックについて

text-indentされないとき

ブロック要素のみしか適用できない

float時の注意点

fwidthを失うため指定してあげること。
指定したくない場合はautoにする。
ただし、img要素はHTML上でのwidthの指定が推奨されているので、cssでの指定は不要。
横並びにする場合はすべての並ぶタグにfloatをいれる。
子要素の高さは親要素に引き継がれない。clearFixを絶対使うこと。
IE5.x, 6では、float指定したボックスにマージンを指定すると、左側が指定された値の2倍のマージンになってしまう場合がある。

position: relative;

relativeは本来の高さと幅を保持する。
親要素にrelative,子要素にabsoluteを指定すればtooltipみたいなのが可能。
その際には親要素はブロック要素でなければいけない。

インライン要素

marginは左右にのみ効く 。
paddingは一応きくけど微妙なので使わないほうがいい?
width、heightは効かない。
border、backgroundは効く。

インラインブロック要素

margin、padding、width、heightがきく。
他はインライン要素と同じ。img,input,select,textareaとか 。

IEにも対応した指定の仕方 {
display: inline-block;
*display: inline;
*zoom: 1;

ブロック要素

デフォルト幅は親ブロック要素全体。
ブラウザによって上下に並んだ要素のmargin-topとmarginbuttomは被る。
横は問題ない。

%指定をする際

親要素のwidth等がautoのままだと、%指定してもautoのままになる。

clearFix

テーブルに使うときは注意。IE以外ではdisplay:blockじゃなくdisplay:table-cellとかにしないと崩れる。

最新ののclearFixはこれ?
.cf:befire
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

ボックスモデル

width, height を指定すると、paddingは基本そのなかに入らない

ブロック要素の中央寄せ

以下を指定する

margin: 0 auto;
width指定

同時に指定してはいけないもの(IE対策)

※指定したい場合は要素を分けること。

width + border
width + padding
float + margin

小さいheightを指定したらIE6で大きくなった

以下を指定する。

font-size: 0;
or
overflow: hidden;

ネガティブマージン

ネガティブマージン
marginはマイナスの値でも平気。
paddingはダメ。
IE6.0対策として「position: relative;」の併記が必要。

1 2





hydesamaさん