Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

CSSを使ってHPを作った仕事のまとめ備忘録


複数CSSを外部ファイルにする場合、import.cssを作ろう

import.css内には読み込む外部cssファイルをまとめておくべし。新規でCSSファイルを作った場合はimport.cssと新規のCSSファイルをアップロードするだけで、HTMLの改修は不要になるため更新・修正管理が楽になります。ブラウザハックには個人的には使いません。

import用の4つのCSSファイル

base.cssは基本的な設定だけをしておきます。bodyのbackgroundの設定や、aタグの挙動、標準フォントのcolorとfont-sizeとline-heightなどの初期値の設定など。 layout.cssコンポーネントの配置設定をします。header,side,main,footerなどの配置およびwidthの設定です。 style.cssブラウザごとの細かいデザイン設定をこのファイルに書いていきます。 print.css印刷用CSSの設定を行います。印刷したときのずれなどを修正します。

mediaタイプの設定を忘れずに

CSSファイルをどの出力系に適応するか、mediaタイプを忘れずに設定すること。ディスプレイ表示用のCSSファイルはmedia="screen"を設定し、印刷用CSSはmedia="print"を設定する。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
など

ターゲットブラウザをしっかり設定し、検証する

例えば、次の7種類にしぼる。
Windows IE7.0, 6.0, 5.5, 5.0
Windows Firefox2.0
Mac Safari2.0
Mac Firefox2.0
※WindowsIEの古いバージョンは次のURLへアクセスすると検証するための環境を整える事ができます。
http://tredosoft.com/Multiple_IE

CSS効果をブラウザごとに適応を分ける

CSSファイルに要素を書く場合にブラウザ事の表示のずれを修正する必要がでてきます。そのときFirefox → IE7.0 → IE6.0以前の順番に効果を書く必要があるようです。順番を間違えると予想どおりにならないようです。 html[xmlns] ・・・Firefoxに適応する要素名の前につける
*:first-child+html ・・・IE7.0に適応させる要素前につける
* html ・・・IE6.0以前に適応できます。
要素名の前に半角スペースを空けるのを忘れずに。 以下参考したサイト。
小粋空間: IE7 の CSS ハック
CSSバグ回避 CSS辞典
Eblog: Safari用 CSSハック

CSSレイアウト(float)の注意点

元々tableレイアウトの時代からウェブデザインを学んで来たので、CSSレイアウトを学ぶまで戸惑いました。ブラウザの種類事のレイアウトのずれです。 ある一つのことを気をつければブラウザ事のレイアウトのずれは生じないということを学びました。 「floatを設定するボックスには、padding,borderの設定は行わない」ということです。widthの解釈の違いによるレイアウトのずれがあり、widthの中にpadding値とborder値を含める含めないという解釈の違いがレイアウトのズレを生む場合が出てくるのです。 paddingやborderを設定したいfloat用ボックス(レイアウト用)ボックスがある場合は内側にもう1つボックスを作って、内側に入れたボックスに飾り付けをして下さい。 ※参考にしたサイト
ブラウザ互換について-外部CSS