CSSとはウェブページの見た目を制御するためのスタイルシート言語です。CSSは1996年にCSS1が登場し、1998年にCSS2、2004年にCSS2.1、2011年にCSS3が発表されました。

CSSの基本

CSSはHTMLのタグのスタイルを変更するものであり、構文は以下のようになります。

selector {
  property: value;
}

selectorは指定したいHTMLタグやHTMLタグのid、class属性を指定します。例えばh1タグであればh1、idが「id」のタグであれば「#id」、classが「class」のタグであれば「.class」となります。

CSSはHTMLのタグに紐づけて使用されます。紐づけ方は3種類あります。

インラインCSS

インラインCSSとはHTMLのタグの共通属性のstyle属性にスタイルを記述する方法です。以下に一例を示します。

<h1 style="color: red;">Test</h1>

Test

上記の例ではh1タグのstyle属性にcoler:redと記述することで、h1タグの文字の色を赤色に指定しています。

内部CSS

内部CSSとはHTMLのstyleタグにCSSを記述する方法です。以下に一例を示します。

<style>
    h1 {
        color: red;
    }
</style>
<h1>Test</h1>

Test

外部CSS

外部CSSとはCSSのコードを.cssファイルにCSSを記述する方法です。記述したCSSファイルはHTMLのlinkタグで紐づけます。

まとめ

以下に3種類の方法についてのまとめを示します。

方法	利便性	再利用性	主な用途
インラインCSS	簡単	低い	特定の要素にのみ適用したい場合
内部CSS	ページ全体で適用可能	中程度	単一ページのスタイル指定に適している
外部CSS	複数ページでスタイルを共有可能	高い	複数ページや大規模なプロジェクトで使用

よく使用されるのは外部CSSです。外部CSSにすることで適応するスタイルが制御しやすくなります。

本解説シリーズでは内部CSSを使用してコードと見た目を表示します。

CSSの優先順位

CSSはスタイルの記述方法によって優先順位が異なります。優先順位は以下の通りです。

1. インラインスタイル
2. IDセレクタ（#idで指定されるスタイル）
3. クラスセレクター（.classで指定されるスタイル）、属性セレクター、疑似クラス
4. タグセレクター
5. ブラウザのデフォルトスタイル

CSSはWebページを見やすくするために非常に重要な要素で、できることも幅広いです。このシリーズではすべてを紹介することはできませんが、基礎的な部分は一通り解説したいと思います。