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

前回([11-6] ボタン画像をロールオーバ時に変化させてみよう)までは、
HTML文書内の<head>内にCSSを書く方法を使っていました。

ですが、CSSは「独立した外部CSSファイル」にしてHTMLに読み込ませるほうが便利!

この方法なら、CSSを修正したいときに、各HTMLを全部直すハメにならず、CSSファイルを修正するだけでOK。 (1つのCSSファイルを、複数のHTMLファイルに読み込ませるので)

今回は、前回([11-6] ボタン画像をロールオーバ時に変化させてみよう)で使用した
aaa.html と bbb.html の、それぞれの<head>に書いたCSSを「独立したファイル」にします。
その後、そのファイルを各HTMLファイルに読込ませます。

今回のサンプルも圧縮(ZIPファイルに)してあります。
ダウンロードは、コチラから(ダウンロード用のページが別ウィンドウで開きます)
★別ウィンドウで開きたくない方は、コチラから

ダウンロードしたフォルダの中はこのようになっています。
CSSを外部ファイルにしたときのディレクトリ構造
common.css」が外部ファイルにしたCSSファイルです。
「css」という名前のフォルダ(ディレクトリ)を作って入れておきます。
(このように「CSSファイルはcssフォルダ、画像はimageフォルダに入れる」と決めておくと、後で探しやすくて便利です。)

CSSファイルを作ろう

CSSファイルを作るのはとても簡単です。
aaa.html と bbb.html の <head> に書いていたCSSをコピーして、
テキストエディタで新規ファイルを開きペーストするだけです。

その場合、CSSを囲んでいた <style></style>は不要です。
この内側に記述したCSSの指定部分だけを新規ファイルにコピペします。
aaa.html と bbb.html のCSSで、共通する指定を1つにまとめるというわけ。

CSSにもコメントを書けます(HTMLの書き方とは違います)

CSSファイルにもコメントを書けますが、
HTMLのコメントと違う記号 「/*」と「*/」で囲みます。
「 * 」はアスタリスク。乗算で使う記号です。( / はおなじみのスラッシュ。)
下記は、今回使用の「common.css」の冒頭部分です。

/* ここがCSSのコメント */
div {
color: #666666;
width: 500px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}

拡張子「.css」をつけて保存します

もうわかってると思いますが、CSSファイルの拡張子は「.css」です。
ファイル名は任意。好きな名前を付けて、最後に「.css」の拡張子をつけて保存しましょう。

保存場所は「css」という名前のフォルダを作り、その中に保存すると、後で探しやすくて便利。

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

では、出来上がった外部CSSファイルを、HTMLに読み込みましょう。
下記のように <link>要素を使います。
<link>要素の「href属性」で外部CSSファイルの場所(URL)を指定します。
下記の例では相対URLにしていますが、絶対URLでもOK。

<head>
<link href="css/common.css" rel="stylesheet" type="text/css" media="all">
</head>

<link>要素には、「href属性」のほかに「rel属性」もあり、この2つの属性は必須です。
上の例では「type属性」「media属性」も使っています。

<link>要素については、
[42-1] link で外部CSSファイルの読み込み、グループ化をしよう で詳しく書いています。
(ちょっと急にむずかしくなっちゃうけど、興味のある方は読んでみてください)

HTMLに書いていたCSSは忘れずに削除しよう

HTMLファイルに直接書いていたCSSの記述(<head>内の<style>〜</style>の中身)は、必ず削除しましょう。
CSSは、後で記述したものが優先されます。
同じ<head> 内に書く今回の外部CSSの読み込みの記述が「後」なら別にOKなんですが、<style>要素の前に書いたら、いくら外部CSSファイルを直してもブラウザビューで反映されない...なんてことになります。
あとで混乱しないためにも、重複した記述は削除しておこう。不要な記述は削除した方がファイルが軽くなるし。

CSSは、Cascading Style Sheets(カスケーディング スタイル シート)の略。
CSSに関してはこのサイトの【1】CSSってどんなもの? カスケーディングって何? 以降に詳しく書いています。
CSSを外部ファイルにして<head>内に<link>要素で読み込む方法は、【2】CSSはどうやって使うの?(基本構造とCSSを置く場所について)にも詳細がありますので、ご興味ある方はそちらも読んでみてください。

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

実は、このままではマズイことが1つあるんです!
HTMLの中にCSSを書いていた時の「画像ファイル」までパス(URL)と、
外部CSSファイルからのパスが異なるんですよ。このままでは、画像ファルが表示されません。
パスがどう変わったか、わかりやすいように図にしてみましたよ。

相対URLが違う

どうでしょ? わかりましたよね。
今回作ったCSSファイルは、HTMLファイルのある第一階層でなく「css」というディレクトリにいるので、一度そのディレクトリから出た( ../ )、第一階層から image ディレクトリを指定する、というわけです。

ここでは「相対パス」を使っているので、このようなパスの書き換えが必要なんですが、
「絶対パス」で書いていたなら、書き換えは不要です。

★「相対パス」「絶対パス」については [10] 絶対URL と 相対URL(絶対パス と 相対パス)を参考にしてください。

では、CSSファイルからの正しいパスに書き換えましょう。

p#goto-profile a {	
background: url(../image/11-5_btn2.gif) no-repeat left top;
width: 140px;
height: 36px;
display: block;
color: #FFFFFF;
font-size: 15px;
line-height: 36px;
text-align: center;
}

さあこれで完成です。CSSを外部ファイルにする事ができました。
ここまでをプレビューして確認してください。

外部CSSファイルは、複数作ってHTMLに読込ませてもかまいません。
複数のCSSファイルを「@import」で1つに束ねてからHTMLに読込ませる方法もあります。
こちらは【2】CSSはどうやって使うの?(基本構造とCSSを置く場所について)をご覧ください。

いかがでしたか?

さて、HTMLから離れたついでに、
次回は「なんで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
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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