前回はCSSの適用方法について3つの方法があることを説明させていただきましたが、今回からはCSSファイルを作成してHTMLに適用させていく方法を紹介させていただきます。まずはVScodeを開き、CSSファイルを作成してください。ファイル名は半角英数字とし、拡張子が.cssになっていることを確認します。
構成要素
CSSは、セレクタ、プロパティ、値の組み合わせによって構成されていて、それぞれ「どこの、何を、どうするか」を示しています。以下のサンプルは「HTMLファイルの<h1>タグで囲まれた、文字の色を、赤くする」ということを支持しているCSSのコードとなります。
セレクタ（どこの）
HTMLファイルに記載したタグを記入し、その部分に対して装飾を行います。例えば、<p>タグを指定すればHTMLに書かれた<p>タグで囲まれている個所全てに対して同じ装飾を行うことができます。
プロパティ（何を）
セレクタで指定したタグに対してどのような装飾を行うかを記述します。文字色やサイズ・背景色など様々なプロパティがありますが、一度にすべてを覚えることはできません。この後の回でいろいろと紹介していきますが、気になる方はHTMLクイックリファレンス を参考にいろいろなプロパティとその効果を確認してください。
値（どうするか）
装飾の内容を具体的に指定します。プロパティの種類により指定する方法も様々です。値の後にセミコロンを付けるのを忘れないようにしてください。
記述のルール
・必ず半角英数字を使用してください。日本語や全角文字は使用できません。
・大文字と小文字の区別はありませんが、基本的には小文字で記述するようにしましょう。
・同時に複数のセレクタを指定することも可能です。その際は「、」で区切ってください。
・コメントを残す場合は「/*」と「*/」の間にコメントを記入してください。
まとめ
今回は大変簡単にではありますが、CSSをコーディングする際の基本的なルールについて紹介させていただきました。次回から具体的な装飾方法をお伝えしていきます。是非実際にコーディングしてブラウザで確認しながら学習を進めてください。
コメント