外部ファイル化

CSSの外部ファイル化

外部ファイル化のメリット

コードの再利用性

外部 CSS ファイルを使用することで、複数の HTML ページで同じスタイルを適用できます。これにより、スタイルの一貫性を保ちながら、コードの再利用が容易になります。

メンテナンスの容易さ

スタイルを一箇所にまとめることで、メンテナンスが容易になります。スタイルの変更が必要な場合、外部 CSS ファイルを修正するだけで、すべての関連する HTML ページに変更が反映されます。

HTML コードの可読性向上

スタイルを外部ファイルに分離することで、HTML コードがシンプルで読みやすくなります。これにより、HTML ファイルの可読性が向上し、開発者がコードを理解しやすくなります。

手段

html の Head タグの子要素の link タグを使用します。

<head>
  <meta charset="UTF-8" />
  <title>Example Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>

例

以下の html ファイルの style 要素内を外部ファイルにします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Example Page</title>
    <style>
      body {
        font-family: "メイリオ", "MS Pゴシック", sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>こんにちは</h1>
  </body>
</html>

元の html ファイルは次のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Example Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>こんにちは</h1>
  </body>
</html>

この例では、CSS 部分を同一フォルダ階層の style.css というファイルに次のように記載しています。

@charset "utf-8";
/* フォントの初期設定 */
body {
  font-family: "メイリオ", "MS Pゴシック", sans-serif;
}

外部 CSS ファイルを使用する場合は、@charset “utf-8”;を最初の行に記述することが推奨されます。これは、外部 CSS ファイルが独立したファイルであり、エンコーディングを明示する必要があるためです。CSS を style タグ内に記載する場合、通常は@charset “utf-8”;の宣言は不要です。これは、HTML ドキュメント自体がすでに UTF-8 エンコーディングを指定しているためです。