〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【複数Classの指定】とCSSセレクタの効果的な使い方を解説

本記事は、「CSSでコーディングをする時に、複数のclassを適用できないかね…」と思いつつ

UIHACK
編集長
UIHACK 編集長

・HTMLの要素内に複数のclass属性を指定する方法
・複数のclass属性を指定する方法
・擬似クラスと属性セレクタの組み合わせでコーディングする方法

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「複数のclassを指定する方法」を「後半」では「複数のclassを指定する3つの方法」や「擬似クラスと属性セレクタを組み合わせてコーディングする方法」を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、少しずつ試してみて、楽しく学んでくださいね。

それでは、ご一読ください!

class属性を複数指定するテクニックとサンプルコード解説

Webデザインやフロントエンド開発において、要素にスタイルを適用する際に、class属性を使用することは一般的です。しかし、1つの要素に複数のスタイルを適用したい場合、どのようにして効果的にclass属性を複数指定するかが重要なポイントです。本記事では、class属性を複数指定するテクニックとその実際の使い方をサンプルコードを交えて解説します。

class属性を複数指定する方法

要素に複数のスタイルを適用するには、class属性にスペースで区切られた複数のクラス名を指定します。以下に、HTMLの要素に複数のスタイルを適用する方法を示します。

【実行結果】class属性を複数指定する方法

このテキストは赤くて太字です。尚且つ紫色の下線を指定しています。

プチ解説

red-boldmain-titleクラスの両方が指定されており、両方のクラスのスタイルが適用されます。

HTML

<p class="red-bold main-title">このテキストは赤くて太字です。尚且つ紫色の下線を指定しています。</p>
HTML
プチ解説

<p>要素を使用して段落を作成しています。この段落要素には2つのクラス属性が指定されています:red-boldとmain-title。これにより、この要素に2つの異なるスタイルが適用されます。

CSS

.main-title {
  border-bottom: 3px solid #e29afe;
}

.red-bold {
  color: red;
  font-weight: bold;
}
CSS
プチ解説

.main-title: このクラスはborder-bottomプロパティを使用して、テキストの下に紫色の下線を3ピクセルの太さで描画します。色は#e29afe(紫色)で指定されています。

.red-bold: このクラスは、テキストの色を赤色に設定し、太字にしています。

CSSクラス名の複数指定する3つの方法

Webデザインやフロントエンド開発において、複数のCSSクラスを指定することは実務でも多いです。

UIHACK
編集長
UIHACK 編集長

ここでは、CSSクラス名を複数指定する3つの方法について詳しく解説します。

①スペースでclassを区切る方法

【実行結果】スペースでclassを区切る方法

このタイトルは大きくて青い文字色です。
プチ解説

前章でも解説しましたが念のため記載しておきます。custom-headercustom-main-title という二つのclassを指定しています。

HTML

<div class="custom-header custom-main-title">このタイトルは大きくて青い文字色です。</div>
HTML
プチ解説

この例では、headerクラスとmain-titleクラスのスタイルが半角スペースで区切って指定されています。そのため、
要素に両方のクラスのスタイルが適用されます。

CSS

.custom-header {
  font-size: 24px;
}

.custom-main-title {
  color: #7dd0ff;
}
CSS
プチ解説

.custom-headerクラスのスタイルにより、テキストのフォントサイズが24ピクセルに設定されます。

custom-main-titleクラスのスタイルにより、テキストの色が青色(#7dd0ff;)に設定されます。

②カンマで区切ってclassを適用する方法

UIHACK
編集長
UIHACK 編集長

カンマで区切って複数のスタイルを指定する方法をご紹介します。
ただし、カンマを利用して一部の特定の状況でスタイルを指定する方法もありますが、一般的ではなく、使用には注意が必要です。

例えば、以下のような形でカンマを使用することができますが、メンテナンス性が低下する可能性があるため、私個人的には、推奨していない方法です。

【実行結果】カンマで区切ってclassを適用する方法

これはヘッダーのテキストです。
これはメインタイトルのテキストです。
プチ解説

.kanma-header.kanma-main-titleという2つのセレクタに同じスタイルを適用していますが、後にスタイルをカスタマイズする際に問題が生じる可能性があります。

HTML

<div class="kanma-header">これはヘッダーのテキストです。</div>
<div class="kanma-main-title">これはメインタイトルのテキストです。</div>
HTML
プチ解説

このHTMLコードは、2つの<div>要素を含んでいます。それぞれの要素にはclass属性が指定されています。

1つ目の要素にはkanma-headerというクラス名が、2つ目の要素にはkanma-main-titleというclass名が指定されています。

CSS

.kanma-header ,
.kanma-main-title {
  font-size: 24px;
  color: #d663ff;
}
CSS
プチ解説

.kanma-header.kanma-main-titleクラスのスタイルを定義しています。,(カンマ)でセレクタを区切ることで、複数のセレクタに同じスタイルを適用することができます。ここでは、.kanma-headerと.kanma-main-titleの両方に同じスタイルを適用しています。

③class名を.(ドット)で繋げて記述する方法

UIHACK
編集長
UIHACK 編集長

たとえば、.header.main-title というセレクタは、.header と .main-title という2つのクラス名を持つ要素にのみスタイルを適用します。

【実行結果】.(ドット)で繋げて記述する方法

このテキストは紫色で大きくなります。
このテキストは紫色で大きくなりません
このテキストは紫色で大きくなりません
プチ解説

最初の<div class=”dot-header-title main-title”>内のテキストだけが紫色で大きくなります。
理由は、以下で説明します。

HTML

<div>
  <div class="dot-header-title main-title">このテキストは紫色で大きくなります。</div>
</div>
<div class="dot-header-title">
  <div class="main-title">このテキストは紫色で大きくなりません</div>
</div>
<div class="main-title">
  <div class="dot-header-title">このテキストは紫色で大きくなりません</div>
</div>
HTML
プチ解説

さて、最初の<div>タグに囲まれたテキストだけ色が変更されるのはどうしてでしょうか。

なぜなら、この要素は .dot-header-title.main-title2つのクラス名を持つからです。他の要素は条件を満たさないため、CSSが適用されません。

この方法を使うことで、特定の要素に複数の条件を組み合わせて適用するCSSを指定することができるため、Webデザイナーとしてデザインを細かくコントロールする際に役立ちます。

CSS

.dot-header-title.main-title {
  font-size: 24px;
  color: #d663ff;
}
CSS
プチ解説

.dot-header-title.main-titleというセレクタは、特定の要素に同時に.headerクラスと.main-titleクラスの両方が指定されている場合にスタイルが適用されます。

このCSSは、特定の要素に複数のクラスが適用された場合に、それらのクラスに対して一括でスタイルを指定する際に便利です。上記のコード例では、指定された要素に、テキストが24ピクセルのフォントサイズで、紫色(#d663ff)の色になるように設定されています。

このセレクタを使用することで、.dot-header-titleクラス.main-titleクラスを両方持つ要素に対して同じスタイルを一度に適用できます。

CSS 擬似クラスと属性セレクタを組み合わせて要素を指定する方法

複数の属性セレクタを指定する方法を解説します。

UIHACK
編集長
UIHACK 編集長

属性セレクタは、要素の属性に基づいてスタイルを適用するためのセレクタです。複数の属性セレクタを指定することで、複雑な条件に基づいた要素の選択とスタイルの適用が可能となります。

【実行結果】属性セレクタを組み合わせ

プチ解説

このHTMLコードは、3つの異なる例を含んでいます。

HTML

<!-- Example 1 -->
<input type="text" required>
<!-- このテキストフィールドは紫色のボーダーが付きます。 -->

<!-- Example 2 -->
<a href="http://example.com" target="_blank">外部リンク</a>
<!-- このリンクは太字と青色の文字色が適用されます。 -->

<!-- Example 3 -->
<a href="https://example.com">内部リンク</a>
<!-- このリンクにはスタイルが適用されません。 -->
HTML
プチ解説

それぞれの例には特定の属性が指定されており、CSSによってスタイルが適用されます。
以下で詳しく解説します。

CSS

input[type="text"][required] {
  border: 1px solid #878787;
  background-color: #f3f3f3;
}

a[target="_blank"][href^="http"] {
  font-weight: bold;
  color: green;
}
CSS
プチ解説

input[type=”text”][required] の部分では、input要素のtype属性が “text” かつ required 属性が指定されたテキストフィールドに対して、灰色のボーダーと薄い灰色の背景色が適用されます。

a[target=”_blank”][href^=”http”] の部分では、a要素の中で、target属性が “_blank” かつ href属性の値が “http” で始まるリンクに対して、太字と緑色の文字色が適用されます。これにより、外部リンクに特定のスタイルが適用されます。

最後のリンクには特定のスタイルが適用されません。

擬似要素の使い方

CSSでは、要素の特定の状態や位置に対してスタイルを適用するためのと「擬似要素」で実装することができます。これらの機能を使用すると、動的なスタイル変更や要素の生成が可能となり、ウェブデザインの幅広い表現が実現されます。以下では擬似要素の指定方法と活用例について解説します。

【実行結果】擬似クラスの指定方法

擬似クラスの指定方法。

プチ解説

この例では、p要素「擬似クラスの指定方法」の前に赤色で「前置テキスト」、後に青色で「後置テキスト」を挿入しています。それぞれの擬似要素でコンテンツを指定し、スタイルを設定しています。

HTML

<p>擬似クラスの指定方法。</p>
HTML
プチ解説

擬似クラスを今回は<p>タグに適用します。

CSS

p::before {
  content: "前置テキスト: ";
  font-weight: bold;
  color:red;
}

p::after {
  content: " (後置テキスト)";
  font-style: italic;
  color:blue;
}
CSS
プチ解説

この例では、p要素の前に前置テキストを実装するために::before、後に後置テキストを挿入するために::after。それぞれの擬似要素でコンテンツを指定し、スタイルを設定しています。

あなたにオススメの本

【4年連続、売上第1位!】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】

読者の圧倒的な支持!シリーズ35万部突破の大ヒット!
¥2,486 (2023/08/01 15:07時点 | Amazon調べ)

class属性を複数指定する方法の結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、class属性を複数指定する方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • class属性を複数指定するテクニックとサンプルコード解説
  • CSSクラス名の複数指定する3つの方法
  • CSS 擬似クラスと属性セレクタを組み合わせて要素を指定する方法

もう一度、最初から「HTMLラジオボタンのデザインをカスタマイズする方法を簡単ステップで解説!」を読む↑

HTML・CSSでログイン画面を実装したい方は、ぜひ以下の記事もご覧ください。

HTMLで年と月を選択する入力欄を実装したい方は、ぜひ以下の記事もご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です