CSS電光石火 | HOME

更新情報
  • 08/10/15 「デザイン-ヘッダ」追加
  • 08/09/29 「フッタの作成」追加
  • 08/09/29 「メイン-右カラム」追加
  • 08/09/29 「メイン-サイドバー」追加
  • 08/09/29 「ヘッダの作成」追加
  • 08/09/28 「要素の中央寄せ」追加
  • 08/09/26 「スタイルの読み込み」追加
  • 08/09/26 「float」追加
  • 08/09/26 「ブロックとインライン」追加
  • 08/09/23 「widthとheight」追加
  • 08/09/23 「marginとpadding」追加
  • 08/09/23 ブラウザ対応アイコン追加
  • 08/09/23 「スタイルの読み込み」追加
  • 08/09/19 「DOCTYPE」追加
  • 08/09/19 「開始前に」追加
  • 08/09/18 「始めに」修正
  • 08/09/18 「始めに」追加
  • 08/09/18 サイトオープン

始めに

  • 始めに

  •  

当サイトは、初心者が分かりやすく順序を追って、且つ実践的なCSS作法を学ぶために作成された学習用サイトです。
明確に、そして空理空論にならない現実に沿ったレイアウト手法を伝授します。
なお、当サイトではCSSの講座がメインであり、htmlタグについての講座は、必要性に応じて伝える以外に詳しい説明を行いません。htmlタグの勉強はHTMLクイックリファレンスさんが詳しく取り扱っておりますので、そちらをご覧ください。

  • レイアウトは「無かった」

  •  

かつて、CSSレイアウトが取りざたされる前は、実のところhtmlにレイアウトを表記する機構は「全く」存在しませんでした。
これは大げさな書き方ですが、こうした限界を突破すべく、多くの方々がWYSIWYG機能を持つエディタ(ホームページビルダーなどが有名ですね)を駆使し、テーブルレイアウトと呼ばれる手法を使い、急場を凌いできたのです。

  • テーブルに対する疑問

  •  

最近になり、CSS2.1の普及もあいまって、急速に旧来のテーブルレイアウトからCSSレイアウトへとシフトする傾向が高まってきました。
テーブルという「表」をレイアウトに使用することが、マークアップ上正しくないと言われるようになったのです(厳密には事実と異なる)。
ところが、長らくテーブルに慣れ親しんだ人や、また、CSSから学習し始めた人たちも、ようやく最近になってテーブルの利点に気づきつつあるという、逆転現象が一部で起こっています。
このサイトでは、CSSの利便性と使い方を伝えると同時に、旧来のテーブルレイアウトの利点も併せて記載します。
(※誤解の無い様にいうと、CSSレイアウトに比べテーブルレイアウトはやはり消滅傾向にあります。ただし、業界自体がCSSレイアウトの細やか過ぎる指定を疑問視する声もあるのです)

  • それぞれの長所

  •  

CSSの利点とは、細やかな調整が可能であることです。逆に、テーブルは大枠を決めて大雑把にはめ込んで行く作業に最適です。
この二つを両方とも利用するのが、「ハイブリッドレイアウト」と呼ばれる手法で、CSS2.1へとシフトする段階では、この手法を用いたサイトが数多く見受けられました。
CSSの最大の特徴はレイヤー概念が存在する事であり、同時に、マージンとパディングという「間合い」の概念も特徴として併せ持っています。また、旧来のやり方ではアプリケーションに頼ったレイアウトの一括変更などが主流でしたが、CSSでは一つの箇所(セレクタやプロパティ)を変えるだけで、同一のクラスを割り振ってある要素(タグ)へと一括変更が可能です。こればかりはテーブルでは真似できません。

  • 当サイトで学ぶ事

  •  

しかし、当サイトでは一旦しっかりとCSSの挙動を学んだ上で、後々テーブルの利点についても標記したいと思います。 テーブルだけ使えるようになっても、厳密なCSSの取り扱いで必ず躓いてしまいます。
従って、最初のうちは、CSS2.1および最近になって実装されつつあるCSS3のプロパティを織り交ぜながら解説してゆきます。読み終える頃には、ある程度のレイアウトが可能となっていることでしょう。
また、当サイトでは大量のバグを抱えつつも未だにシェアトップを守り続ける、IEのバグハックについても触れてゆきます。