シェアする
CSS Syntax: Class Selectors - Japanese Only
みなさまどうも。
では続きまして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セレクタについて解説していきます。引き続き頑張っていきましょう、ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
