CssHappyLife様のビギナー向けのエントリーを実際に組んでみた。その１

CSSの基本を確認するということで、今回はCssHappyLife様の素材をお借りしてみました。
お借りした素材は、まずは構成。んで全体、headerをば - CSS HappyLifeより。

このエントリー内で、覚えておきたいところを勝手に記事にしました。
個人メモなので、長文になりますが(ﾟεﾟ)ｷﾆｼﾅｲ!!という方はどうぞ。

１．「構成を書く」
そういえば今まで、全体の構成をある程度脳内で整理はしていましたが、紙に書いてはいないです。途中で、divタグを追加したりと手間がかかったりもしたので、紙かPCでWebデザインの複製にでも構成を書いてみたら、修正の手間が省けるかもしれませんね。
CSSを入れる前に、htmlを完成させるのも次から心がけることにします。

２．「アスタリスクの使用」
今まで、何となくで使っていたものですが、ココでおさらいの意味も含めて。
CSSにおいてアスタリスクは、ユニバーサルセレクタというらしいです。ググってみたり、辞典で調べても差異はないようで、「すべての要素に対してスタイルを適用する」という意味です。ブラウザの差異をなくすためにユニバーサルセレクタでリセットします。

CSS セレクタに関するおさらい | WWW WATCH
この方のブログに、すごく詳しく載っていました。
ユニバーサルセレクタ以外のセレクタも載っていて、初心者の私でも面白そうだと思いました。

３．「背景画像はリピートさせる」
背景は小さく切り出して(こちらの背景画像の場合、４×４pxの画像)、リピートさせること。
背景画像を小さくしてリピートさせるメリットは、聞いた話では『画像ファイルの容量も少なくなるから、表示も速くなる』ということみたいです。
他にどんなメリットがあるか、お解かりの方コメントお待ちしています。

４．「中央寄せ(センタリング)はmarginの右左をauto指定」
い、一応知っていたんだからねっ！！！(ツンデレ風)

※1：IE5とかIE6の過去互換モードとかの場合、bodyにtext-align:centerを指定して、全体を囲っているdiv（サンプルだと#page）にtext-align:leftとmargin:0 autoを指定することで、センタリングできます。

まず、「IE5とかIE6の過去互換モード」って何だろう？と思い、とりあえずググってみました。初心者の私でもわかりやすかったのが、こちらのページでした。
標準準拠と過去互換〜CSSテクニック〜

とりあえず、過去相互モードによる解釈の違いで思うように表示してくれないといった問題を、CSSのbodyというセレクタにtext-align:centerを指定して、全体を囲っているdiv（サンプルだと#page）というセレクタに、text-align:leftとmargin:0 autoを指定することで、センタリングできるということでしょうか。

５．「余計なdivは使うな」
ここでdivを使用すると『div厨乙』といわれるのですね、わかります。。。と冗談はさておき。
でも、どうしてh1にbackgroundで背景指定して、下のように表示されるのでしょうか？

自分の勝手な解釈ですが、h1に指定するってことはロゴ画像部分の後のみ表示されるということだと思っていたのですが、違うのでしょうか？(というか、表示されている時点でそうではないのだとは思うのですが。)
アホでごめんなさい。

６．「高さや幅からpaddingの分は引け」
「表示させたい高さ(幅)−padding＝CSSで記述するheight(width)」ということ。