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

2017/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)

△上に戻る