CSS文法の基礎 classセレクタ

みなさまどうも。

では続きましてCSS側のclass属性の文法や使い方を確認していきましょう。

まずHTMLから記述していきます。p要素にclass属性を追加する場合は以下のようになりますね。

<p class="test">ここにスタイルを適用するよ。クラス名はtestだよ</p>

ここまでは問題ないかと思います。続いてCSSの記述方法について勉強していきましょう。

以下のCSSを見てください。

p {
    font-size: 18px;
    font-weight: bold;
}

セレクタにp要素が記述されていますね。ここまではいつも通りです。これにクラス名を足してみましょう。

セレクタの記述方法は『.』の後にクラス名を記述すればOKです。文字間に半角スペースなどは含んではいけませんのでご注意ください。

p.test {
    font-size: 18px;
    font-weight: bold;
}

これで『test』というclass名が付いたp要素のみスタイルを適用させることができます。

では続いてちょっと応用編になります。今のセレクタの記述は『p.test』となっていますね。ということは『testというクラス名が付いたp要素のみ』にスタイルが適用されます。

以下のようにp要素をdiv要素に変更した場合は適用されません。

<div class="test">ここはスタイルが適用されないよ</div>

div要素に対してもスタイルを適用させるには以下のように

p.test, div.test {
    font-size: 18px;
    font-weight: bold;
}

セレクタを複数指定します。

そして『testというクラス名が付いたすべての要素』に対してスタイルを適用させたい場合も非常に多いです。その場合は『*』(アスタリスク)を使用します。

*.test {
    font-size: 18px;
    font-weight: bold;
}

『*』を使用すれば『testというクラス名を持った全ての要素』として指定できます。

そしてクラスセレクタからは『*』を省略できます。

.test {
    font-size: 18px;
    font-weight: bold;
}

これでも同じように『testというクラス名を持った全ての要素』として指定できます。そして『*』(アスタリスク)を省略するこの記述方法が一般的です。

これで以下のような

<p class="test">ここにスタイルを適用するよ</p>
<div class="test">ここもスタイルが適用されるよ</div>

同じクラス名が付いたすべての要素にスタイルを適用させることができます。

次にclass属性は1つのタグに複数記述することができます。

以下のように記述されたCSSがあったとすると

.test {
    font-size: 18px;
}
.test2 {
    font-weight: bold;
}

以下の要素はこの2つのセレクタのスタイルが適用され、文字の大きさが18pxとなり太字になります。

<p class="test test2">ここはtestとtest2っていうclass名が付いてるよ</p>

class属性を複数記述する場合の区切りは半角スペースを使います。

さらにクラスセレクタを複数つなげることも可能です。以下の例を見てください。

.test.test2 {
    font-size: 18px;
    font-weight: bold;
}

クラスセレクタが2つ繋がっています。この場合はclass属性に『test』と『test2』の2つの値があった場合のみスタイルが適用されます。順番は問いませんのでどちらのクラス名を先に記述しても大丈夫です。クラスセレクタを複数つなげて記述する場合は半角スペースなど含んではいけません。完全にくっつけて記述するように注意してください。

<p class="test test2">ここはスタイルが適用されるよ</p>
<p class="test2">ここはスタイルが適用されないよ</p>

以上となります。どどっと説明してしまいましたが大丈夫でしょうか？

CSSの文法はそこまで複雑でないので書いていくうちにすぐに慣れていくかと思います。自分のパソコンでHTMLファイルとCSSファイルを作って色々遊んでみると良いですね。

次の記事ではidセレクタについて解説していきます。引き続き頑張っていきましょう、ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア