1. ホーム
  2. HTML・CSS
  3. 基礎14. CSSの指定方法について

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

CSSの指定方法

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

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


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

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

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


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

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

headタグで、styleタグを記述し、その中にセレクタとプロパティを指定します。
styleタグは、headタグ内のみ指定可能なタグです。


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

headタグ内に、linkタグで外部CSSファイルのリンク先を指定します。
CSSファイルの場所は、src属性の値に、相対パスまたは、絶対パスで指定します。
rel属性は、リンク先の文書との関係（位置づけ）を示すための属性で定型文と思ってください。
指定がない場合、外部CSSが適用されないので、必ず指定します。
セレクタ、プロパティは、外部CSSファイルに記述します。
CSSファイルの名前は、特にルールはありません。common.css、style.cssなどがよく使われます。


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



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

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

CSSファイルの1行目に、下記のコードを記述します。
これはCSSの文字コードの指定です。特に理由がなければ、HTMLファイルと同じ文字コード「UTF-8」を指定しましょう。
文字コードの指定は、1行目以外で指定すると、CSSが正しく機能しないブラウザがあるので注意しましょう。


@charset "UTF-8";

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

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

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

記述場所とその使われ方

要素に直接指定

JavaScriptでCSSを操作する場合、JavaScriptは、style属性にプロパティを出力します。
なぜなら、JavaScriptは、CSSファイルを直接操作できないためです。
プログラム（JavaScript）を使って、CSSの操作を行わない部分は、外部CSSで指定します。

headタグ内に記述

WordPressなどのCMSで、CSSの出力先として利用されることがあります。
また、表示パフォーマンスを向上させるため、ページの最初に読み込まれる部分のみ、styleタグで指定するテクニックがあります。
ただし、他のページとCSSの共有ができないため、基本は外部CSSで指定します。

外部CSS

もっとも利用される指定方法です。特に理由がない場合は、外部CSSをメインに利用します。
外部CSSは、複数のHTMLファイルをまとめて装飾できる点とHTMLファイルと分離して管理できる点がメリットです。
また複数のCSSファイルをリンクすることもできます。
複数のCSSファイルをリンクした場合、後にリンクしたファイル内のセレクタが優先されます。
読み込むファイル数は、数が多くなると表示パフォーマンスが低下します。まとめられるのであればファイル数は少なくするのがベストです。


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

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

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

index.htmlに記述。


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

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


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

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


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

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


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

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


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

まとめ

  • CSSの指定方法は、3種類。
  • 通常は、外部CSSで指定する。
  • 外部CSSは、複数のHTMLファイルをまとめて装飾できる。

関連記事