CSS（Cascading Style Sheets）とは

カテゴリ：CSS編

CSSとは

CSS（Cascading Style Sheets）はWebページの表示方法（文字の色や大きさ、要素の装飾、レイアウトなどのデザイン）を定義する設定です。

HTMLがWebページの構造を定義するものであるのに対し、CSSはデザインを定義します。
現在は構造とデザインは完全に分離する事が推奨されており、デザインは全てCSSで行う事がセオリーとなっています。
逆にいえばHTMLの要素をデザイン目的で使用する事は推奨されないということです。

そのため、PC用、スマートフォン用の表示の切り替え（レスポンシブデザイン）もCSSのみで実現できるのです。

カスケーティングとはコンピューター用語では一般的に入れ子構造を示します。
※CSSの場合、構造が階段状の滝に似ている事からそう命名されました。

CSSは名前の通り、定義を入れ子にする事ができ、もしプロパティが重複する場合、最も内側の親要素のプロパティ（そのコンテンツから最も近い親要素）、位置が同じなら後から書かれた方のプロパティの値が優先されます。

例えば以下のようにbody要素の文字サイズ（font-size）を100%、article要素の文字サイズを105%とした場合、article要素内の文字には105%が適用されます。

body { font-size: 100%; }
article { font-size: 105%; }

<body>
    ボディ（100%で表示）
    <article>
        記事（105%で表示）
    </article>
</body>

以下のように記述する順番を入れ替えても入れ子構造は変わらないため結果は同じです。

article { font-size: 105%; }
body { font-size: 100%; }

ただし以下のようにarticle要素に対して同じプロパティを複数定義した場合、article要素には後に記述したプロパティ（この例の場合font-size: 105%;）が適用されます。

article { font-size: 100%; }
article { font-size: 105%; }

ちなみにプロパティ値に!importantのパラメータを付与する事で外側のプロパティを強制する事も可能です。

この仕組みのため何階層にも渡ってCSSを指定する事が可能となり、コンポーネントごとに非常に柔軟にデザイン設定が行えます。

なお、プロパティの優先順位はセレクタと呼ばれる定義方法を用いても定義する事ができます。
セレクタについては後のページで解説いたします。

現在の最新バージョンは4です。
ただしCSSは上位互換があり、バージョンアップでは主に機能の追加がなされるため、特定のバージョンのみを使用する事はありません。

現在広く使用されているのはCSS3ですが、CSS3ではCSS 2.1をベースに機能追加や改良がなされています。
また、CSS 2.1はCSS2の改訂版、CSS2はCSS1の上位互換バージョンとなります。

以降のページではCSSの使い方や主なプロパティを解説していきます。

公開日時：2019年06月11日 21:35:05
最終更新日時：2022年03月12日 07:37:21