CSSでレイアウトする際に覚えておきたい基本情報

小川さん
聞いてくれ、 カンマンからのお知らせだ。

新人のtakimotoです。
Webページを作る時にCSSを使ってレイアウトをする際に気をつけておきたいこと、覚えておきたい基本情報をまとめておこうと思います。

まず、
・CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-indexとかいろいろ
『フロートの厳格な配置ルール』等、他にも丁寧に説明してくれているのでしっかり覚えておきたい内容です。

・少しのコードで実装可能な20のCSS小技集
初心者でも使えそうなCSSの基本的な小技がサンプル付きで紹介されています。

その他備忘用メモ

・pやh1の上下の余白と自動改行をとる方法
p,h1 {
margin: 0 0 0;
display:inline;
}

レイアウト崩れ対策(主にIE)
・IE6ではfloatした方向にmarginを設定すると値が2倍になってしまうので設定しない。
・floatを解除するclear: both;は空要素でそのまま入れるとIE6のバグの原因となる可能性があるので、なるべく空要素で入れるのを避けてfloatをかけた要素とまとめて親ボックスに入れる。
・floatをかけたボックスにwidthとheightを指定した場合overflow: hidden;をかける。(高さの指定がない場合は必要ない)

最後に、
・W3C CSS 検証サービス
スタイルシートに記述している内容の文法が間違っていないかどうか検証してくれます。
CSSは”;”や”}”で閉じるのを忘れているだけで反映されないので、ミスの確認用として使っていきたいです。

カンマン最新情報をゲット!

Facebookのウォールで

Twitterのタイムラインで

この記事を書いた人

comman
comman 社を背負った存在 あるときはディレクター、あるときはエンジニア、そしてデザイナにも、夜寝ているときだけ現れる、妖精さん的アカウントです。 commanが書いた他の記事をチェック!

もう1記事どうぞ!

  • 関連
  • 人気
  • 最新

コメントを残す