チョコパイを240こ食べたプログラマ

青森から大都会に出てきてPHPエンジニアとして修行中。CSSとかも。時々趣味の雑貨系も♡好物は『チョコパイ』。好きな関数は『var_dump』。Twitterは@chooringo(ちょうりんご)

CSSの基礎:要素、box、余白について勉強しなおしー!

この本を読んでCSSの基礎の基礎を勉強しなおし!

10日でおぼえるCSS/CSS3入門教室

10日でおぼえるCSS/CSS3入門教室

きっと、「こんなことわかってないのか、ぷっw」と思われそうだけどちゃんとわかってなくて、結構曖昧に使ってきたので…。
そもそも今までCSSなんてまともに書いたことないやっ
基礎の基礎を頑張る…!

セレクタ

⇒左のセレクタの要素に含まれる(子孫)右の要素に適用

⇒左のセレクタの直接の子要素に適用

⇒共通の親を持ち、左の要素の直後の右の要素に適用


なんとなく書いてみた。

<div id="main">
     <p class="kaomoji">(o´∀`o)</p> …①
     <div class="naku">
         <p class="kaomoji">。゚(゚´Д`゚)゜。</p> …②
     </div>
  </div>
  <p class="kaomoji">(●´ω`●)ゞテレ</p> …③
  <p class="kaomoji">(●´ω`●)ゞエヘヘ</p> …④
div#main p.kaomoji { color: red; } //①と②が赤くなる
div#main > p.kaomoji { color: red; } //①だけ赤くなる
div#main + p.kaomoji { color: red; } //③だけ赤くなる

CSSの適用先

  • 優先度が高いのは、

制作者のCSS>閲覧者のCSS>ブラウザのデフォルトCSS

  • 閲覧者のCSSを最優先にしたい場合は、閲覧者のCSSで!importantをつける

閲覧者>制作者>デフォルト になる

  • 制作者のCSSにも!importantをつけると、

閲覧者の!impotatnt>制作者の!important>制作者のCSS>閲覧者のCSS>ブラウザのデフォルトCSS になる

idセレクタの個数が多いもの>属性関連セレクタの個数が多いもの>要素名の個数が多いもの

☆idとclassの使い分け

  • id…1ページ内で一度しかでてこない、一意な名前

⇒レイアウトなどの名前で命名することが多い

  • class…1ページ内で何度も使用できる名前

⇒titleとかdestiptionとか…
参照:
http://css.uka-p.com/basic/id_class.html
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#id-selectors

あとは優先度の関係も考慮してidにするかclassにするかも考えたほうがいいってことですかね

命名も、ぐぐったら参考にできそうなもの結構でてくるんですねー!

☆ブロックレベル要素とインライン要素

  • インライン要素の中にブロックレベル要素は書けない
  • bodyの中に直接かけるのはブロックレベル要素
ex. × <body><img src="xxx" /></body>
  〇 <body><p><img src="xxx" /></p></body>

☆boxについて

boxの基本的なこと。

  • 背景のない部分の余白はmargin
  • 背景のある部分の余白はpadding

f:id:chooringo:20130302233615p:plain
背景設定してなかったらどっちでもいいじゃんヾ(。`Д´。)ノ彡
背景設定なしなら、どうやって使い分けてるのかなー?

※注意※
IE5.5以降だとwidthとheightはborderまで含めてしまっている。(CSSの仕様と異なる)

あーやっぱり基礎がしっかりないとだめですねー!
次はいつも壁にぶちあたるfloatあたりを勉強しなおそう~(o´∀`o)