CSSを外部ファイルに

	スタイルシートって便利。でも、ページが増えてくると大変そうです。
	そうね、「CSSで文字行間２」のページで直接HTMLにスタイルシートの設定を書き込んだけど、これだとページが多くなったりした時に変更するのが大変ね。でも大丈夫。外部ファイルでスタイルシートを設定すば問題ないわよ。
	外部ファイルですか？？
	そう。「CSSで文字行間２」のページで<head>～</head>の中にCSSの設定を書いたよね？あれをHTMLファイルの中じゃなくて、別のファイルに書いておくの。それを各HTMLファイルから呼び出せば同じようにスタイルシートが使えるってこと。
	別のファイルにすると何かいいことあるんですか？
	たとえば、自分のページ全部から一つの同じ外部ファイルを呼び出しておくでしょ。後になってスタイルシートで設定した文字サイズを変えたい時に、外部ファイルの中身を変えれば全部ページの文字サイズが変更できるの。
	つまり普通なら２０ページあれば２０ページ全部変更しないといけないのに、外部ファイルがあればそれを変更するだけでいいってことですね！
	そういうこと。さっそくやってみましょ。↓は「CSSで文字行間２」で<head>～<head>に書いたCSSね。これを新しく作ったファイルにコピーして保存する。これが外部ファイル。ファイル名は「style.css」で自分のホームページが入っているフォルダの一番上の階層に作るの。


    td { font-size: 11pt; line-height: 140%}
    .title { font-size: 12pt; color: #CC3333}

		「style.css」を作ったらメモ帳で開いて↑をコピーする。コピーできたら保存も忘れないでね。
		必ず、「style.css」って名前で自分のホームページのフォルダの1番上の階層に作らないといけないんですか？
		今回は説明がわかりやすいように、そうしてるだけ。ファイル名は拡張子が「*.css」なら何でもいいし、場所も自分のホームページがあるフォルダならどこでもいいわよ。

次に「style.css」のスタイルシート設定を適用したいhtmlファイルの<head>～</head>の中に↓のように入力するの。これで保存しておしまい。保存したらブラウザでスタイルシートが適用されてるか確認してね。

<head>
  <META http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" href="./style.css" type="text/css">
</head>

	うまくスタイルシートが適用されてない時は、「style.css」へのパスが間違ってないか確認すること。↑フォルダの写真のように「style.css」が同じ階層にある時は「./」のままで大丈夫。一つ上の階層に「style.css」がある時は「../」。二つ上の時は「../../」。一つ下の場合は「./フォルダ名/」。よくわからない人はパスの詳しい説明を見てね。
	できました～！これを全部のHTMLファイルに設定すればいいですね！
	うん。後は文字サイズを変えたいり新しいスタイルシートの設定を増やしたい時は「style.css」をイジればOK。
	ありがとう！さっそくやってみます。
	がんばってね。私も就職決まったし。
	おぉ！プロのWEBデザイナー？
	うん、時給６５０円だよ。

それは就職というよりアルバイトでは・・・。

	戻る
	Mail / レンタルサーバー：シーサイドネット