UI HACK 
※本ページはプロモーションが含まれています。
本記事は、「CSSでコーディングをする時に、複数のclassを適用できないかね…」と思いつつ
・HTMLの要素内に複数のclass属性を指定する方法
・複数のclass属性を指定する方法
・擬似クラスと属性セレクタの組み合わせでコーディングする方法
上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。
この記事では、「前半」では「複数のclassを指定する方法」を「後半」では「複数のclassを指定する3つの方法」や「擬似クラスと属性セレクタを組み合わせてコーディングする方法」を詳しく解説します。
プログラミング未経験の方でも、読みやすい内容なので、少しずつ試してみて、楽しく学んでくださいね。
それでは、ご一読ください！
Webデザインやフロントエンド開発において、要素にスタイルを適用する際に、class属性を使用することは一般的です。しかし、1つの要素に複数のスタイルを適用したい場合、どのようにして効果的にclass属性を複数指定するかが重要なポイントです。本記事では、class属性を複数指定するテクニックとその実際の使い方をサンプルコードを交えて解説します。
class属性を複数指定する方法
要素に複数のスタイルを適用するには、class属性にスペースで区切られた複数のクラス名を指定します。以下に、HTMLの要素に複数のスタイルを適用する方法を示します。
このテキストは赤くて太字です。尚且つ紫色の下線を指定しています。
red-boldとmain-titleクラスの両方が指定されており、両方のクラスのスタイルが適用されます。
HTML
<p class="red-bold main-title">このテキストは赤くて太字です。尚且つ紫色の下線を指定しています。</p><p>要素を使用して段落を作成しています。この段落要素には2つのクラス属性が指定されています：red-boldとmain-title。これにより、この要素に2つの異なるスタイルが適用されます。
CSS
.main-title {
border-bottom: 3px solid #e29afe;
}
.red-bold {
color: red;
font-weight: bold;
}.main-title: このクラスはborder-bottomプロパティを使用して、テキストの下に紫色の下線を3ピクセルの太さで描画します。色は#e29afe（紫色）で指定されています。
.red-bold: このクラスは、テキストの色を赤色に設定し、太字にしています。
Webデザインやフロントエンド開発において、複数のCSSクラスを指定することは実務でも多いです。
ここでは、CSSクラス名を複数指定する3つの方法について詳しく解説します。
①スペースでclassを区切る方法
前章でも解説しましたが念のため記載しておきます。custom-headerとcustom-main-title という二つのclassを指定しています。
HTML
<div class="custom-header custom-main-title">このタイトルは大きくて青い文字色です。</div>この例では、headerクラスとmain-titleクラスのスタイルが半角スペースで区切って指定されています。そのため、
要素に両方のクラスのスタイルが適用されます。
CSS
.custom-header {
font-size: 24px;
}
.custom-main-title {
color: #7dd0ff;
}.custom-headerクラスのスタイルにより、テキストのフォントサイズが24ピクセルに設定されます。
custom-main-titleクラスのスタイルにより、テキストの色が青色（#7dd0ff;）に設定されます。
②カンマで区切ってclassを適用する方法
カンマで区切って複数のスタイルを指定する方法をご紹介します。
ただし、カンマを利用して一部の特定の状況でスタイルを指定する方法もありますが、一般的ではなく、使用には注意が必要です。
例えば、以下のような形でカンマを使用することができますが、メンテナンス性が低下する可能性があるため、私個人的には、推奨していない方法です。
.kanma-headerと.kanma-main-titleという2つのセレクタに同じスタイルを適用していますが、後にスタイルをカスタマイズする際に問題が生じる可能性があります。
HTML
<div class="kanma-header">これはヘッダーのテキストです。</div>
<div class="kanma-main-title">これはメインタイトルのテキストです。</div>このHTMLコードは、2つの<div>要素を含んでいます。それぞれの要素にはclass属性が指定されています。
1つ目の要素にはkanma-headerというクラス名が、2つ目の要素にはkanma-main-titleというclass名が指定されています。
CSS
.kanma-header ,
.kanma-main-title {
font-size: 24px;
color: #d663ff;
}.kanma-headerと.kanma-main-titleクラスのスタイルを定義しています。,(カンマ)でセレクタを区切ることで、複数のセレクタに同じスタイルを適用することができます。ここでは、.kanma-headerと.kanma-main-titleの両方に同じスタイルを適用しています。
③class名を.(ドット)で繋げて記述する方法
たとえば、.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>さて、最初の<div>タグに囲まれたテキストだけ色が変更されるのはどうしてでしょうか。
なぜなら、この要素は .dot-header-titleと .main-title の2つのクラス名を持つからです。他の要素は条件を満たさないため、CSSが適用されません。
この方法を使うことで、特定の要素に複数の条件を組み合わせて適用するCSSを指定することができるため、Webデザイナーとしてデザインを細かくコントロールする際に役立ちます。
CSS
.dot-header-title.main-title {
font-size: 24px;
color: #d663ff;
}.dot-header-title.main-titleというセレクタは、特定の要素に同時に.headerクラスと.main-titleクラスの両方が指定されている場合にスタイルが適用されます。
このCSSは、特定の要素に複数のクラスが適用された場合に、それらのクラスに対して一括でスタイルを指定する際に便利です。上記のコード例では、指定された要素に、テキストが24ピクセルのフォントサイズで、紫色（#d663ff）の色になるように設定されています。
このセレクタを使用することで、.dot-header-titleクラスと.main-titleクラスを両方持つ要素に対して同じスタイルを一度に適用できます。
複数の属性セレクタを指定する方法を解説します。
属性セレクタは、要素の属性に基づいてスタイルを適用するためのセレクタです。複数の属性セレクタを指定することで、複雑な条件に基づいた要素の選択とスタイルの適用が可能となります。
この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>
<!-- このリンクにはスタイルが適用されません。 -->それぞれの例には特定の属性が指定されており、CSSによってスタイルが適用されます。
以下で詳しく解説します。
CSS
input[type="text"][required] {
border: 1px solid #878787;
background-color: #f3f3f3;
}
a[target="_blank"][href^="http"] {
font-weight: bold;
color: green;
}input[type=”text”][required] の部分では、input要素のtype属性が “text” かつ required 属性が指定されたテキストフィールドに対して、灰色のボーダーと薄い灰色の背景色が適用されます。
a[target=”_blank”][href^=”http”] の部分では、a要素の中で、target属性が “_blank” かつ href属性の値が “http” で始まるリンクに対して、太字と緑色の文字色が適用されます。これにより、外部リンクに特定のスタイルが適用されます。
最後のリンクには特定のスタイルが適用されません。
擬似要素の使い方
CSSでは、要素の特定の状態や位置に対してスタイルを適用するためのと「擬似要素」で実装することができます。これらの機能を使用すると、動的なスタイル変更や要素の生成が可能となり、ウェブデザインの幅広い表現が実現されます。以下では擬似要素の指定方法と活用例について解説します。
擬似クラスの指定方法。
この例では、p要素「擬似クラスの指定方法」の前に赤色で「前置テキスト」、後に青色で「後置テキスト」を挿入しています。それぞれの擬似要素でコンテンツを指定し、スタイルを設定しています。
HTML
<p>擬似クラスの指定方法。</p>擬似クラスを今回は<p>タグに適用します。
CSS
p::before {
content: "前置テキスト: ";
font-weight: bold;
color:red;
}
p::after {
content: " (後置テキスト)";
font-style: italic;
color:blue;
}この例では、p要素の前に前置テキストを実装するために::before、後に後置テキストを挿入するために::after。それぞれの擬似要素でコンテンツを指定し、スタイルを設定しています。
【4年連続、売上第1位！】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】
ポチップ
今回は、class属性を複数指定する方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。
- class属性を複数指定するテクニックとサンプルコード解説
- CSSクラス名の複数指定する3つの方法
- CSS 擬似クラスと属性セレクタを組み合わせて要素を指定する方法
もう一度、最初から「HTMLラジオボタンのデザインをカスタマイズする方法を簡単ステップで解説！」を読む↑
Twitterも見てみる？
