CSSによるWeb制作

CSSはデザインに強く非常に便利ですが、環境によっても見え方が異なったりします。そのあたりがとても難しく、なかなか身につけられないので忘備録をつけはじめました。最初は自分だけ分かればと思っていたのですが、逐次書き取っているうちにそこそこの量になってきて、どこでも参照できるように、また「もしかして自分以外の人に役立ててもらえるのでは」との考えから、思い切ってネットに上げました。わかりにくかったり、間違いがあったりするかもしれませんが、そこは忘備録ということで一つ宜しくお願いします。なお、制作環境の都合上、AdobeGoliveCSをベースとした記録になっています（また、文体が「ですます」だったり「だである」だったりします）。

コンテンツ

デザインの基本方針

　CSS（カスケーディングスタイルシート）はデザインの幅が広く、レイアウトを柔軟に変更・調整できるほか、ソースをシンプルにまとめられることでSEOにも有利という特長があります。またCSSを切り替えることで、パソコンや携帯での閲覧、プリント時に、レイアウトを買えたり内容を変更することも可能になります。
　このようにメリットの多いスタイルシートですが、これまでシェアの大半を占めていたIE6がまともに対応していなかったことでなかなか浸透しませんでした。しかしスタイルシートに対応したIE7も徐々に普及してきたので、今後はCSSを使わない手はありません。

  1. スタイルシートの活用
    1. 段組、枠組みは、テーブルではなく、CSSのdiv要素を使います。携帯でのブラウジングを考慮して順序よく記述します。
    2. 文字の整形は、<b><i>などを除き、スタイルシートで行います。エレメントスタイルを基準に設定し、部分的な装飾・調整はクラススタイルを用います。
    3. フレームは、バラバラに表示されたり、SEOで不利になるため使いません。部分スクロールさせる必要があれば、CSSの機能を使って実現します。
  2. 閲覧環境の想定
    1. IE（インターネットエクスプローラー）、Firefox、OperaおよびSafari（Mac）でのパソコンでの表示及び印刷（IEとSafariのみ）。可能なら、携帯でのブラウジング（PCサイトビューアーを除く）も考慮します。
    2. IE6はバグが多く表示崩れしやすい（position:fixedやfloatのバグなどによる）ので無視したくなりますが、まだ利用者も多いようなので必ず考慮します。※2008年7月時点
    3. FirefoxとSafariはスタイルシートの指定にかかわらず文字の拡大縮小が可能です。したがって、段組は極力縦方向成り行きを前提にデザインし、どうしても崩れては困る場所は画像で文字を入れるようにします。
    4. FirefoxのCSSの表示は、IEなどに比べてかなり正確です。しかし、プリント時の崩れはひどく、最初からプリントは当てにしません。
    5. OperaはDiv上辺のマージン設定にバグがあるので、上方にマージンを取りたい場合はパディングで代用します。