HTMLで複数Classの指定の仕方+複数Classで作業効率改善（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「Classって2つ指定できるの・・？」
「Classを複数指定する方法を教えて・・！」「CSSで複数セレクタをまとめて指定して作業効率を改善したい・・！その様に考えている、初心者WEB制作者の方も多いのではないでしょうか？
私も最初の頃は、「Classを2つも作成できるの・・？　方法は・・？」などわからない時期が続きました。
「Classを複数指定」「CSSで複数セレクタをまとめて指定」する事で、作業効率の改善をする事ができます。 今回は、「Classを複数指定する方法」「CSSで複数セレクタをまとめて指定する方法」「CSSでセレクタを絞り込む方法」を中心に、初心者の方むけに解説していきます。

HTMLで複数Classを指定

HTMLで一つの要素にClass属性を複数指定する事ができます。
一つの要素にクラスを複数指定することで、CSSセレクタに対して適用範囲をコントロールできます。
例えば、ボタン要素が複数あったとして、全てのボタンのデザインを1のクラス名にまとめていたとします。
しかしボタンの一つだけをクリックできない様にするなど、機能を1つのボタンだけに追加したい場合などに、Classを追加しCSSで機能を指定する事ができます。
今は少しわかりづらいかもしれませんが、今回の解説を最後までみていただければ、より深く理解できると思います。

HTMLで複数Classを指定する方法

HTMLで複数のクラスを指定するには、半角スペースを開けます。

<div class="class-one class-two class-three">
  
</div>

</div>

※解説
上記のように、class-oneの右隣に半角スペース、class-twoの右隣に半角スペースと指定することで、「class-one」「class-two」「class-three」の3点、クラスを作成する事ができます。
また、必要に応じて必要な数のクラス名を記入する事ができます。
ポイントとしては、コロンやカンマではなく「半角スペース」を入れることです。

複数のclass名を入れ子構造に記入する方法

入れ子構造においてもクラスの指定は変わらず、「半角スペース」使用します。

<div class="class-one class-two class-three">
   <p class="class-a class-b">入れ子AB</p>
   <p class="class-c class-d">入れ子CD</p>
</div>

<p class="class-a class-b">入れ子AB</p>

<p class="class-c class-d">入れ子CD</p>

</div>

※解説
class-aの右隣に半角スペース1つ分入れることで、「class-a」「class-b」と2つのクラスを作成する事ができます。

複数クラス指定のクラスの分け方

複数クラスを指定する場合に大切なことは、「CSSの役割を分ける」ことです。主に「見た目」「サイズ」「機能」などで分け、そのクラスが何を指定しているのかをわかりやすくします。
例えば、class-oneは「文字色・背景色」の[見た目]、class-twoは「マージンやパディング」の[サイズ]、class-threeは「アクティブ要素」などの[機能]をクラスに指定するということです。サンプルコードで詳しく解説します。

HTMLサンプルコード

<div class="class-one class-two class-three">
</div>

1 2	<div class="class-one class-two class-three"> </div>

CSSサンプルコード

.class-one {
 color: black;
 background-color: red;
}
 
.class-two {
 width: 100px;
 margin: 10px;
 padding: 10px;
}
 
.class-three:active {
 color: blue;
 background-color: yellow;
}

.class-one {

color: black;

background-color: red;

}

.class-two {

width: 100px;

margin: 10px;

padding: 10px;

}

.class-three:active {

color: blue;

background-color: yellow;

}

※解説
・class-oneには、色の指定
・class-twoには、幅、余白のサイズの指定
・class-threeには、アクティブ機能の指定

classを複数指定する時は、各クラスにわかりやすい役割を持てせることで、CSSをより見やすく、わかりやすくする事ができます。

CSSで複数のセレクタを指定する・絞り込む方法

1つのCSSで複数のセレクタを対象にする方法

1つのCSSで複数のセレクタを選びます。

1行目3行目が指定されている↓

ABCDEF

GHIJKL

MNOPQR

HTMLサンプルコード

<div class="class-one">
   <p class="class-p1">ABCDEF</p>
   <p class="class-p2">GHIJKL</p>
   <p class="class-p3">MNOPQR</p>
</div>

<p class="class-p1">ABCDEF</p>

<p class="class-p2">GHIJKL</p>

<p class="class-p3">MNOPQR</p>

</div>

CSSサンプルコード

.class-p1,.class-p3 {
 color: red;
}

.class-p1,.class-p3 {

color: red;

}

※解説
1つのCSSで複数セレクタを選択するには「カンマ」で区切ります。
表示結果の1行目、3行目の色がredで表示されました、これはCSSサンプルコードで「.class-p1, .class-p3」にcolor: red;を指定しているからです。
このように1つのCSSで複数セレクタを指定する場合は、「カンマ」で区切り複数指定します。

複数セレクタで対象を絞り込む方法

複数のセレクタで対象を絞り込みます。

1行目が選択されている↓

ABCDEF

GHIJKL

MNOPQR

HTMLサンプルコード

<div class="class-one">
   <p class="class-p1">ABCDEF</p>
   <p class="class-p2">GHIJKL</p>
   <p class="class-p3">MNOPQR</p>
</div>

<p class="class-p1">ABCDEF</p>

<p class="class-p2">GHIJKL</p>

<p class="class-p3">MNOPQR</p>

</div>

CSSサンプルコード

.class-one .class-p1 {
 color: red;
}

.class-one .class-p1 {

color: red;

}

※解説
複数のセレクタで対象サンプルを絞り込みむには、半角スペースで区切ります。
表示結果1行目の「ABCDEF」がcolor=redで表示されているのは、CSSサンプルコードで「div class=”class-one”」の「p class=”class-p1”」が指定されていることで、セレクタが絞り込まれCSSが適用されている為です。これを子孫セレクタと言います。

複数の属性セレクタで対象を絞り込む方法

複数の属性セレクタを指定して対象を絞り込みます。

1行目が選択されている↓

ABCDE

FGHIJK

HTMLサンプルコード

<p><a href="#" >ABCDE</a></p>
<p><a href="#" title="sample1">FGHIJK</a></p>

1 2	<p><a href="#" >ABCDE</a></p> <p><a href="#" title="sample1">FGHIJK</a></p>

CSSサンプルコード

a[href][title]{
 background-color: red;
}

a[href][title]{

background-color: red;

}

※解説
複数の属性セレクタを指定し絞り込んでいます、[]を並べて記述します。
表示結果、2行目の「FGHIJK」にbackground-color: red;が指定され表示されています、これはCSSサンプルコードで属性セレクタ「href」と「title」を指定し絞り込んだ為です、1行目は、[title]がないのでcolor: red;が指定されません。

擬似クラス・属性セレクタで絞り込む方法

擬似クラスと属性セレクタで絞り込みます。

これを作る↓

ABCDE

FGHIJK

HTMLサンプルコード

<p><a href="#">ABCDE</a></p>
<p><a class="one" href="#">FGHIJK</a></p>

1 2	<p><a href="#">ABCDE</a></p> <p><a class="one" href="#">FGHIJK</a></p>

CSSサンプルコード

a:link[class="one"]{
 background-color: red;
}

a:link[class="one"]{

background-color: red;

}

※解説
擬似クラスを記述し属性セレクタを[]で囲みます。
表示結果、2行目のFGHIJKにbackground-color:red;が指定されて表示されています、これはCSSサンプルコードで、擬似クラス「a:link」属性セレクタ「class-one」を指定し絞り込んだ為です。
表示結果1行目は、属性セレクタ「class=”one”」がないのでbackground-color:red;が指定されていないということになります。

擬似クラスと擬似要素を指定する方法

擬似クラスと擬似要素でセレクタを絞り込みます。

「あいうえお」が指定されている↓

ABCDE

あいうえおFGHIJK

HTMLサンプルコード

<p>ABCDE</p>
<p><a href="#">FGHIJK</a></p>

1 2	<p>ABCDE</p> <p><a href="#">FGHIJK</a></p>

CSSサンプルコード

a:link::before {
 content:"あいうえお";
 background-color: red;
}

a:link::before {

content:"あいうえお";

background-color: red;

}

※解説
CSSサンプルコードで「擬似クラスa:link」と「擬似要素の::before」を指定し対象要素を絞り込んでいます。
表示結果、2行目::before要素で「あいうえお」が表示されています。これはCSSサンプルコードで擬似クラス「a:link」擬似クラス「::before」が指定されている為です。表示結果1行目は、HTMLタグがpだけなので表示されません。

属性セレクタと擬似要素を指定する方法

属性セレクタと擬似要素を指定します。

「あいうえお」が指定されている↓

ABCDE

あいうえおFGHIJK

HTMLサンプルコード

<p class="one">ABCDE</p>
<p class="two">FGHIGK</p>

1 2	<p class="one">ABCDE</p> <p class="two">FGHIGK</p>

CSSサンプルコード

p[class="two"]::before {
 content:"あいうえお";
 background-color: red;
}

p[class="two"]::before {

content:"あいうえお";

background-color: red;

}

※解説
CSSサンプルコードで、属性セレクタ[class=two]、擬似要素::beroreを指定し対象要素を絞り込んでいます。表示結果2行目::before要素で「あいうえお」が表示されています。
これは、HTMLサンプルコード2行目に[class=”two”]セレクタが指定されている為です。1行目の属性セレクタは[class=”one”]の為表示されません。

まとめ

今回は「HTMLで複数クラス指定する方法」「CSSで複数セレクタを指定・絞り込む方法」をメインに解説してきました。ポイントをまとめます！

ポイント

1.HTMLでクラスを複数指定するには、「半角スペース」をあけて指定する。

2.1つのCSSで複数のセレクタを選択するには、セレクタを「コンマ」で区切る。

3.複数セレクタで対象を絞り込むには、「半角スペース」で区切る。

4.複数の属性セレクタで対象を絞り込むには、[]を並べて記述する。

5.擬似クラス・属性セレクタで絞り込むには、「擬似クラス」を記述し、属性セレクタを[]で囲む。

6.擬似クラスと擬似要素で絞り込むには、擬似クラスと、擬似要素を記述し絞り込む。

7.属性セレクタと擬似要素で絞り込むには、属性セレクタを[]で囲み、擬似要素を記述し絞り込む。

いかがだったでしょうか？「HTMLで複数クラス指定する」「CSSで複数セレクタを指定・絞り込む」ことで作業効率の改善にも繋がります！ぜひ参考にしてみてください！