CSSのセレクタとプロパティと値について

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は「CSSのセレクタとプロパティと
値について」と題してお話させて頂きます。

既にCSSの設定例などのお話もさせて
頂いておりますが、基本的なお話を
していなかった気がするので^^;
今回はCSSを記述する際の基本となる
各要素について説明させて頂きます。

例えば、h1タグに下記のような設定をしたとします。

h1の部分を「セレクタ」
colorの部分は「プロパティ」
#ff0000の部分は「値」

と言います。

「セレクタ」の部分には、
p
h1
h2

などのタグや、自分で考えたセレクタ名を
付けることも可能です。

pタグなどは「要素型セレクタ」と言われるのですが、
「classセレクタ」や「idセレクタ」などと呼ばれる物もあります。

「class名」や「id名」は自分で付けることが出来ます。

「classセレクタ」はページ内で何度でも使用して良いのですが、
「idセレクタ」はページで一度のみ使う形になります。

「classセレクタ」は「.」を付けて名前を付けます。

この場合は

セレクタ：mainbox
プロパティ：width
値：480px

ということになります。

「idセレクタ」は「#」を付けて名前を付けます。

この場合は

セレクタ：wrapper
プロパティ：width
値：980px

ということになります。

プロパティはたくさんあり、
プロパティと値は複数指定することが出来ます。

この様な形で使っていきます。

ちなみに、この場合は

セレクタ：h1
プロパティ：colorとfont-size
値：#ff0000と16px

ということになります。

今後CSSを使った様々なデザインをご紹介していきますので、
そのサンプル内で様々なプロパティが出てくると思います。

少しづつで良いので、どの様な指定が出来るのか
覚えて行って頂ければと思います。

では、また来週お会いしましょう。