<style> スタイル

(復習)方法1: 同じファイル内の、style要素内に指定する

師匠

とりあえず、下のコードの色を変えるで。

<h3>見出し1</h3>

<h3>見出し2</h3>

<h3>見出し3</h3>

見出し1

見出し2

見出し3

師匠

style 属性を使った色の変更 (前のページでやったな

<h3 style="color: red; background: pink;">見出し1</h3>

<h3 style="color: red; background: pink;">見出し2</h3>

<h3 style="color: red; background: pink;">見出し3</h3>

見出し1

見出し2

見出し3

師匠

これやと、全部の<h3>要素の style 属性を変更するから、面倒くさい。

方法2: 同じファイル内の、style要素内に指定する

師匠

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>




</body>
</html>
師匠

で、今、<body>要素内に、3組の<h3>要素を書いたところや。

<!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>

<h3>見出し2</h3>

<h3>見出し3</h3>

</body>
</html>
師匠

ここに、<style>要素というのが、既に書いてある。

<!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>

<h3>見出し2</h3>

<h3>見出し3</h3>

</body>
</html>
師匠

これは説明のための補助境界線を引くために付けたものや。
ここで、説明したで。

師匠

この補助境界線はCSSで付けているので、既に<style>が書いてあるわけや。
ここに、見出しに色を付ける設定を追加する。

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

h3 {
	color:		red;
	background:	pink;
}

</style>
</head>
<body>

<h3>見出し1</h3>

<h3>見出し2</h3>

<h3>見出し3</h3>

</body>
</html>
師匠

上のコードを保存して実行すると、下の図みたいになったな。 ( 実行結果

師匠

style 属性と違って、1カ所だけ書いて、3つの<h3>が全て変更された。
複数個所に同じ設定を行う場合は、こっちの方が楽やな。

解説

師匠

まず、<style>要素は、<head>要素の子要素や。
<head>要素については、ここで説明した。

師匠

<style>要素の中には、CSSを書く。

師匠

まず、今の目的を明確にするで。
目的は、
<h3>要素の、文字をに、背景色をピンクにする 」
ということやな。

師匠

まず、対象が<h3>やから、 h3 と書いて、その後ろに {   } を加える。

<style>

h3 {		}

</style>
師匠

前のページでやったように、
文字(color)を赤(red)にする設定は color: red;
文字(background)をピンク(pink)にする設定は background: pink;
やから、それを {   } の中に書く。

<style>

h3 { color: red; background: pink; }

</style>
師匠

読みやすいように改行する。

<style>

h3 {
	color:		red;
	background:	pink;
}

</style>
師匠

これで完了や。

師匠

なお、設定する項目(color, backgroundなど)の後ろには、 : (コロン)、
設定値(red, pinkなど)の後ろには、 ; (セミコロン)を付けること。

師匠

今、言ったことを図にすると、こんな感じ。

弟子

なんか、、複雑ですね。

師匠

たくさん読んだり書いたりしている内に慣れる。

練習問題

師匠

前のページ で書いたコードを、もう一回使うで。

<h3>見出し1</h3>

<p><strong></strong></p>

<h3>見出し2</h3>

<p>本文</p>

<table>
	<tr>
		<td>愛知県</td>
		<td>名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

見出し1

見出し2

本文

愛知県 名古屋市
石川県 金沢
師匠

<body>以上も含めたコードは、下や。

<!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><strong></strong></p>

<h3>見出し2</h3>

<p>本文</p>

<table>
	<tr>
		<td>愛知県</td>
		<td>名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

</body>
</html>
師匠

このコードから、
<p>要素の 文字色を緑(green)、背景色を黄色(yellow)
ついでに、<strong>要素の 文字色を赤(red)
に変更してみ。

弟子

えっとー、これで良いですか?

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

p {
	color:		green;
	background:	yellow;
}

strong {
	color:		red;
}

</style>
</head>
<body>

<h3>見出し1</h3>

<p><strong></strong></p>

<h3>見出し2</h3>

<p>本文</p>

<table>
	<tr>
		<td>愛知県</td>
		<td>名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

</body>
</html>
師匠

そうや。
上出来や。( 実行結果

師匠

上のコードを見てみ。
本文である<body>要素の中には、何もデザインに関する情報が入ってないな。
デザインの情報は<head>要素の中に移動された。

師匠

本文 と デザイン が分離されていなかった、暗黒時代ってのを説明したけど、
コンテンツ(本文)と デザインの分離は、と~っても大事。

師匠

よって、 style 属性を使うよりも、この<style>要素で定義した方が良い。

師匠

ただし、 style 属性も「ワンポイント」、つまり、そこだけで使う場合には便利だから、覚えておいた方が良い。

師匠

次は、方法3。 CSSファイルを外部ファイルにするで~!

弟子

???

復習

  • <head>要素の中に、<style>要素を書く。
  • <style>要素の中に、CSSの設定を書く。
  • CSSの形式は、 (対象) { (設定項目) : (設定値) ; } が基本。