基礎14. CSSの指定方法について

2016/04/12 2017/07/11

1 CSSの指定方法
2 CSSファイルの記述の注意点
3 CSSの記述場所による優先順位の違い
4 外部CSSのメリット
5 演習：「上書き」と「継承」
- 5.1 まとめ

CSSの指定方法

下記のbase01.zipをダウンロードして、style.cssに実際に記述してみましょう。
base01

CSSの指定方法は3つあります。index.htmlに下記を記述してCSSで装飾されたか確認してみてください。1つのCSSの指定方法を確認したら、元に戻してほかの指定方法も試してみてください。


<p>段落テキスト</p>

<p>段落テキスト</p>

要素に直接指定（style属性）

CSSを指定したい要素にstyle属性で値にプロパティを記述します。style属性は、すべての要素に使えます。
複数プロパティの指定はプロパティごとに半角スペースで区切ります。


<p style="font-size: 20px; font-weight: bold;">段落テキスト</p>

<p style="font-size: 20px; font-weight: bold;">段落テキスト</p>

headタグ内に記述（style要素）

headタグ内にstyleタグを記述しセレクタとプロパティを指定します。styleタグはheadタグ内でしか使用できません。


<style>
p{
	font-size: 20px;
	font-weight: bold;
}
</style>

<style>

font-size: 20px;

font-weight: bold;

}

</style>

外部ファイル（外部CSS）を使用（link要素）

headタグ内にlink要素で記述します。CSSファイルの場所は、src属性の値に相対パス（または、絶対パス）で記述します。


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

rel属性はリンク先の文書との関係（位置づけ）を示すための属性で定型文と思ってください。

セレクタ、プロパティは、CSSファイルに記述します。CSSのファイル名はルールにしたがっていれば、どんな名前でもかまいません。下記は、style.cssに記述した場合の例です。


	@charset "UTF-8";
	p{
		font-size: 20px;
		font-weight: bold;
	}

@charset "UTF-8";

font-size: 20px;

font-weight: bold;

}

CSSファイルの記述の注意点

CSSファイルの1行目には必ず下記のコードを記述します。


@charset "UTF-8";

@charset "UTF-8";

これはCSSの文字コードの指定です。特に理由がなければ、HTMLファイルと同じ文字コード「UTF-8」を指定しましょう。

CSSの記述場所による優先順位の違い

セレクタが同じ場合「要素に直接指定」のほうが優先順位が高くなり、ほかの指定場所のプロパティの値を上書きます。ただし同じプロパティがなければ引き継がれます（継承）
指定方法による優先順位は、下記のようになります。右側になるほど優先されます。

「外部CSS」 → 「headタグ内に記述」 → 「要素に直接指定」

記述場所に関しては、どこが一番良いかは設計によって変わります。通常は外部CSSで指定する方法が一般的です。

外部CSSのメリット

「headタグ内に記述」「要素に直接指定」は、1つのHTMLファイルの装飾しかできません。「外部CSS」は、複数のHTMLファイルをまとめて装飾することができます。また複数のCSSファイルをリンクすることもできます。


<link rel="stylesheet" src="common.css">
<link rel="stylesheet" src="style.css">

複数のCSSファイルをリンクした場合は、後にリンクしたファイルの指定のほうが優先されます。

演習：「上書き」と「継承」

下記のコードを順番に記述して「上書き」を確認していきます。「上書き」により文字サイズと色が変わっていることを確認してみてください。

index.htmlに記述。


<p>段落テキスト</p>

<p>段落テキスト</p>

style.cssに下記を記述してブラウザで表示します。


p{
	font-size: 10px;
	color: #ff0000;
}

font-size: 10px;

color: #ff0000;

}

次にheadタグ内に下記を記述しブラウザで表示します。


<style>
p{
	font-size: 20px;
	color: #00ff00;
}
</style>

<style>

font-size: 20px;

color: #00ff00;

}

</style>

最後に、直接p要素にCSSを指定してブラウザで表示します。


<p style="font-size: 40px; color: #0000ff;">段落ああああああああああ</p>

<p style="font-size: 40px; color: #0000ff;">段落ああああああああああ</p>

次に「継承」の確認です。style.cssにtext-alignプロパティを追加します。text-alignプロパティは「行ぞろえ」の指定が行えます。記述したらブラウザで確認します。
このプロパティは、ほかの指定方法にないプロパティなので「継承」されます。


p{
	font-size: 10px;
	color: #ff0000;
	text-align: center;
}

font-size: 10px;

color: #ff0000;

text-align: center;

}

まとめ

CSSの指定方法は、3種類
外部CSSで指定するのが一般的
外部CSSは、複数のHTMLファイルをまとめて装飾できる

B!
LINE

- HTML・CSS