CSSを記述する場所 (外部CSS,内部CSS,インラインCSS)

nas2017/05/02

目次

・１．外部CSS (外部のファイルにCSSを記述)

・２．内部CSS (HTML内部にCSSを記述)

・３．インラインCSS (タグ内にCSSを記述)

・(参考)CSSファイルが別のCSSファイルを読み込む(@import)

１．外部CSS (外部のファイルにCSSを記述)

  <head>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <p class="t1">テスト1</p>
    <p class="t2">テスト2</p>
  </body>

2行目は、外部のCSSファイル(style.css)を指定しています。

特徴

  • CSSを.cssファイルに分離する
  • 複数のページで同じデザインを使い回せる
  • キャッシュが効く→高速
  • デザインとHTMLの責務分離ができる
  • 管理がしやすく、現在のWeb制作では最も一般的な方法
  • linkタグは、head部に記述

外部ファイル

上記コードの2行目で指定した、sytle.cssファイルです。

@charset "UTF-8";
.t1{ 
    color:blue; 
}
.t2{ 
    background-color:Lavender;
}

1行目の@charasetは、ファイルの文字コードを指定しています。

２．内部CSS (HTML内部にCSSを記述)

  <head>
    <style>
      .t3 {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="t3">テスト3</p>
  </body>

2～6行目は、styleタグで囲い、その中にCSSを記述しています。

  • CSSは、そのhtmlだけに適用されます。
  • 1つのファイルで完結するので、小さなテストや特定のページだけに適用したい時に便利。
  • コードが長くなるとHTMLが見づらくなる。
  • styleタグは、head部に記述

３．インラインCSS (タグ内にCSSを記述)

  <body>
    <p style="background-color: PaleGreen">テスト7</p>
  </body>

2行目は、p要素の中にstyleタグを追加してCSSを記述しています。

  • その要素にだけ適用される
  • CSSの優先順位が高い
  • 再利用・保守性が悪い
  • 通常のWeb制作では非推奨

(参考)CSSファイルが別のCSSファイルを読み込む(@import)

@importで他のCSSファイルをインポートできます。

以下は、sytle1.cssの2行目で、sytle2.cssを読み込んでいます。

読み込み元のファイル(sytle1.css)

@charset "UTF-8";
@import url("./style2.css");
.p1 {
  background: yellow;
}

読み込み先のファイル(sytle2.css)

@charset "UTF-8";
.p1 {
  color: red;
}

関連の記事

CSS セレクタの優先順位 (!important)
CSS 継承とは (inherit)

△上に戻る