複数のCSSファイルを適用する[@import]
現在Webサイトをスタイルシートで装飾する場合、HTMLとは別にCSSファイルを作成し、HTMLファイルの<head>内で呼び出すのが主流です。 しかし、呼び出すCSSファイルが複数になると、HTMLの<head>内が呼び出しでいっぱいになってしまいます。 ここでは、それを回避する方法を紹介します。
１．HTMLで読み込む
冒頭にも書きましたが、現在のCSSファイルを呼び出す方法は、HTMLファイルの<head>内で記述するのが主流です。
<html>
<head><link type="text/css" rel="stylesheet" href="style.css"><link type="text/css" rel="stylesheet" href="style2.css"> <link type="text/css" rel="stylesheet" href="style3.css">
</head>
:
:
このように<head>内に<link>タグで指定することで、複数のファイルを読み込むことができます。
しかし、２～３ファイルくらいならともかく、例えば種類ごとにCSSを分けるなどたくさんのCSSを適用したいとき、<head>がどんどん長くなってしまいます。
またこれを複数のWebページに適用したい場合、すべてのページのHTMLファイルに追加しなければならず、面倒ですし、ミスも増えます。
そんなときは、メインとなるCSSファイルにリンクを追加していくという方法がおすすめです。
たとえばメインというstyle.cssの中にstyle2.css、style3.cssというファイルを読み込ませたい場合、@importを指定することで読み込ませることができます。
２．CSSで読み込む
【style.css】
@import url(“style2.css”);
@import url(“style3.css”);
HTMLファイルにはstyle.cssのみ読み込ませれば、３つすべてのCSSが適用されます。
ただし、style.cssに読み込ませたstyle2.css内でstyle3.cssを読み込む…など二重三重に読み込ませることになると、読み込みに時間がかかり表示が遅くなりますので、注意が必要です。
３．必要に応じて併用しよう
以上のように、どちらにもメリット・デメリットがあります。
そこで、必要に応じて併用するのがおすすめです。
style.cssは全体の共通設定、style2.cssはボックス内の設定、style3.cssはページごとのbody内の設定、このような感じにわけて、それぞれのcssファイルに細かい追加cssファイルを読み込ませるなど、上手に併用してください。
