記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

HTMLで複数Classを指定する方法を初心者の方向けに紹介。 複数Classを指定する方法に加え、セレクタをまとめて指定する方法を解説。 全てサンプルコード付きなので実際に手を動かして学ぶことができ、初心者の方も安心して理解する事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、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で複数のクラスを指定するには、半角スペースを開けます。

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

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

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

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

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

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

HTMLサンプルコード

CSSサンプルコード

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

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

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

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

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

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

ABCDEF

GHIJKL

MNOPQR

HTMLサンプルコード

CSSサンプルコード

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

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

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

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

ABCDEF

GHIJKL

MNOPQR

HTMLサンプルコード

CSSサンプルコード

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

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

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

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

ABCDE

FGHIJK

HTMLサンプルコード

CSSサンプルコード

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

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

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

これを作る↓

ABCDE

FGHIJK

HTMLサンプルコード

CSSサンプルコード

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

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

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

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

ABCDE

あいうえおFGHIJK

HTMLサンプルコード

CSSサンプルコード

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

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

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

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

ABCDE

あいうえおFGHIJK

HTMLサンプルコード

CSSサンプルコード

※解説
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で複数セレクタを指定・絞り込む」ことで作業効率の改善にも繋がります!ぜひ参考にしてみてください!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。