●ＣＳＳ分割の具体例
| 分け方 | 例 |
|---|---|
| 部品別 | header.css,footer.css,main.cssなど |
| 要素別 | font.css,color.css,table.cssなど |
| ページ別 | top.css,category.css,page.cssなど |
| メディア別 | print.css,handheld.cssなど |
| ブラウザ別 | ie.css,firefox.css,safari.cssなど |
実務的には、これらを組み合わせたファイル設計が行われるのが一般的。さらに、各ブラウザ間の誤差をなくすためのリセットスタイル、ＣＳＳハックのみを記述したファイル、モダンブラウザ用のリッチな表現を記述したファイルなどをプラスすることもある。
このような基本的な設計方法を覚えておき、あとはWebサイトの開発・運営体制にあわせてシンプルにしたり複雑にしたりと調整を行う。たとえば、季節ごとに見出しの色やヘッダー画像を変更するサイトでは、その指定だけを抜き出した「season.css」というファイルを用意しておけば、更新が効率的になる。
これらの複数のＣＳＳファイルを一括して読み込むために、@importの記述用の「@import.css」というファイルがよく使われる。@importではあとから読み込まれたファイルが優先されるので、順序指定には注意。基本的に、おおまかなスタイルから個別的なスタイルへ、という順序で指定。
@charset "UTF-8";
@import "reset.css"; /* リセットスタイル */
@import "layout.css"; /* レイアウト */
@import "header.css"; /* ヘッダー */
.....
@import "hack.css"; /* CSSハック（clearfix,ブラウザの表示調整など） */
共通のＣＳＳファイルを一括して読み込むだけでなく、特定のページのみＸＨＴＭＬにlink要素を追加して専用のＣＳＳファイルを読み込んだり、@importの記述用のＣＳＳファイルを複数用意して読み込みの切り替えを行う場合もあるが、管理が複雑になりがちなので、明確なルールを定めたりドキュメントを用意したりしてできるだけわかりやすくすることが重要。
また、印刷用のスタイルや携帯機器用スタイルを用意する場合は、ＸＨＴＭＬにlink要素を追加し、media属性で適用メディアを指定する。
<head>
....
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,projection,tv" />
<link rel="stylesheet" type="text/css" href="css/print.css media="print" />
<link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld" />
....
</head>
@importに適用メディアを指定したり、@mediaという方法も利用できるが、ブラウザのサポート状況を考えて、link要素のmedia属性で指定しておくのが基本。
ＣＳＳファイルの分割のポイント
●ファイルを細かく分けすぎない
ファイルが多くなりすぎると、コーディングや修正時に混乱する可能性が高くなる、ファイル管理や バージョン管理がむずかしくなる、レスポンスが悪いといったデメリットがうまれる。
●直感的にわかるファイル名をつける
自分の為にも他人の為にも、ファイル名をわかりやすくしておく。
●@importにコメントをつける
「@import.css」に指定した@importそれぞれに、何に関するファイルなのか簡単なコメントをつけておくと便利。
●サイトにあわせてファイル設計を柔軟に変える
いつも同じ設計では多種多様なWebサイトに対応しきれない。サイトの規模、コンテンツの性格、量、更新頻度、更新担当者のスキルなどによってファイル設計を。
●最低限の構成は統一しておく
Webサイトによってファイルを変えるといっても、制作チーム内のルールや自分のルールとして、最低限ファイルの構成は統一しておく。
●最終更新日や総目次などの「インフォメーション」を記入する。
ＣＳＳファイルの上部に書いておくと便利なのは、「何のスタイルなのか」、「目次」、更新履歴として、「誰が」「いつ」「どこを」「どう更新したのか」という情報。
●ファイル設計はデザイナーとコーダーで
ＣＳＳファイルを分割するには、一定のレイアウトパターンだけでなくイレギュラーな部分を知る必要がある。ＸＨＴＭＬの構成上は同じパターンでも異なる見た目にしたい、特定のページのみ特別な指示を行いたいなど。
設計にはメンテナンス性も大きく関わってくるので、サイト公開後の運営体制がどうなるのかを確認しながら設計する。
今日はここまで。
0 件のコメント:
コメントを投稿