CSSで指定したスタイルをHTMLに読み込む方法

スタイルシートはHTMLファイル内に直接記述する方法と、外部ファイルに記述して読み込む方法があります。ソースの可読性と保守性を向上させるため、基本的には外部ファイルに記述します。

しかし特定のページでのみ使用するクラスに対してなど、HTMLファイルに記述した方が良い場合もない訳ではありません。そういった場合のために、直接HTML文書内に記述する方法もあります。

スタイルの記述と読み込みの方法を見てみましょう。

外部ファイルに記述する

link要素を使ってを読み込む方法と、style要素内でimportで読み込む方法があります。どちらを使っても同じなので、好きな方を使いましょう。

head要素内に記述します。通常はこれ一つを覚えておけば十分です。

CSSファイルを読み込む場合、importはlink要素と比べて遅いので基本的に使いません。しかしimportはCSSファイル内に記述できる所に優位性があります。

リセットCSSや特定のページのCSSを全て１ファイルに納めるのは、ソースの難読化ひいては保守性の低下を招きます。ある程度まとまった処理でCSSを分割して管理し、メインCSSからimpoartして読み込む方がいい場合もあるので、状況に応じて使い分けましょう。

@import url("CSSファイルパス");

@import url("CSSファイルパス");

※各ファイルの格納場所が基準ディレクトリとなります。フルパスならどちらも同じですが、相対URL指定でファイルパスを指定する場合は記述が変わるので注意しましょう。

基本的にHTMLファイルとCSSファイルは完全に分割して管理するのが好ましく、HTML文書内にスタイルを記述するのは非推奨です。しかし1度しか記述しないようなその場限りのスタイルをCSSファイルで全て管理すべきかといえば一考の余地があります。

もし基本を外してでもHTMLファイル内にCSSを記述したい場合はstyleタグを使います。 HTML文書の中にstyleタグを埋め込めば、中に直接CSSを記述することができます。

styleタグはhead要素またはbody要素内に記述する事ができます。当然ですが適用させたい箇所よりも前に記述しなければなりません。

  
    /*HTML文書内でもstyleタグ内であればCSSを記述できる*/