CSSの基本的な説明
CSSリファレンスに入る前に、基本的なことですがホームページの作り方についてです。ホームページの作り方は大きく2つに分けられます、テーブルデザインとCSSデザインです。
CSSデザインとテーブルデザインとはそもそもどういうものかということですが、まずテーブルとは表なのです。 いままでは主にテーブルをつかってその枠のひとつひとつに色々画像やテキストを入れてレイアウトする方法がメインでした。 多くの市販のホームページ作成ソフトもそうでした。
それに対してCSS（Cascading Style Sheets）とはテキスト部分をHTMLで作り、デザイン部分は別に切り離してCSSにしたものです。ですが以前はブラウザによる解釈の違いが大きくあまり使われませんでした。 しかし最近どのブラウザもほぼ実用上問題なく対応するようになり、かなり使われています。
本来のサイトの作り方から言えば代用として使われていたテーブルよりも、CSSの方に色々と分があります、それで私のテンプレートはCSSメインとしているわけです。CSSの説明に入る前にテーブルデザインとCSSデザインのおおよそのメリット・デメリットを上げておきます。
テーブルデザインのメリット・デメリット
メリット
- ブラウザによる表示の違いが少なく古いブラウザでもあまり問題なく表示できる。
- 対応ソフトが多い。特に市販のものはだいたいテーブルデザインがメインになっている。 またそのため参考書も多いし、参考になるサイト等も多い。
- CSSデザインに比べ崩れにくい。一部のタブを間違ってもそれで全体が崩れることは少ない。
デメリット
- テーブルのタグが多くまたデザインも文章も全部ひとつのページに入っているので、構造的に整理されておらず検索エンジンに有利とはいえない。
- どうしてもページのサイズが大きくなるので、表示が重くなる場合がある。
- 各ページ毎にデザインされているので、デザインを変える時には1ページずつ変えていかなければならない。
- 内容の多いページになるとタグが多すぎて見通しが悪く、修正がわかりにくく難しい。
CSSデザインのメリット・デメリット
メリット
- 文章構造がHTMLの標準にそったものが作りやすく、検索エンジン対策上有利なサイトが作りやすい。
- テーブルタグなど本来余分なタグがなくなる。デザイン部分をHTML外に出して専用のファイルにするので1ぺージが軽くなり、表示も早くなる。
- CSSは細かなサイズでデザイン変更ができるので、慣れるとテーブルデザインよりも修正などがしやすい。
- 外部のCSSファイルで全ページのデザインを管理できるので、デザインを一括して変えることなどもできる。
- 結果的にアクセシビリティに優れたサイトが作れる。わかりやすい例だと視覚に障害のある方などが使う音声読み上げソフトなどにもマッチしたサイト作りができる。
デメリット
- ブラウザによりCSSの解釈が違うところがあるので調整の必要がある。
- ひとつタグを間違えると全体が崩れたりしやすい。
- CSSを使いながら出来上がりを見ながら作れる（wysing)ソフトが少ない。手打ちの部分が多くなる。