Table of Contents
今までCSSは、HTMLを書いたファイル（〜.html）の中に書いていました。
しかし、CSSの記述が増えてくると、HTMLファイルが長くなって編集しづらくなったり、似たデザインの別のHTMLに同じCSSを何度も書かなければいけなくなったりと不都合が出て来る場合があります。
今回は、CSSをHTMLソースから切り離して外部ファイルとして保存して、それを読み込む方法を解説します。
CSSを書いたファイル .css
CSSだけを書いたファイルの拡張子は .css とします。
そして、ファイルの先頭行に文字コードの指定をしておくことが推奨されます。これは、意図しない文字コードで解釈されて文字化けが起こることなどを防ぐためです。
例えば、以下のように書きます。
example.css
1 2 3 4 5 6 | @charset "UTF-8";h1 { font-size: 32px; color: red;} |
文字コードの指定方法は以下の通りです。
1 | @charset 文字コード名; |
文字コードは基本的に UTF-8 を使います。
CSSファイルをHTMLで読み込む
このCSSをHTML側で読み込むには linkタグ を使います。linkタグのhref属性に読み込むCSSファイルのパスを指定します。
また、linkタグはheadタグ内に書く必要があります。使用例を見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | <!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を他のHTMLにも使いたいという場合に便利です。