Unimedia

ブログ画像一覧を見る

このブログをフォローする

1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

cssを分割する。マルチシートアプローチ

cssを分割して使用するためのメモ。

1枚のcssのみで全てのスタイルを定義する方法（ワンシートアプローチ）に対して、

複数のcssに分割、分離してスタイルを定義する方法をマルチシートアプローチという。

一つのcssに必要なcssを読み込んで使用する。

外部cssの読み込み手順は、link要素で

import.css（名称変更可能）をhtmlに読み込み、import.css内で他cssを@import規則で読み込む。

■記述の仕方

import.css（名称変更可能）

文字コードの設定の下に記述する。
------------------------------
/* CSS Document */
@charset "utf-8";

@import "reset.css";
@import "font_small.css";

------------------------------

下のように記述してもよい。
@import url(reset.css);
@import url(font_small.css);

最初の書き方ではモダンブラウザで有効。（旧ブラウザでは反応しないものも）

@import "base.css";

次の、(　)でくくる書き方は旧ブラウザもimportしてくれるものが多い。

@import url("default.css");

これを利用して、モダンブラウザと旧ブラウザでちがう表示をすることもきる。

■特徴

メリット

・余分なものを読み込まなくてすむので軽い。
・複数人で管理しやすい。

デメリット
・ファイル数が多くなりやすく、管理が煩雑になる。
・修正箇所が探しづらい。修正の見落とし注意。

■分割の方法

・サイト内のすべてのページに適用されるもの
・特定のページ群（またはページ）に適用されるもの
↓
・ブラウザ間の差異を解消する初期化に関わるもの
・CSSを切り替えて変化させるもの

これらを抜き出して別のcssファイルを作成。

■記述順

CSSでは、同じ要素に対していくつかの指定がかち合ったとき、セレクタの詳細度が同じなら、後のほうに書かれたものが優先的に適用される。
↓
一般的な指定（サイト全般に適応される指定）のcssを先に、一部ページでのみ使用する特殊な指定のcssを後から読み込むようにする。

■分割の例１

・用意するｃｓｓ

default.css （初期化）
common.css （全ページに適用するもの：ヘッダー，フッター，ナビゲーション）
top.css （トップページに適用するもの）
lower.css （トップページを除く下層ページに適用するもの）
category1.css （category1の各ページに適用するもの）
category2.css （category2の各ページに適用するもの）
§
print.css （印刷用）

・トップページで使用するcss
default.css （初期化）
common.css （全ページに適用するもの）
top.css （トップページに適用するもの）

・各カテゴリのページで使用するcss
default.css （初期化）
common.css （全ページに適用するもの）
lower.css （トップページを除く下層ページに適用するもの）
category2.css （category2の各ページに適用するもの）

■例２

サイト内のあらゆるページからimport.cssを読むことで、ほかの各種cssを読込み、さらに必要であれば，それぞれのHTMLからcategory.cssやpage.cssを読み込む。

import.css
　- reset.css（ブラウザ・リセット）
　- common.css（全ページ共通のスタイルなど）
　- module.css（画像ファイルやリストなど）
　- ie.css（IE用のハックを記述）
　- category.css
　- page.css（詳細設定）
　- print.css（印刷用）