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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベル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を使った様々なデザインをご紹介していきますので、
そのサンプル内で様々なプロパティが出てくると思います。

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

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

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ