CSSビギナー向け

取りあえず最終回：コンテンツ部分のデザインを完成させる

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

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

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

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

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

2段組

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

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

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

    メインコンテンツ部分が上に来ても同様のレイアウトが実現できますが、それは追々ってことで。

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

まずは構成。んで全体、headerをば

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

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

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

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

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

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

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

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

CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）

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

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

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

CSSに関する基本的なこと1（記述方法、使用できる文字、コメントアウト）

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

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

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

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

はじめに

このカテゴリではCSSビギナーの方向けに、ボクなりな説明でCSSで組むサイトを分かりやすいように書いていきたいと思ってます。

結構実践型でやろーと思ってますんで、ちゃんと覚えようって方のみお願いします。

対象者

htmlをある程度理解していて、チョットだけでもいいのでタグ打ちが出来るよ。って人や今までテーブルレイアウトで組んできたけどいい加減CSSを覚えなければ...って人、CSS始めたばっかりって人を主な対象として書いております。

非対象者

全くホームページとか作った事ありません。って人やソースを一度も見たことがない人は、まずは基本的なhtmlに関して扱っているサイトさまや書籍などでお勉強してから読むようにしてください。

このカテゴリでの最終目標

サンプル画像CSSって美味しいの？っていう人が、取り合えず基本的な2段組レイアウト（左記のサンプル）が組めるようになる。

んでは、追記で取り合えず必要なモノとかの説明をしたいと思います。

↑上に行くよ