目次
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>
外部ファイル（外部CSS）を使用（link要素）
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 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ファイルをまとめて装飾できる。