横浜のホームページ制作 スタジオFIXの社長ブログ

Web標準に準拠したコーディングを行うと、
必然的にCSSファイルに記述される内容が複雑になります。
1枚のCSSファイルに何千行もの記述があると、
目的の箇所を探すだけでも時間がかかってしまいます。
そんな時は、複数のCSSファイルを使う方法がオススメです。


CSSファイル（スタイルシート）を読み込ませるためには、
htmlファイルの内に
<link href="●●.css" rel="stylesheet" type="text/css" />
という記述をします。


複数のCSSファイルを読み込ませるためには
<link href="●●.css" rel="stylesheet" type="text/css" />
<link href="■■.css" rel="stylesheet" type="text/css" />
<link href="★★.css" rel="stylesheet" type="text/css" />
のように、複数行を内に記載してもよいのですが、
これではあまりスマートではありませんね。


そこで、@import という方法を使って、
複数のCSSファイルを読み込む方法を使います。
まず、「import.css」という名前のCSSファイルを作成します。


# 任意のファイル名でOKです。
# 「import.css」、「main.css」、「style.css」
# などのファイル名が一般的です。


「import.css」内に記述する内容は、以下の通りです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
@import url(●●.css);
@import url(■■.css);
@import url(★★.css);
━━━━━━━━━━━━━━━━━━━━━━━━━━━
この「import.css」を読み込ませれば、「import.css」に書かれた
●●.css
■■.css
★★.css
を読み込む仕掛けになっています。


# この時、読み込みまれる順位は上からとなりますので
# 優先度の高い（重要な要素を記述した）CSSファイル名から順に記載しましょう。


そして、htmlファイルの内に 以下のように1行記述して
「import.css」を読み込みこませます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
<link href="import.css" rel="stylesheet" type="text/css" />
━━━━━━━━━━━━━━━━━━━━━━━━━━━


CSSファイル（スタイルシート）が複雑になってしまって
お困りの方は、ぜひお試しあれ〜。