CSSの基本構造～ドリル式ホームページの作り方

CSSの基本構造

@規則と規則集合

CSSの大まかな構文構造は、

@規則

セレクタ {
プロパティ:値;
}

のような@規則を冒頭に書き、そのあとに規則集合を書いていくという構造をとります。

@規則には、@charset規則、@import規則、@media規則、@page規則の4つがあり、セレクタはh1やpなど、各タグ名に対応しています。具体的には下のようになります。

@charset "UTF-8";　/* 文字コードの指定 */
@import "○○.css";　/* 他のCSSを読み込む */
@media screen {
color:#fff;
}
@media print {
color:#000;
}
　/* PC画面では白文字だが印刷するときのみ黒文字に */

h1 {
color:#000;
}
　/* h1タグに囲まれた文字の色を黒にする */

セレクタのあとには、「"半角スペース"を空けてから"{"」を打ち、改行、キーボードのTABキーで空白をとった後、「プロパティ＋":（コロン）"＋値＋";（セミコロン）"」、また改行して、TABの後に"}"でしめます。

TABは全てのプログラム共通で、TABで取った空白は空白として認識されないので、プログラムを見やすくするのに使われます。

規則集合の省略

規則集合の記述方法の基本は上記の通りですが、h1とp要素どちらもに同じスタイルを適用したいとき、

h1 {
color:#000;
}
p {
color:#000;
}

上記のように二つ同じことを書いてももちろん問題はありませんが、下記のように",（カンマ）"で区切って省略することもできます。

h1,p {
color:#000;
}