[12-1] CSSを外部ファイルにしよう

最終更新日:2017年09月19日  (初回投稿日: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が入ってるってすぐわかるから。

ファイルの構成は、下図のようになります。
cssと言う名のフォルダを作って style.css を格納

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

さあ、出来上がった外部CSSファイルを HTMLに読み込みましょう。

外部CSSファイルの読み込みには <link>要素を使います。

<link>要素
「href属性」で外部CSSファイルの場所(URL)を指定します。
「rel属性」には「stylesheet」と書いて、読み込むファイルの種類を指定します。
書く場所は <head>要素内です。

<head>
<link rel="stylesheet" href="css/style.css">
</head>

「href属性」「rel属性」が必須。これらは必ず書きます。

ほかに「type属性」というのもあって、外部ファイルのMIMEタイプを書きます。CSSは「type="text/css"」と書きますが、これは省略してもイイんだって。(もうrel属性でスタイルシートだって言ってるし)

<link>要素の詳細は、[42-1] link で外部CSSファイルの読み込み、グループ化をしよう をご覧ください。(ちょっと急にむずかしくなっちゃうので、今のところはまだ読まなくていいかもですが)

画像のパスを書き換えよう(CSSファイルからのパスに)

実は、このままではマズイことが1つあるんです!
このままでは、画像ファルが表示されません

前までは、HTMLファイルからの画像ファイルへのパスでしたが、今回は CSSファイルからの画像ファイルへのパスになったので、パスが異なるんですよ。
外部CSSファイルを「css」フォルダに入れたから

パスがどう変わったか、わかりやすいように図にしてみました。
HTMLファイルから画像までのパス、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ファイルの冒頭に下記のように書いているのを見かけます。

@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の中で「コメント文」や「フォントファミリーの名前(「MS Pゴシック」や「ヒラギノ角ゴ」とか)」で日本語を使うことがあります。なので「ASCII」での保存ができない場合も多いですね。
日本語が表示できる文字コードは「UTF-8」のほかに「Shift_JIS」があります。(他にちょっと古いけど「JIS(ISO-2022-JP)」「EUC-JP」もあります)

HTMLファイルのとは違う文字コード(しかも ASCII じゃない)で CSSファイルを作った場合のみ、文字エンコードを宣言する必要があるということです。
なので、今まで [1] 〜 [12] の流れで作ってきた場合は、外部CSSファイルに「@charset "文字コード名";」は不要ということになります。

ただ、古いブラウザ(ネスケ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

今回のサンプルをダウンロード

今回のファイルセットをダウンロードできるようにしました。

一応 CSSファイルの冒頭に @charset "UTF-8"; を入れてます。(小心者か...笑!)
試しにこの @charset "UTF-8"; をコメントアウトしてブラウザで表示してみてください。
たいがいのブラウザなら普通に表示するはず。古めの IE はダメかもしれませんが。

↓クリックでダウンロード用のページが別ウィンドウで開きます。
サンプル ダウンロードページへ

次回予告

いかがでしたか?
HTMLの話から CSS がやたら出てくるようになって「なんで?」って思ってるかもしれませんね。

というわけで次回は「なんでHTML文書とCSS文書はセットじゃなきゃならないか?」について、このへんで一度まとめておきたいと思います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

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ですか、、、だいぶ上級編ということですね。
今行ってみたのですがちょっとわかんなかったので、地道に学んでいこうと思いました、、、

頑張ります!!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.