株式会社イータイム

〒604-8111
京都市中京区三条通高倉東入
桝屋町57 京都三条ビル5F

MAIL:webmaster@e-time.jp


がっくん

京都の街を盛り上げるがっくんのブログだがじ〜

CSSの指定の仕方 その1

css

 

 

どうも北脇です。

CSSって色んな指定方法があるのでそれを簡単にメモしときます。

 

その前にidとclassの使い分けも簡単に説明入れときますね!

idは同じページ内で一つ!classは複数使える!

これの使い分けですが、一般的に、、、

 ◆ idは固定的なレイアウトで使用する。

   ◆ classは細かいcssの指定で使用する。

 

使い分けなくても実は全部classでもいいんです。

ただ大枠などをidで作成し繰り返し部分がある所のみをclassで作る事で

cssも見やすいですしhtmlソース上で意図もはっきりわかります。

 

そんでもって本題です。

 

知っている人もおさらいだと思って読んでくださいー

 

全てのタグに適用

* {color:red;}

 

全てのpタグに適用

p {color:red;

 

こんな感じでpタグすべてに設定したりアスタリスクで全て共通して適用したり

します。

 

さらにこんな指定をします。

p.css{color:red;}

 

この場合(括弧を使うと表示しちゃうので置き換えて説明します)

( p class=”css” ) これに適用されます。 ( / p)

( div class=”css” ) これには適用されません。 ( / div)

 

上記のように指定する事でpタグの中でのみ変化するcssが作れます。

 

 

 

 

次に子孫要素に適用します。

 

p span {color:red;}

このようにすると

( p ) これに(span)適用(/span)されます。 ( / p)

適用が赤くなります。

 

次に > を使います。

.css > a {color:red;}

このようにする場合は直下要素にのみ適用となります。

( p class=”css” ) 

a href="#")ここは適用されます。(a/)

     ( span ) a href="#")ここは適用されません。(a/) ( / span)

 ( / p)

 

 

 

次に + を使います。

これは隣接している要素に適用です。

h2 + p {color:red;}

 

( h2 ) タイトル ( / h2)

( p ) これに適用されます。 ( / p)

( p ) ここは適用されません。 ( / p)

 

 

次に ~ を使います。(css3のみ)

これは後にある要素に適用されます。

h2 ~ p {color:red;}

 

( h2 ) タイトル ( / h2)

( p ) これに適用されます。 ( / p)

( p ) これに適用されます。 ( / p)

 

 

最後の~のみcss3のみで対応しています。

様々なcssの指定方法があるんですがとりあえず上記を抑えておけば普通には作れます。

 

次回は疑似要素・疑似クラス・属性セレクタについて解説します!