CSSの外部ファイル化

ちょっと復習

師匠

前回やったことをちょっと復習するで。

師匠

前回、デザイン的な情報( CSS )を<style>要素に抜き出して集めることをやったな。

師匠

<style>の情報は、コンテンツ(<body>、本文)の見た目を変えるために、存在する。

デザインの情報を、ファイルの外に出す

師匠

ここから 更に、デザイン と コンテンツ の分離を進める。

師匠

普通、複数のページが まとまって、1つのサイトを作っている。
で、そのデザインは共通している。

師匠

このサイト( http://jp.fromkato.com/ )でも、みんな同じデザインをしている。

師匠

そのデザインの情報は、個々のページで持っているわけではない。
1つのファイルの中で設定して、個々のページは、そのファイルの情報を取っているわけや。

師匠

下のコードを 「 page1.html 」で保存する。

<h3>第1章 出会い</h3>

<p>ある天気の良い日であった。(後略)</p>

第1章 出会い

ある天気の良い日であった。(後略)

師匠

下のコードを 「 page2.html 」で保存する。

<h3>第2章 再会</h3>

<p>ある雨の日のこと、(後略)</p>

第2章 再会

ある雨の日のこと、(後略)

師匠

で、両方のページ(ファイル)で、<h3>の文字色を赤(red)にしたい場合、下みたいな<style>要素を、両方のファイルに書く。

<style>

h3 {
	color:		red;
}

</style>
師匠

これが2ファイルだから良いが、100ページだと、100ファイル直すことになるな。

師匠

よって、HTMLファイルの外に出して、共通で使う方が良い。

手順

師匠

まず、テキストエディタを開く。

師匠

CSSの設定を書く。
今は、<h3>要素の文字色(color)を赤(red)にするから、下でいいな。
ただし、<style>タグは書かない。

h3 {
	color:		red;
}
師匠

こんな感じな。

師匠

ファイル名前を付けて保存で保存する。
名前は、なんでもええ。
拡張子は、.css
ここでは、「 test.css 」にしとく。

師匠

これを、「 page1.html 」、「 page2.html 」と同じフォルダに置く。

師匠

次、「 page1.html 」をテキストエディタで開く。

師匠

下のように、なってるなー?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>
</head>
<body>

<h3>第1章 出会い</h3>

<p>ある天気の良い日であった。(後略)</p>

</body>
</html>
師匠

そこに、ハイライトされているコードを追加する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>

<link rel="stylesheet" href="test.css">

</head>
<body>

<h3>第1章 出会い</h3>

<p>ある天気の良い日であった。(後略)</p>

</body>
</html>
師匠

場所は、</style></head>の間な。

師匠

すると、赤に変わったな。

師匠

同じように「 page2.html 」も変更してみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body *:not(br) {
	margin:  10px;
	padding: 10px;
	border:  1px dotted gray;
}
</style>

<link rel="stylesheet" href="test.css">

</head>
<body>

<h3>第2章 再会</h3>

<p>ある雨の日のこと、(後略)</p>

</body>
</html>
師匠

実行すると、こっちも赤に変わったな。

師匠

最後に「 test.css 」を開いて、下のコードに書き換えてみる。

h3 {
	color:		white;
	background:	#3b5897;
	text-shadow:	1px 1px 3px #222;
	box-shadow:	1px 1px 7px gray;
	text-align:	center;
	font-size:	x-large;
}
師匠

そうすると、下の図みたいに両方のページの見た目が変わるやろ。

ちょっと解説

師匠

<link rel="stylesheet" href="test.css"> で使っているのは、<link>要素や。
<link>要素自体については別にやるけど、外部ファイルを参照するために使う。

師匠

<link>要素の rel 属性は、そのファイルのタイプを指定する。
今は、CSSの「 stylesheet 」を指定。
href 属性には、ファイルのパスを指定する。

復習

  • <link rel="stylesheet" href=" (CSSファイルのパス) ">