sugulogの日記

【初心者向け】最重要。CSSを書くうえで理解しないといけないルールについて解説します。

スポンサードリンク

f:id:sugulog:20200813024056j:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、CSSの最重要ということで

  • CSSの記述ルール

について簡単に解説します!!

その為このブログを読むことで、CSSセレクタやプロパティ等の用語について理解できるのはもちろん、CSSを扱うにあたって最重要な記述ルールについても理解することができます。

是非最後までご愛読ください。

 

今回は、

セレクタ

・プロパティ

・値

CSSの記述ルール

の順で解説していきます。

それでは少し長くなりますが、早速みていきましょう!!

セレクタ

セレクタとはCSSによる修飾をどの部分のHTMLに適用するかを指定する情報のことです。

基本的にHTMLのタグ名やクラス名、id名で指定します。

・プロパティ

プロパティとはセレクタで指定したHTMLの何を修飾するかを指定する情報のことです。

文字の色や大きさ、背景色、余白など様々なプロパティがあります。

・値

値とはプロパティで指定した修飾をどのように変化させるかを指定する情報のことです。

文字の大きさをどのくらいの大きさにするのかや、背景色の色をどの色にするのかを指定します。

CSSの記述ルール

それでは実際にセレクタ、プロパティ、値の全体像をみていきましょう。

f:id:sugulog:20220404235126j:plain

セレクタの{ }の中にプロパティと値を指定します。

プロパティと値は:(コロン)で区切り、値の最後は;(セミコロン)で締めます。

またタグ名でセレクタを指定した場合、該当するすべてのタグの要素にCSSが適用されてしまします。

そのため特定の要素にCSSを適用したい場合は、クラス名やid名をセレクタとして指定しましょう。

セレクタにクラス名を指定する場合は、セレクタの前に.(ピリオド)を付与します。

セレクタにid名を指定する場合は、セレクタの前に#(ハッシュ)を付与します。

例)クラス名 → .クラス名 { } 、id名 → #id名 { }

 

以上、今回のブログでした。

CSSセレクタやプロパティ等の用語について理解でき、CSSを扱うにあたって最重要な記述ルールについても理解することができましたか??

このルールを押さえないと正直CSSを書くことは難しいですが、逆にこのルールさえ押さえればCSSを書くことはできます。

少しずつゆっくりとでも理解を深めていきましょう。

今回のToDo

実際にタグ名、クラス名、id名にそれぞれCSSを適用してみましょう(≧∀≦)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度読者登録お願いします!

最後までご愛読いただきありがとうございました!!