CSSの基本的な使い方
CSSとは
CSSとは「Cascading Style Sheets」の頭文字を取ったものです。Cascadingとは連鎖という意味で、HTMLで表現される親子構造のデザインを親から子へ連鎖的に継承されていくデザインを定義するものです。
具体的に、HTMLではbodyタグ内で入れ子としてpタグを利用しますが、この場合、bodyタグが親、pタグが子という関係になります。この時CSS内でbodyタグの文字サイズを定義すると、子であるpの文字サイズはCSS内で定義しなくても連鎖的にbodyの文字サイズを継承します。
CSSの書式
基本の書式は以下の通りです。
p {
/* コメント*/
color:red;
}
対象となる要素（この場合はp）の後ろを｛｝で囲み、その中に適用するスタイル（宣言）を書きます。この対象となる要素のことをセレクタと呼びます。
スタイルはプロパティ：値；の形式で記載します。この場合はcolor:red;です。
コメントは/* */で囲まれた内部がコメントとして扱われます。
{宣言}を宣言ブロックと言います。
複数の要素に一括でスタイルを適用したい場合の書式は以下の通りです。
h1,h2,h3 {
color:red;
}
CSSを書く場所
CSSの書式が分かったところで、CSSを書く場所ですが、以下3つの書き方があります。
インラインスタイルシート
HTMLファイル内で、該当要素に直接スタイルを記載します。
<p style="color:red;">TEST</p>
この書き方の場合｛｝は必要なく、style=""内にスタイルを記述します。この方法の特徴はタグに直接指定するため、後述する適用順位的には!important指定を除いて一番高くなります。このため、CSSが複雑化してどのスタイルが適用されているのか分からなくなった場合の暫定対応としてよく利用されます。しかし、メディアクエリ等の条件判断ができないため利用には注意が必要です。
内部スタイルシート
HTMLファイル内で、<style>タグ内にスタイルを記述します。
<style>
p {
color:red;
}
</style>
記述したHTMLだけに適用されます。複数のHTMLファイルにCSSを適用させたい場合にはこの書き方では対応できませんので注意して下さい。
外部スタイルシート
外部ファイルにスタイルを記述して、HTMLファイルがそのファイルを読み込む方法です。
～ HTML ～
<head>
<link rel='stylesheet' href="./style.css" rel="stylesheet" type="text/css" media='all'>
</head>
<body>
<p>TEST</p>
</body>
～ style.css（外部CSSファイル） ～
p {
color:red;
}
複数のHTMLファイルに同じスタイルを適用させたい場合に利用する方法です。スタイルをサイト全体で統一し、一元管理できることからこの方法が一般的です。
CSSの適用順序
同一の要素にスタイルが重複して適用された場合、コードの記述順序を見て、後に指定されたスタイルが優先。つまりスタイルが上書きされます。
しかし例外として!importantが指定された場合は順序関係なく最優先でスタイルが適用されます。
p {
color:red; !important
}