[12-1] CSSを外部ファイルにしよう
最終更新日：2022年08月26日 （初回投稿日：2011年03月08日）
今回は、CSSを外部ファイルにしてみましょう。
前回（ [11-6] ）の HTMLファイルの中に書いたCSSを コピペして、新しい CSSファイルを作り、それを HTMLファイルに読み込ませます。
前回までは、CSSを HTML内の <head>要素の中に書いていました。
これは、初心者のかた向けに、CSSの説明を簡単にするためでした。
が、毎回しつこく言ってましたが、CSSは 外部CSSファイルにしてHTMLに読み込ませるのが一般的です。
なんで外部ファイルにするの？
ずばり ラクだから。
HTMLの<head>内に書いたらダメなわけじゃないです。
でもそれだとめっちゃ効率が悪い。
各HTMLファイルにCSSを書いていると、CSSを修正したいとき、複数のHTMLをぜ〜んぶ直すハメになります。
外部ファイルにしておけば、1つのCSSファイルを直せば、全部のHTMLファイルに反映されるのでラク。効率がいいんです。
CSSを書く場所は、
1. <style>要素で HTMLの <head>内に直接書く
2. <style>要素で HTMLの <body>内に直接書く
3. 外部CSSファイルにして<head>内に<link>要素で読み込む
4. 各要素にインラインで書く
の4つの方法があります。
この中の 3. 外部CSSファイルにして<head>内に<link>要素で読み込む が最も効率がよく、一般的に使われているので、今日はコレをやってみよう。
上記の方法について詳しくは、「はじめてのCSS」カテゴリーの
【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について） をご覧ください。
CSSファイルを作ろう
前回（[11-6] ）のHTMLファイルから CSSを取り出して「独立したファイル」にします。
CSSファイルを作るのはとても簡単です。
前回の「index.html」と「second.html」の <head> に書いていたCSSをコピーして、テキストエディタで新規ファイルを作ってペーストするだけです。
その場合、CSSを囲んでいた <style>と </style>は不要です。
この内側に記述したCSSの指定部分だけを新規ファイルにコピペします。
index.html と second.html のCSSで、共通する指定は1つにまとめます。
片方にしか関係ない指定は、それぞれコピペして1ファイルにまとめます。
CSSのコメント（HTMLの書き方とは違います）
CSSファイルにもコメントを書けますが、
HTMLのコメントと違う記号
「/*」と「*/」で囲みます。
「 * 」はアスタリスク。乗算で使う記号です。「/ 」 はスラッシュね。
/* ここがCSSのコメント */
div {
color: #666666;
}
拡張子「.css」をつけて保存します
もうわかってると思いますが、CSSファイルの拡張子は「.css」です。
ファイル名は任意。好きな名前を付けて、最後に「.css」の拡張子をつけて保存しましょう。
ここでは「style.css」にしました。
テキストエンコーディングを指定して保存しよう
保存時のファイル形式は、 単なるテキストファイルで。
リッチテキストなどで保存しないでください。HTMLファイルのときと同じです。
保存する時の テキストエンコーディング（いわゆる「文字コード」）は UTF-8 にしましょう。 HTMLファイルのと同じにします。
テキストエディタによっては UTF-8 は「BOMあり」「BOM無し」を選択できる場合がありますが、「BOM無し」にしておこう。「BOM無し」は「UTF-8N」という表現もあります。
これも HTMLの時と同じです。
「BOM」とは Byte Order Mark（バイトオーダーマーク）の略で「Unicode」特有の仕組み。
「Unicode」には「UTF-16」「UTF-32」もあり、これらは複数の種類があるので「BOM」で区別するんだそうです。
「UTF-8」には複数の種類は無いので「BOM」は無くて良いそうです。（付ければ、コンピュータに「これは UTF-8 で書かれています」と伝えるんだって）
WordPress では「BOMなし」限定（PHP で不具合が出るなどがあってか）ですし、やはり UTF-8 は「BOM」は付けないほうが良い と思います。
「css」という名前のフォルダを作って保存しよう
保存場所は「css」という名前のフォルダを作り、その中に保存します。
フォルダに入れるのは、CSSファイルが複数になったとき、ひとまとめにしておくと探しやすくて便利だから。
フォルダ名を「css」にするのは、ほかの人が編集する場合でも「css」と言う名前のフォルダなら、その中に CSSが入ってるってすぐわかるから。
ファイルの構成は、下図のようになります。
HTML上で外部CSSファイルを読み込む
さあ、出来上がった外部CSSファイルを HTMLに読み込みましょう。
外部CSSファイルの読み込みには <link>要素を使います。
<link>要素の
「href属性」で外部CSSファイルの場所（URL）を指定します。
「rel属性」には「stylesheet」と書いて、読み込むファイルの種類を指定します。
書く場所は <head>要素内です。
<head>
<link rel="stylesheet" href="css/style.css">
</head>
上のソースでは、相対パスにしていますが、もちろん絶対パスでもなんでもOK。
「href属性」と「rel属性」が必須。これらは必ず書きます。
ほかに「type属性」というのもあって、外部ファイルのMIMEタイプを書きます。CSSは「type="text/css"」と書きますが、これは省略してもイイんだって。（もうrel属性でスタイルシートだって言ってるし）
<link>要素の詳細は、[42-1] link で外部CSSファイルの読み込み、グループ化をしよう をご覧ください。（ちょっと急にむずかしくなっちゃうので、今のところはまだ読まなくていいかもですが）
画像のパスを書き換えよう（CSSファイルからのパスに）
実は、このままではマズイことが１つあるんです！
このままでは、画像ファルが表示されません。
前までは、HTMLファイルからの画像ファイルへのパスでしたが、今回は CSSファイルからの画像ファイルへのパスになったので、パスが異なるんですよ。
外部CSSファイルを「css」フォルダに入れたから。
パスがどう変わったか、わかりやすいように図にしてみました。
今回作ったCSSファイルは「css」というディレクトリにいるので、画像ファイルは、一度そのディレクトリから出たディレクトリ（ ../ ）からの 「imageディレクトリ」の中というわけです。
ですので、コピペした記述のなかの 画像ファイルの部分は すべて「../」を頭につけます。
テキストエディタの「検索→置換」でたぶん一発でできるはず。
（「image/」というテキストで検索し、出てきたのを全部「../image/」で置換するとか）
ここでは「相対パス」を使っているので、このようなパスの書き換えが必要なんですが、
「絶対パス」で書いていたなら、この書き換えは不要です。
「相対パス」「絶対パス」については、
[10] 絶対URL と 相対URL（絶対パス と 相対パス）を参考にしてください。
HTMLに書いていたCSSは忘れずに削除しよう
HTMLファイルに直接書いていた CSSの記述（<head>内の <style> 〜 </style> ）は、必ず削除しましょう。
CSSは、後で記述したものが優先されます。
同じ<head> 内に書く今回の「外部CSSの読み込みの記述」を <style>要素の前に書いたら、いくら外部CSSファイルを直してもブラウザビューで反映されない...なんてことになります。
あとで混乱しないためにも、重複した記述は削除しておこう。
不要な記述は削除した方がファイルが軽くなるし。
さあこれで完成です。CSSを外部ファイルにする事ができました。
ブラウザでプレビューして、CSSが効いているか確認してください。
CSSの優先順位に関しては、
【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）
に詳しく書いておきました。
CSSを外部ファイルにして <link>要素で読み込む方法は、
【2】CSSはどうやって使うの？（基本構造とCSSを置く場所について）にも詳細があります。
@charsetで文字エンコードを宣言（省略可の場合も）
よく 外部CSSファイルの冒頭に下記のように書いているのを見かけます。
（下記は文字エンコードが UTF-8 の場合）
@charset "UTF-8";
これは このCSSファイルの「文字エンコード」を宣言しています。
これが必要か（不要なんじゃないか）という思いがあり、調べてみました。
結論は「HTMLもCSSも UTF-8 で保存していて、HTML側で文字コードの宣言をしていたら、CSS側では不要」だそうです。
参考：Declaring character encodings in CSS | W3C Internationalization
上の資料によると、
「外部CSSファイル上のテキストに「ASCII（アスキー）」以外の文字がある場合は、コンピュータに文字コードを教えて上げる必要がある。
ただし、HTMLファイルと CSSファイルが、共に「UTF-8」で保存されていて、HTMLファイルでその文字エンコードを宣言していたら、CSSファイルのほうの文字コード宣言は不要」とのことでした。
「ASCII（アスキー）」とは、この世でいちばん最初にできた文字コード。「アルファベット、数字、記号、スペースなど」の128文字しかありません。当然日本語は無理。
CSSの中で「コメント文」や「フォントファミリーの名前（「ＭＳ Ｐゴシック」や「ヒラギノ角ゴ」とか）」で日本語を使うことがあります。なので「ASCII」での保存ができない場合も多いですね。
日本語が表示できる文字コードは「UTF-8」のほかに「Shift_JIS」があります。（他にちょっと古いけど「JIS（ISO-2022-JP）」「EUC-JP」もあります）
HTMLファイルのとは違う文字コード（しかも ASCII じゃない）で CSSファイルを作った場合のみ、文字エンコードを宣言する必要があるということです。
ただ、古いブラウザ（ネスケ6とか）は、この文字コード宣言をしないとエラーになったり、ちょっと古めの IE も、コレがないとエラーが起こるようなので、この宣言をするのが慣習化してます。
Dreamweaver で新規CSSファイルを作ると、冒頭に「@charset "UTF-8";」と書かれてるので、私もあえて削除しないでそのまま使ってますし（笑）
HTML も CSS も UTF-8 で保存し、HTML側で <meta charset="UTF-8"> とも書いたけど、CSS側でも @charset "UTF-8"; って書いたって間違いじゃないし。それで安心するなら書いていいんです。
HTMLファイルと違う文字コードで保存したなら必ず書くべき。そこを覚えておけば大丈夫です。
テキストエンコーディング（文字コード）については、
[45-2] <meta charset=" ">の設定で文字コードを指定しよう
（ちょっとメモ）文字コード、文字集合、エンコードについて（1）
（ちょっとメモ）文字コード、文字集合、エンコードについて（2）
で詳しく説明しています。興味のあるかたはご覧ください。
@charsetを書くなら必ず冒頭に
外部CSSファイルの冒頭に @charset "文字コード名"; を書く場合の注意点です。
これより前にコメントとか他のものがあってはダメ。必ず冒頭に書きます。
そして必ず CSSファイル保存時の文字コードを書くこと。違ってたら意味ないw
次回予告
いかがでしたか？
HTMLの話から CSS がやたら出てくるようになって「なんで？」って思ってるかもしれませんね。
というわけで次回は「なんでHTML文書とCSS文書はセットじゃなきゃならないか？」について、このへんで一度まとめておきたいと思います。
- 関連記事
-
- [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）
- [14-2] 画像形式について（GIF、JPEG、PNG の違い）
- [14-1] ブラウザでソースを表示する
- [13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)
- [13-2] サイトの背景に画像を表示しよう（CSS使用）
- [13-1] サイトの背景に色をつけてみよう（CSS使用）
- [12-2] なんでHTMLとCSSはセットなの？
- [12-1] CSSを外部ファイルにしよう
- [11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）
- [11-5] 画像にリンクを貼ろう
- [11-4] 別のページの特定の箇所にリンクしよう
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう（CSS使用）
- [11-1] 他のページにリンクしよう
- （ちょっとメモ）index.html という名のファイル
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
質問があるのですが、
[6] テキストに段落＜p＞を作ってみようhttp://honttoni.blog74.fc2.com/blog-entry-14.html
の中でリンクを貼って紹介していた
[1]外部CSSの読み込みhttp://www.ne.jp/asahi/hatakeyama/design/csslayout/2column/2col1.html
を読んで、
<link rel="stylesheet" href="../css/style_import.css" type="text/css">
という指示を使ってCSSファイルを読みにいくようにさせてたのですが、
今回の説明の中では
<link href="css/common.css" rel="stylesheet" type="text/css" media="all">
という指示が使われていました。
relとhrefの記述が違うようなのですが、どんな効果の違いがあるのか教えていただけると嬉しいです。
まだHTMLを勉強し始めたばかりなので、基礎的すぎる質問かもしれないのですが、よろしくお願いします。
Re: No title
外部CSSファイルをHTMLファイルに読み込むには、link要素を使いますが、
link要素には「href属性」「rel属性」があり、この2つはどっちを先に書いてもいい（順番は決まってない）ので、link要素の冒頭が「link rel」となったり「link href」になったりします。
「link」は要素。
「href属性」はHypertext Referenceの略で、その属性でリンクさせるファイルの場所（URL）を指定します。
「rel属性」はHTMLと外部ファイルの関係（relation）を指定する属性で、CSSなら「stylesheet」というキーワードを書きます。
link要素については、
[42-1] link で外部CSSファイルの読み込み、グループ化をしよう
http://honttoni.blog74.fc2.com/blog-entry-116.html
以降に詳しく書いていますので、読んでみてください。
No title
42-1ですか、、、だいぶ上級編ということですね。
今行ってみたのですがちょっとわかんなかったので、地道に学んでいこうと思いました、、、
頑張ります！！
