【html/css】classの書き方を解説｜複数指定なども

この記事ではclassについて解説します。

前半はhtml側で、classのつけ方やクラス名に使える文字を。

後半はcss側で、classの指定の書き方や複数指定の方法を紹介します。

記事を読めばclassを使いこなせるようになるので、ご覧ください。

【html側】classの書き方

はじめに

ここでは、要素ということばを何度も使っています。

復習の意味を込めて、こちらをご覧ください。

【参考記事】htmlタグとは｜要素との違い・終了タグがいらないものも

ここでは、html側の話をしていきます。

classとはグループ分けすること

classとは要素をグループ分けするためのものです。

こちらをご覧ください。

<p class="a-group">グループA</p>
<p class="b-group">グループB</p>
<p class="a-group">グループA</p>

<p>にa-group・b-groupとつけました。

例えば、a-groupは文字の色を赤。

b-groupは文字の大きさを30pxにする、といった分け方ができます。

教室内で、裸眼・メガネ・コンタクトの生徒に分かれるイメージです。

また、classは違う要素に同じクラス名をつけれます。

<p class="a-group">グループA</p>
<p class="b-group">グループB</p>
<div class="a-group">グループA</div>
<h2 class="b-group">グループB</h2>

こちらは、年代問わず好みが共通するようなことです。

a-groupの人はカレー好きで、b-groupの人はアニメが好きとか。

※命名したクラスは何回でも使えます。

※classはhtml属性の1つです。
【参考記事】『imgのhtml属性での幅と高さの指定』の記事の「html属性」
クリックすると該当箇所にジャンプします。

classは他ページでも使い回しが可能

同じcssファイルを用いるなら、他のページでもクラスは使い回せます。

下の例をご覧ください。

どちらのページにもstyle.cssファイルを使っています。

なので、トップページの<h2>につけたclass="heading"を、お店紹介ページでも使えます。

文字色だったりををまとめて管理できるので、便利ですね。

【参考記事】『htmlのheadタグ』の記事の「<link>」
クリックすると該当箇所にジャンプします。

クラス名で使える文字

クラス名で使える文字と命名の注意点はこちらです。

• 使える文字と記号は、半角英数と( – )ハイフン、( _ )アンダーバー
• 英字は大文字、小文字で区別される
• 頭文字に数字や記号は使えない
• クラス名は ” ” で囲う(この記号も半角)

OK例

⚪︎ <section class=”sec02″>
⚪︎ <h2 class=”heading”>
⚪︎ <p class=”Paragraph”>

NG例

× <section class=”1-sec”>
× <h2 class=”%heading”>
× <p class=”-paragraph”>

NG例だとクラス名と認識されず、結果としてcss指定が効かなくなります。

※どのようなクラス名にすればいいかは、こちらの記事をご覧ください。
【参考外部サイト】
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ

要素にclassを複数つける書き方

クラスは1つの要素にいくつでもつけれます。

<div class="sample-1 sample-2 sample-3">

クラス名とクラス名の間には半角スペースを入れるのが決まりです。

※1つの要素に複数のclassをつける便利な点は、この記事の下で紹介します。
(classを複数つけて指定するにジャンプします)

【css側】classを使った指定方法

もう1度、要素について

ここでも要素ということばを使っています。

しつこくて、すみません。

今度はcss側の話です。

classだけを使った指定の書き方

class指定の書き方は先頭に半角の. (ドット)を、そのあとにクラス名を続けます。

※要素への指定方法は、cssの書き方｜指定の型を身につけるをご覧ください。

.heading {
　font-size: 24px;
}

具体例をどうぞ。

<p class="sample">1つ目のテキスト</p>
<p>2つ目のテキスト</p>
<p class="sample">3つ目のテキスト</p>

.sample {
  color: #ff0000; /* 赤色 */
}

1つ目と3つ目の文字が赤色になってますね。

同じ<p>要素でも、ここの<p>は色や大きさを変えたい。

そんな時に、classが使えます。

以下は、<h2>と<p>に同じクラスをつけた場合です。

<h2 class="sample">見出し</h2>
<p>１つ目のテキスト</P>
<p class="sample">２つ目のテキスト</p>

.sample {
  color: #0000ff; /* 青 */
}

<h2>と2つ目の<p>の文字色を変えることができました。

違う要素にも同じクラス名をつけデザインできるのが、便利なところ。

以下では、仕事で見かける3つの指定方法を紹介します。

• 要素にclassを複数つけての指定
• 「要素.クラス名 」での指定
• 「.クラス名.クラス名」での指定

要素にclassを複数つけての指定

複数のクラスをつけたやり方です。

以下のような使い方ができます。

<p class="sample-1 sample-2">１つ目のテキスト</P>
<p class="sample-1 sample-3">２つ目のテキスト</p>

.sample-1{
  color: #ff0000; /* 赤 */
  padding: 5px; /* 上下左右に内側の余白 */
  margin: 10px; /* 上下左右に外側の余白 */
  width: 200px; /* 幅 */
}
.sample-2{
  background-color: #f0f8ff; /* うすい青 */
}
.sample-3{
  background-color: #f5f5dc; /* ベージュ */
}

ご覧のように、同じ<p>要素における指定で文字色など多くは共通。

その中で背景だけ違う色にしたい時、複数のクラス名をつけるとそれが実現できます。

「要素.クラス名 」での指定

要素に続けてクラス名を書く指定方法です。

h2.sample{
　font-size: 24px;
}

こんな感じです。

※h2と.(ドット)の間にはスペースを入れないようにしましょう。

<h2 class="sample">見出し</p>
<p>１つ目のテキスト</p>
<p class="sample">２つ目のテキスト</p>

h2.sample{
  color: #ff0000; /* 赤 */
}

h2.sampleと書けば、クラス名にsampleとついた<h2>のみ適用されます。

2つ目の<p>にも同じクラス名がついてますが、文字は赤になっていません。

また、「要素.class名」の書き方を利用すると以下のような指定も可能です。

<h2 class="sample">見出し</h2>
<p class="sample">テキスト</p>

.sample{
  font-size: 24px
}
h2.sample{
  color: #ff0000; /* 赤 */
}
p.sample{
  color: #0000ff; /* 青 */
}

<h2>と<p>の文字の大きさは同じに。

文字は違う色になりましたね。

「.クラス名.クラス名」での指定

さいごは「.クラス名.クラス名」とする指定です。

まず、こちらをご覧ください。

1つ目と2つ目の<p>の背景色を変えようとします。

<p class="sample-1 sample-2">１つ目のテキスト</P>
<p class="sample-1 sample-3">２つ目のテキスト</p>
<p class="sample-2">3つ目のテキスト</p>

.sample-2{
  background-color: #f0f8ff; /* うすい青 */
}
.sample-3{
  background-color: #f5f5dc; /* ベージュ */
}

この時、1つ目の<p>にはsample-2。

2つ目の<p>にはsample-3とあるので、それを指定すればよさそう…

ですが、3つ目の<p>にもsample-2がついているので、1つ目の<p>と同じ背景色に。

つけたいのは、1つ目と2つ目の<p>だけ。

<p class="sample-1 sample-2">１つ目のテキスト</P>
<p class="sample-1 sample-3">２つ目のテキスト</p>
<p class="sample-2">3つ目のテキスト</p>

.sample-1.sample-2{
  background-color: #f0f8ff; /* うすい青 */
}
.sample-3{
  background-color: #f5f5dc; /* ベージュ */
}

こんな時、.sample-1.sample-2とクラス名を続けて書きます。

そうすれば、1つ目の<p>にしか指定があたらなくなります。

「.sample-1」と「.sample-2」の間にはスペースは入らないので気をつけましょう。

ちなみに要素にクラスが複数ついてる場合、その分だけ続けて書いてオッケーです。

.sample-1.sample-2.sample-3みたいな感じで。

参考サイト

この記事は、HTML Living StandardとCSS3をもとに書きました。

HTML Living Standardはhtmlの、CSS3はcssのルールブックみたいなものです。

両方とも、その最新版です。

• 要素・クラス・ID によるセレクター｜MDN Web Docs
• class「3.2.6.グローバル属性」｜HTML Living Standard
• 6.6. クラスセレクター「セレクター レベル 4」｜W3C

いずれも翻訳ありです。

やや専門的に書かれてるので、お時間ある方だけご覧ください。

まとめ

さいごに、今回のポイントをまとめました。

まずはクラスの命名と指定の書き方を覚えましょう。

それから、複数つけるなどの段階へと進んでみてください。

クラスを使わずに子孫要素に限定して指定する方法をご存知ですか？

子孫要素にクラスをつけなくても指定するやり方があります。

この指定を知っていれば、クラスをつける回数を減らせるので便利です。

「クラス指定は理解できた」という方は、ご覧ください。

子孫要素に限定して指定する

親要素の中にある子(孫)要素に対して、クラスをつけずに指定する方法を解説しています。うまく使いこなせば、クラスを増やさずコード量も減らすことができますので、ご覧ください。

yoncoichi.com

2023.06.01