今回でビギナー向けと銘打ったこのカテゴリも最終回です。

もっと色々盛り込みたかったとか思ったり、自分で突っ込んだりしてる部分もありますが、自分の知識をアウトプットする練習も兼ねているので、細かいところはどっかに置いとくとして...

このデザイン→これ
を今回でカタチにします。

最終は、コンテンツ部分の見栄えの調整です。

んじゃ、いってみますか、、、

前回のエントリーで、全体の大枠は完成しました。
http://css-happylife.com/template/practice-01/11/

あとは、サイドとコンテンツ部分の調整だけです。
どっちから作業しても何の問題もないと思いますが、とりあえずサイドから組んでいきます。

んでは、いってみますか、、、

前回のエントリーでは2段組まで完成させました。
たぶんあと一息です。

取りあえず前回の最終系が下記です。
http://css-happylife.com/template/practice-01/08/

今回はフッター部分の作成です。

んでは、いってみますか、、、

前回のエントリーに続き、今回は2段組の部分をやっていきます。

取り合えず、2段組部分の仕様をば。

• デザインを見ていただければお分かりになるかと思いますが、サイドメニューの下に破線があるんですが、その破線がちゃんとメインコンテンツ部分の内容にあわせて伸びる（繰り返す）ようにします。
• ボクの組み方はfloatなんでpositionを使った全体のレイアウトに関しては、ウチでは期待しないで下さい。（ポジションによるレイアウトでサイトを作成した経験がありません...）
• このサンプルのHTMLはサイドメニューがソース上、コンテンツの上に位置してます。
  
  メインコンテンツ部分が上に来ても同様のレイアウトが実現できますが、それは追々ってことで。

だいたいこんな感じです。
んじゃ、いってみますか、、、

前回のエントリーが、ビックリするくらいアクセスあってびびってますが、変なプレッシャーに負けずまったりマイペースで行こうと思うです。

CSSを勉強する上でもっとも早い上達は、恐らく実践経験だと思います。
色んな参考書や、サイトを巡って脳内で考えてるのも一つの手段ですが、やっぱり組んでナンボだと思います。

って事もあり、すぐコーディングだけ出来る状態の基本データが入ってる下記練習用フォルダを使うと良いと思います。（はじめにと同じヤツです）

1. 練習用フォルダ（zip）をダウンロードする
2. 練習用フォルダ（exe）をダウンロードする

今回のサンプルの仕様は下記↓

• XML宣言なし
• DOCTYPE：XHTML 1.0 Transitional
• 文字コード：UTF-8
• 対象ブラウザ：IE6、Firefox2、Opera9

（対象ブラウザが少ないような気がするのは、気のせい。）

んでは、はじめますか。。。

3回続いた基本的なことも今回で最終です。
4回目の内容は、以下のことについて触れております。

んなの分かってるよ！って人は、次の次のエントリーにお進み下さい。

• スタイルの優先順位
• セレクタの組み合わせ
• セレクタのグルーピング
• スタイルの優先順位詳細

前回のエントリー、前々回のエントリーに引き続き、CSSに関する基本的なことをば。

今回は以下の事について触れています。

1. ショートハンドについて

前回のエントリーに引き続き、CSSに関する基本的なことをば。

今回は以下の事について触れるので、理解している方は次のエントリーにお進み下さい。

1. CSSで使える長さの単位
2. 色の指定方法
3. スタイルの継承
4. CSSの適用方法

実際の作業に入る前に、基本的なことをやっておきます。

作業ミスや混乱などを避けるためにもまずは基本です。しっかりと見に付けておきましょう。

以下の事について触れるので、理解している方は次のエントリーにお進み下さい。

1. CSSの記述の仕方
2. セミコロンについて
3. 大文字と小文字の区別について
4. class名やid名で使用できる文字
5. コメントアウトについて