前回の記事では、外部CSSでサイトを構築する事で得られる効率性＆その他のメリットを紹介しましたが、今回はさらに、外部CSSファイルを「@import」を使用して作業効率化を図る、という方法を紹介します。
つまり、サイト管理を効率化する為に使用する外部CSSをも効率化する、というお話です…。
CSSファイルの中身があまりに長くなってしまったら複数に分けよう！
例えば、『特定のカテゴリーに属するコンテンツだけ一部デザイン、レイアウトを変えたい or 追加したい！』といった場合には、必然的にCSSスタイルも多くなります。
そんな時、外部CSSを１つで済ませようとすると中身がズラーっと長くなってしまい、管理がしずらくなるため、外部CSSファイルの複数展開は非常に有効です。
しかし、例えばそれら外部CSSを（X）HTMLページから１つ１つ個別に読み込んでいくようにしてしまうと、外部CSSファイルが増えたり減ったりした時に結局手間になってしまいます。
具体的に説明しますと、あるサイトで以下の外部CSSファイルを設定しているとします。
①全ページ共通のデザインを決定している「style.css」
②期間限定である商品を載せ、その文字装飾等を決定している「sale.css」
②のページについては、追加で延べ250ページ新規作成をし、それらのページの任意の箇所に期間限定コーナーを設けるとします。
この場合、②の250ページの（X）HTML（<header>～</header>）の箇所には、基本的にはこのような記述がまず考えられます。
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="sale.css" type="text/css" />
②の250ページを作成する時には、最初の1ページ目で上記のフォーマットを書いてしまえば、後はページを新規作成していく過程の中でコピーペーストを掛ければ済むので、あまり面倒は感じないでしょう。
しかし、このような方法を取ってしまうと、イザ限定期間が終了した時に、②の250ページ内の期間限定商品コーナーは不要になるわけですから、当然上記の「sale.css」も要らなくなる訳です。
そのような時、
<link rel="stylesheet" href="sale.css" type="text/css" />
を②の250ページ全てから削除しなければならないのです…。
『別に気にならないので残しておくわ、オレ。』とか、『ソースコードの串刺し検索機能を使って消せるからイイよ別に…。』とか身も蓋も無い意見もあるかと思いますが、以下に紹介する方法は外部CSSの把握の面から言っても価値があるので、読んで下さい！
@import の使い方
このような、少々面倒な状況を打開する策として「@import」の使用が断然おススメです。
この@importを使えば、上記のように「style.css」「sale.css」の2つのコードをHTML（<header>～</header>）に記述しないで済みます。
代わりに（X）HTML（<header>～</header>）には、
<link rel="stylesheet" href="base.css" type="text/css" />
と記述するだけです。モチロン「base」という名前は何でも結構です。ここでは例としてbase.cssとしています。
続いて外部CSS「base.css」を用意します。そして、このbase.cssの中に以下のコードを記述します。
@import url("style.css");
@import url("sale.css");
これで完了です。活字ではちょっと理解しづらいという方は右下の画像をクリックして確認してみて下さい。（※クリックすると画像が拡大して、さらにドラッグできます。元に戻したい場合はもう一度クリックします。）
こうすることで最初に「base.css」が読み込まれ、base.cssにはスタイルが書かれていないのですが、代わりにstyle.cssとsale.cssを読み込む命令が書かれているので、結果2つのCSSに書かれているスタイルが適用されるという仕組みです！
ですから、先ほどの例で言いますと、イザ期間が終了したらbase.cssをチョチョイと開き、中の「@import url("sale.css");」という一行を削除したら『ハイ終わり！』なのです！
当然外部CSSを追加する時は、逆に「@import url("～.css");」を追加して外部CSSファイルを作成すればOKです。
これは作業効率化の面でも、作業の正確性の面でも非常にメリットがあるので、是非是非活用するようにしましょう！
このブログでも、合計5つの外部CSSファイルを持っていますが、この@importが大活躍しています。とても管理が楽です！
