style属性

HTMLに服を着せてみる

師匠

まず、 裸のHTML を作る。

<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

本文

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

なお、CSSの書き方は、下の3パターンある。

  1. 要素内の style 属性に指定する
  2. 同じファイル内の、<style>要素内に指定する
  3. 別のCSSファイルを作って読み込む
師匠

いまから、それを順番にやるけど、3.のパターンが一番使われる方法や。
でも、複雑なページを作るには、1. や 2. も使う。
よって、全部 理解するように。

方法1: 要素内の style属性 に指定する

師匠

とりあえず、「見出し1」の文字をにする。

<h3 style="color: red;">見出し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

本文

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

<h3>見出し1</h3>
<h3 style="color: red;">見出し1</h3>
に換えただけや。

師匠

<h3>の開始タグに指定するのは、 style 属性。
color: red; っていうのは、「色をにしろ」って指定しているわけや。

弟子

じゃ、色をにするには、color: green;ですか?

師匠

そうや。
「名古屋市」の文字をにしてみるで。

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

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

<h3>見出し2</h3>

<p>本文</p>

<table>
	<tr>
		<td>愛知県</td>
		<td style="color: green;">名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

見出し1

見出し2

本文

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

ちょっと難しいが、<table>要素に style="color: blue;" を指定したらどうなると思う?

弟子

わからないんで、やってみます。
は「 blue 」だから。。。

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

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

<h3>見出し2</h3>

<p>本文</p>

<table style="color: blue;">
	<tr>
		<td>愛知県</td>
		<td style="color: green;">名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

見出し1

見出し2

本文

愛知県 名古屋市
石川県 金沢
弟子

「名古屋市」以外の テーブル内の文字が、になった!

師匠

そうやな。
<table>要素で文字の色をに指定したから、テーブル全体の文字がになったんや。
でも、その中の名古屋のセル(<td>)の文字の色をに指定してあったから、そこだけなんや。

師匠

次、「見出し2」をにする。

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

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

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

<p>本文</p>

<table style="color: blue;">
	<tr>
		<td>愛知県</td>
		<td style="color: green;">名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

見出し1

見出し2

本文

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

文字の色を変えるのは、colorやったな。
背景色はbackgroundなんや。
よって、見出し1&見出し2の背景色をピンクに変えてみる。

師匠

なお、今のところ、細かい書き方は、気にするな。
何をやっているか、分かればよい。

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

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

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

<p>本文</p>

<table style="color: blue;">
	<tr>
		<td>愛知県</td>
		<td style="color: green;">名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

見出し1

見出し2

本文

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

もし、2つの「見出し」の
文字(color)を白(white)に、
背景色(background)を紫(purple)に
変えたくなったら。。。

<h3 style="color: white; background: purple;">見出し1</h3>

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

<h3 style="color: white; background: purple;">見出し2</h3>

<p>本文</p>

<table style="color: blue;">
	<tr>
		<td>愛知県</td>
		<td style="color: green;">名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td><strong>金沢</strong></td>
	</tr>
</table>

見出し1

見出し2

本文

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

今は2カ所だから良いけど、100カ所あったら、100カ所 全部を直す必要があるなー。

師匠

と、いうふうに、この方法は、まとめて指定できないから、面倒なんや。
でも、特定の一カ所だけの表記を変える場合には、お手軽で良い。

師匠

次、「方法2」や。

復習

  • CSSを 要素内の style 属性で指定することができる。
  • まとめて指定できないが、特定の一カ所だけを変えるには便利。