カテゴリー:CSS

記事本文

この記事をお勧めしたい方

CSSの仕組みを知りたい方!




今日もお疲れです!
ビギナー中里です!


今回はCSSの核心、カスケードに触れてみたいと思います。


そもそもCSSとは何の略でしょうか。


ずばり

Cascading Style Sheets(カスケーディング スタイル シート)

の略です。


このCascadingがCSSを知るためには非常に重要になります。

今回は説明が多くなりますが、とても大事なのでどうぞお付き合いください。



本記事で得られるスキル

  • CSSで困らない為の必須知識











カスケードとCSS

カスケードを辞書で調べると

小さい滝、滝のように落ちる、連続したもの

といった意味があることがわかります。


ここからCSSは

上から下へ連続して流れるスタイルの群

と考えることができます。


これはどういうことなのか、見ていきましょう。










CSSの流れ

以下のようなCSSがあるとします。

.text {
color: red;
font-size: 14px;
font-weight: bold;
}
これは class="text" 属性を持つ要素です


これに追記をしてみます。


.text {
color: red;
font-size: 14px;
font-weight: bold;
}
.text {
color: blue;
}
これは class="text" 属性を持つ要素です


すると、下に書いた
color
によってスタイルが上書きされていることがわかります。
color
以外のスタイルはそのまま当たっています。

さらに追記してみましょう。


.text {
color: red;
font-size: 14px;
font-weight: bold;
}
.text {
color: blue;
}
.text {
color: green;
font-size: 20px;
}
これは class="text" 属性を持つ要素です


今度は更に下に書いた
color
font-size
によってスタイルが上書きされました。

このように、CSSでは下に書いたものほど優先してスタイルが当たります。
これがCSSの流れであり、カスケードが意味することです。










外部化されたCSSのカスケード

では、上で書いたCSSを保存して、新たにCSSを作成し、読み込むとしましょう。
以下のような状態です。

<!-- 最初に書いたCSS-->
<link rel="stylesheet" href="default.css">

<!-- 新たに作成したCSS -->
<link rel="stylesheet" href="override.css">


そして、新たに作成したCSSに以下の記述をします。


.text {
color: gray;
font-size: 14px;
font-weight: normal;
}
これは class="text" 属性を持つ要素です


すると、新たに作成したCSSによってスタイルが上書きされました。
カスケードは1つのCSSファイル内だけでなく、複数のCSSファイル同士でも起きることがわかります。

試しにCSSの読み込み順を逆にしてみましょう。


<!-- 新たに作成したCSS -->
<link rel="stylesheet" href="override.css">

<!-- 最初に書いたCSS-->
<link rel="stylesheet" href="default.css">
これは class="text" 属性を持つ要素です


予想した通り、後に読み込まれたCSSで、且つ一番下にあるスタイルが優先して当たりました。










今回はここまで!
お疲れ様でした!



カスケードが分かれば、もうCSSをどんどん書いていくことができます!
スタイルを当てたいHTML要素にclass属性を付与して、CSSファイルに
スタイルを書いていきましょう。



次回はよく使う、基本的なCSSのプロパティを紹介したいと思います。
ではまた!