基本的なことですが、たまに忘れてしまって調べて確認することになるので、記録しておきます。
webページのデザインを担うCSS
CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、ウェブページのスタイルを指定します。
htmlで表示する内容（文章）を書き、CSSは見た目を整えていく役割です。
具体的には、色を付けたり、文字サイズの調整、背景色、文字や画像の配置などを指定します。
CSSのセレクタ、プロパティ、値
CSSを書くのに、まずは覚えておきたい用語３つ。
- セレクタ：スタイル設定の対象とするhtml要素
- プロパティ（属性）：セレクタに対しての適用するスタイル
- 値：プロパティに対する値で、数値や色など
言葉で書いてもイメージしにくいので、具体例を。CSSは以下のように記述します。
ここでは、h1（見出し）要素に、文字のサイズ、文字の色をそれぞれ、28px（ピクセル）、#ff99cc（赤）と指定しています。
CSSの書き方３種類
CSSには、３種類の記述方法があります。慣れてくると、外部スタイルシートを使うことが多いと思いますが、まずは３つの方法を試してみます。
html要素に直接記入する
適用するhtmlタグに直接スタイルを指定する方法です。
要素に直接書くのでわかりやすく、部分的にスタイルを指定する場合には便利です。
しかし、要素一つ一つにスタイルを記述する必要があるため、CSSの記述量が多くなってくると、コードの見通しは悪くなります。
<!DOCTYPE> <html lang='ja'> <head> <meta charset='UTF-8'> <title>CSS（スタイルシート）の書き方基本</title> </head> <body> <h1 style='font-size:28px; color:#ff0000;'>CSS（スタイルシート）の書き方基本</h1> </body> </html>
headタグ内に記述する
同じhtmlファイルのheadタグ内に記述する方法。
headタグ内にstyleタグを書き、styleタグ内に挟まれた領域に記述します。
htmlファイル単位で、スタイルを管理することができます。
最初の段階では、ファイルを分ける手間もなく、わかりやすいのでよく使います。
コードは以下のようになります。
<!DOCTYPE>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>CSS（スタイルシート）の書き方基本</title>
<style>
h1 {
font-size: 28px;
color: #ff0000;
}
</style>
</head>
<body>
<h1>CSS（スタイルシート）の書き方基本</h1>
</body>
</html>
外部スタイルシートで管理
htmlファイルとは分けて、スタイルシートを別ファイルで管理する方法です。
スタイルシートを外部ファイルとして管理することで、複数のウェブページに対して同一のCSSファイルを適用することができます。
また、スタイル指定だけをまとめて書くことで、全体の見通しもよくなります。
htmlファイルとは別にCSSファイル（ここでは、style.css というファイル名）を作成し、htmlファイルのheadタグ内で、CSSファイルを呼び出すコードを書きます。
【htmlファイル】
<!DOCTYPE> <html lang='ja'> <head> <meta charset='UTF-8'> <title>CSS（スタイルシート）の書き方基本</title> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body> <h1>CSS（スタイルシート）の書き方基本</h1> </body> </html>
【CSSファイル (style.css )】
h1 {
font-size: 28px;
color: #ff0000;
}
実際のwebページで使われているのは、ほとんどこの方法です。
外部ファイルで管理すると、１つのスタイルシートを変更するだけで、同じスタイルシートを読み込んだページすべてに変更を適用することができます。
スタイル適用の優先順位
スタイル適用には優先順位があります。
スタイルの指定を複数個所に書いた場合、どのスタイル指定が適用されるかということです。
CSSの優先順位については、結構ややこしくて私もまだ勉強中なので、深いところについては、改めて整理して記事にしたいと思います。
ここでは、まず知っておきたい基本的なところを書いておきます。
要素タグに直接書くと優先度が高い
上記3つのパターンで考えると、上から優先順位が高くなります。
要素のhtmlタグ内 ＞ headタグ内CSS ＞ 外部ファイルCSS
タグの近くに書くほど、優先度が高くなります。
下に書いたものが優先される
例えば、次のように同じ要素に対してスタイルの記述を複数回書いた場合。
p（段落）に対して、文字サイズの指定が、異なる値で2カ所に記述されています。
p {
font-size: 28px;
color: blue;
}
p {
font-size: 20px;
}
結果は、ｐの文字の大きさは20pxとなり、文字色は青が適用されます。
CSSの記述は、上から順に読まれ、同じ要素に対して異なる指示があると上書きされ、最後に読み込まれた指示が適用されます。
ここでは、文字サイズは一度28pxと指定された後、20pxという追加指示で上書きされます。文字色指定は、1つの指示しかないので最初に指定された青色が適用されます。
CSSの記述量が多くなってくると、うっかりCSSスタイルを上書きしてしまっていたということがあるので、思ったようにスタイルが適用されていない場合は要確認です。
CSSファイルを複数読み込む場合も、下のファイルが優先して適用されます。
<head> <meta charset='UTF-8'> <title>CSS（スタイルシート）の書き方基本</title> <link rel='stylesheet' type='text/css' href='style.css'> <link rel='stylesheet' type='text/css' href='style2.css'> <link rel='stylesheet' type='text/css' href='style3.css'> </head>
ここでも、ファイルを上から順に読み込むため、style2.cssのスタイル指定がsytle.cssのスタイル指定よりも優先されます。
強制的に適用する!important
CSSの優先度を強制的にあげる方法があります。
以下のように、CSSで指定した値の後に !important と記述します。
これを使うと、上記のルールに関わらず、その他の指定を打ち消して最優先されます。
p {
font-size: 28px;
color: blue !important;
}
p {
font-size: 20px;
color: red;
}
下に書くほど優先される原則では、文字色は下に書いた赤が優先されるところですが、この場合は、!important と書いてある、青が優先して適用されます。
優先度を考えずに、即座に適用できるので便利なのですが、
メンテナンス性を考えると、!importantの記述はできる限り避けるべきです。
CSSの優先順位をしっかりと理解すれば、!importantを使わなくても、自在にスタイルの適用ができるようになります。
まとめ
- CSSは、webページの見た目を整える役割。
- セレクタ、プロパティ、値を指定して、スタイルを設定する。
- CSSの記述は、要素タグ内に書く、headタグ内に書く、外部ファイルに書くという３つの方法がある。
- スタイル設定の優先順位は、要素の近くに書くほど、また下に記述するほど優先される。!importantという、強制的に優先する方法もあり。
コメント