3種類のCSS設定方法

ちょっと復習

師匠

前の3ページでやったことを、復習する。

師匠

まず、コンテンツ(本文、価値のある情報)デザイン(服、見た目)を分けるべし、ということ。
これ大事。

師匠

具体似的には、コンテンツ(本文、価値のある情報)は、<body>要素の中に入れる。
だから、<body>要素の中に、 デザイン的な内容を入れないようにすべし 、ということ。

弟子

「 コンテンツ と デザイン の分離が大切 」と。メモメモ。

デザイン(CSS)を外部ファイル(○○○.css)に分ける

師匠

CSSを書く場合に、最初に考える手段は、CSSをCSSファイル(外部ファイル)に書き出す方法や。
前のページでは、「方法3」と呼んでたやつや。

師匠

これによって、コンテンツ(HTMLファイル)デザイン(CSSファイル)が完全に分かれるから、一番良い方法やな。

師匠

書き方は、まず、CSSファイルのCSSの設定を書いて、保存。
下みたいにな。

h3 {
	color:		white;
	background:	darkgreen;
}
師匠

上のコードを、「 aaa.css 」の名前で保存したとする。

師匠

HTMLファイル ( bbb.html、ccc.html、ddd.html など )では、下のコードを<head>要素の中に書いて、CSSファイル( aaa.css )へのリンクを設定する。

<head>
	
(他のコードは省略)

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

(他のコードは省略)

</head>

デザイン(CSS)を <style>要素に まとめる

師匠

次。
基本的な方針は、外部ファイルに出すことや。
でも、そのページだけで使うCSS設定もあるわけや。

師匠

その場合、共通のCSSファイルに書くと、まー、無駄とも言えるわけや。
他の人が誰も使わないのに、共通のところに書いておくと。
(※ でも、そういう一人だけが使う物でも、共通のところに書いておけば、管理しやすい面もある。)

師匠

ま、そういう場合、HTMLファイル<head>要素の中の <style>要素に書いておけば良いわけや。
たとえば、こんな感じな。

<head>
	
(他のコードは省略)

<style>
	h3 {
		color:		white;
		background:	darkgreen;
	}
</style>

(他のコードは省略)

</head>
師匠

これが、前のページでは「方法2」と呼んでいたやつや。

デザイン(CSS)を style属性に書く

師匠

最後に、個々の要素の style 属性に、CSSを設定する方法や。
前のページで「方法1」と呼んでたやつやな。

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

<p style="background: lightgreen;">本文</p>

見出し

本文

弟子

orangered(オレンジ・レッド)とか lightgreen(ライト・グリーン)っていう色の名前も使えるんですか?

師匠

そうや。
ここのページにある色の名前は、なんでも使ってええ。

師匠

色の名前をクリックしたら、詳細な色のデータも分かるし、 近い色も分かるで。

師匠

話は戻るが、 style 属性。
これは、個々の要素(タグ)に デザインの情報を埋め込むことになる ので、「コンテンツ と デザイン の分離」という目的には反している。
だから、あんまり使わない方がええ。 特に、初心者の間は。

師匠

ま、ワイみたいに、
HTMLやCSSを自由自在に使いこなせて、
ギャグのセンス があって、
カッコ良く て、
ダンディー で、
女性に優しい GENTLEMAN(じぇんとるまん)
になったら、使ってもええわ。

弟子

。。。

復習

  • CSSは できるだけ外部ファイルに出す。<link rel="stylesheet" href="aaa.css">
  • 特定のページでだけCSSを使う場合は、<style>要素にまとめる。
  • 特定の要素(タグ)にだけCSSを使う場合は、 style 属性に書く。