CSSを別ファイルに書いて読み込む

By | 2016年10月11日

今までCSSは、HTMLを書いたファイル(〜.html)の中に書いていました。

しかし、CSSの記述が増えてくると、HTMLファイルが長くなって編集しづらくなったり、似たデザインの別のHTMLに同じCSSを何度も書かなければいけなくなったりと不都合が出て来る場合があります。

今回は、CSSをHTMLソースから切り離して外部ファイルとして保存して、それを読み込む方法を解説します。

CSSを書いたファイル .css

CSSだけを書いたファイルの拡張子は .css とします。

そして、ファイルの先頭行に文字コードの指定をしておくことが推奨されます。これは、意図しない文字コードで解釈されて文字化けが起こることなどを防ぐためです。

例えば、以下のように書きます。

example.css

@charset "UTF-8";

h1 {
  font-size: 32px;
  color: red;
}

文字コードの指定方法は以下の通りです。

@charset 文字コード名;

文字コードは基本的に UTF-8 を使います。

CSSファイルをHTMLで読み込む

このCSSをHTML側で読み込むには linkタグ を使います。linkタグのhref属性に読み込むCSSファイルのパスを指定します。

また、linkタグはheadタグ内に書く必要があります。使用例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSを外部ファイルにする</title>
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <h1>CSSを外部ファイルにするテスト</h1>
  <p>文章です</p>
</body>
</html>

これで、example.css が適用され、見出しが大きな赤い文字になります。

外部からCSSを読み込むサンプルの実行例

これで、外部ファイルにしたCSSファイルを読み込むことができました。

CSSの外部ファイル化は、同じCSSを他のHTMLにも使いたいという場合に便利です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です