
こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は「CSSのセレクタとプロパティと
値について」と題してお話させて頂きます。
既にCSSの設定例などのお話もさせて
頂いておりますが、基本的なお話を
していなかった気がするので^^;
今回はCSSを記述する際の基本となる
各要素について説明させて頂きます。
例えば、h1タグに下記のような設定をしたとします。
1 |
h1 { color: #ff0000; } |
h1の部分を「セレクタ」
colorの部分は「プロパティ」
#ff0000の部分は「値」
と言います。
「セレクタ」の部分には、
p
h1
h2
などのタグや、自分で考えたセレクタ名を
付けることも可能です。
pタグなどは「要素型セレクタ」と言われるのですが、
「classセレクタ」や「idセレクタ」などと呼ばれる物もあります。
「class名」や「id名」は自分で付けることが出来ます。
「classセレクタ」はページ内で何度でも使用して良いのですが、
「idセレクタ」はページで一度のみ使う形になります。
「classセレクタ」は「.」を付けて名前を付けます。
1 |
.mainbox { width: 480px; } |
この場合は
セレクタ:mainbox
プロパティ:width
値:480px
ということになります。
「idセレクタ」は「#」を付けて名前を付けます。
1 |
#wrapper { width: 980px; } |
この場合は
セレクタ:wrapper
プロパティ:width
値:980px
ということになります。
プロパティはたくさんあり、
プロパティと値は複数指定することが出来ます。
1 2 3 4 |
h1 { color: #ff0000; font-size: 16px; } |
この様な形で使っていきます。
ちなみに、この場合は
セレクタ:h1
プロパティ:colorとfont-size
値:#ff0000と16px
ということになります。
今後CSSを使った様々なデザインをご紹介していきますので、
そのサンプル内で様々なプロパティが出てくると思います。
少しづつで良いので、どの様な指定が出来るのか
覚えて行って頂ければと思います。
では、また来週お会いしましょう。