classって何？CSSと組み合わせて使う方法を徹底解説

こんにちは！ ライターのナナミです。

CSSを指定する時、

あの要素はこの見た目にしよう！
でもこの要素はまた違う色で…

と、要素ごとに色や形を変えて配置したいですよね。

今回はそんな時に使える要素のグループ分け、classについて解説していきます。

この記事は下記の流れで進めていきますね。

classはCSSを使う上での必須スキルです。
バッチリ覚えて使えるようになりましょう！

classとは？

classは、HTMLタグにつけるグループ分けの目印です。

例えば、下記のようなレイアウトを作りたいとしましょう。

この時、左右それぞれ違う見栄えが必要になります。
ただし、縦に並んでいる部分は同じCSSで指定したいですね。

こんな時、それぞれのまとまりにグループ名をつけてあげれば、まとめてCSSを指定できます。
このグループ名がclassなのです。

idと違ってなんども使える

同じように要素に名前をつけられるidというものがあります。
しかしidは、1ページ内で2つ同じ名前をつけることができません。

idはその要素1つだけ、オンリーワンの名前をつけるものだからです。

それに対してclassは、制限なく何度も使うことができます。
その要素1つだけでなく、グループとしての名前が付与されているからです。

なので、後から要素を追加した場合、今まで使っていたclassをつければ同じ仲間として扱うことができます。

idについては、下記の記事で詳しく解説しています。
ぜひ併せてご覧ください。

どんな時にclassを使う？

classは、1ページ内でも何度でも使えるのが大きな魅力です。

複数の要素を同じ見栄えにしたい時、classをつけてあげれば一気に指定することができます。

ただ一つ、その要素だけという場合には、idの方が向いていることもあります。
ぜひ下記の記事も併せて読み、どちらが向いているのかを確認してみてください。

classの使い方

では、classの設定方法を解説していきましょう。

設定はとても簡単。
HTMLのタグ名の後ろにclass=”class名”と入れるだけです。

HTML

<div class="test test2">
    内容が入ります。
</div>

これでこの<div>タグ3つにtestというclassが付与されました。

class名をつける時のルール

class名を指定する際、使える文字の制限と、命名のルールがあります。

指定の際は注意が必要なポイントもありますので、しっかり覚えておきましょう。

一つの要素に複数のclassをつける

classは一つの要素に複数指定することもできます。

指定方法は簡単、class名とclass名の間を半角スペースで空けて記述するだけです。

HTML

<div class="test test2">
    内容が入ります。
</div>

一番上の<div>タグにはtestとtest2、<div>タグにはtestとtest3が付与された状態になりました。

CSSと組み合わせて使おう

classをHTML側で指定しただけでは、classの力は半分も出せていません。

真価を発揮するのが、CSSを書く時です。

CSSを指定する際、どの要素に適用させるのかを明確にしてあげなければなりません。
明確にするための指定を、セレクタと言います。

classはセレクタとして使うことができます。
グループごとで見栄えを揃えて指定できるわけです。

指定方法は簡単、頭に「.（ピリオド）」をつけて、class名を記述するだけです。

CSS

.class名{
    /* class名がついている要素のCSS */
}

では、classをセレクタにして、リストの見栄えを調整してみましょう。

HTML

<ul class="left_cont">
    <li class="left_cont-inner">テキストが入ります</li>
    <li class="left_cont-inner">テキストが入ります</li>
    <li class="left_cont-inner">テキストが入ります</li>
    <li class="left_cont-inner">テキストが入ります</li>
</ul>
<ul class="right_cont">
    <li class="right_cont-inner">
        <h2>
            見出しが入ります
        </h2>
        <p>
            本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
        </p>
    </li>
    <li class="right_cont-inner">
        <h2>
            見出しが入ります
        </h2>
        <p>
            本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
        </p>
    </li>
</ul>

CSS

ul {
    margin:  0;             /* デフォルトCSS打ち消し */
    padding:  0;            /* デフォルトCSS打ち消し */
    list-style:  none;      /* デフォルトCSS打ち消し */
}

.left_cont {
    width:  30%;            /* 幅指定 */
    display: inline-block;  /* インラインブロックにする */
    border: solid 1px;      /* 枠線指定 */
}

.right_cont {
    width: calc(70% - 8px); /* 幅指定 */
    display: inline-block;  /* インラインブロックにする */
    vertical-align:  top;   /* 横の揃え */
}

.right_cont-inner {
    border:  solid 1px;     /* 枠線指定 */
    padding: 0 20px;        /* 余白指定 */
    margin-bottom:  20px;   /* 要素同士の空き指定 */
}

.left_cont-inner {
    padding:  10px;         /* 余白指定 */
}

.left_cont-inner:nth-child(odd) {
    background-color: #ddd; /* 背景色指定 */
}

それぞれグループごとに一括指定ができましたね！

複数のclassで指定する

CSSを適用する時も複数のclassを指定することが可能です。
単純につなげて書けばOK！ピリオドだけお忘れなく。

CSS

.class名.class名2{
    /* class名とclass名2がついている要素のCSS */
}

「testというclassがついている、かつtest2というclassがついている要素」
という指定ができるわけです。

HTML

<ul class="test_cont">
    <li class="test">
        背景色はつきません
    </li>
    <li class="test test2">
        testとtest2が両方ついているので、背景色がつきます
    </li>
</ul>

CSS

ul {
    margin:  0;                 /* デフォルトCSS打ち消し */
    padding:  0;                /* デフォルトCSS打ち消し */
    list-style:  none;          /* デフォルトCSS打ち消し */
}

.test {
    border:  solid 1px;         /* 枠線指定 */
    padding: 20px;              /* 余白指定 */
    margin-bottom:  20px;       /* 要素同士の空き指定 */
}

.test.test2 {
    background-color: #ace5ff;  /* 背景色指定 */
}

子要素を指定する

classでの指定は、特定のclassの中にある特定のclassという指定もできます。
親要素のclassを先に記述し、半角スペースを開けて子要素のclassを記述します。

CSS

.class名 .class名2{
    /* class名の子要素の中にあるclass名2がついている要素のCSS */
}

「testというclassの親要素の中にあるtest2というclassの要素に適用する」
ということができるのです。

HTML

<ul class="test">
    <li class="test3">
        背景色はつきません
    </li>
    <li class="test2 test3">
        testがついている要素のtest2なので、背景色がつきます
    </li>
</ul>

CSS

ul {
    margin:  0;                 /* デフォルトCSS打ち消し */
    padding:  0;                /* デフォルトCSS打ち消し */
    list-style:  none;          /* デフォルトCSS打ち消し */
}

.test3 {
    border:  solid 1px;         /* 枠線指定 */
    padding: 20px;              /* 余白指定 */
    margin-bottom:  20px;       /* 要素同士の空き指定 */
}

.test .test2 {
    background-color: #ace5ff;  /* 背景色指定 */
}

CSSが適用される優先順

前の項目のように、classはCSSを指定する目印としての役割を果たしてくれます。

しかし目印になるのはclassだけではありません。
idやHTMLタグ自体も、同じように指定をすることができます。

その場合、どの指定で書かれたCSSなのかによって、CSSが適用される優先順位が変わってきます。

下記のように、idで指定されたものがもっとも優先され、HTMLタグでの指定は優先度が低いです。

この並びを基本とし、追加で2つのルールがあります。

それを踏まえてCSSを書くと、下記のようになります。

HTML

<ul class="test_cont">
    <li class="test_cont-inner">
        基本は水色背景です。
    </li>
    <li class="test_cont-inner test_cont-inner2">
        複数指定のCSSが記述されているので緑の背景になります。
    </li>
    <li class="test_cont-inner3">
        指定はピンクですが、その後に青の指定が書かれているので、青色が優先されます。
    </li>
</ul>

CSS

ul {
    margin:  0;                 /* デフォルトCSS打ち消し */
    padding:  0;                /* デフォルトCSS打ち消し */
    list-style:  none;          /* デフォルトCSS打ち消し */
}

.test_cont-inner {
    border:  solid 1px;         /* 枠線指定 */
    padding: 20px;              /* 余白指定 */
    margin-bottom:  20px;       /* 要素同士の空き指定 */
    background-color: #ace5ff;  /* 背景色指定 */
}

.test_cont-inner.test_cont-inner2 {
    background-color: #c8f792;  /* 背景色指定 */
}

.test_cont-inner3 {
    padding:  20px;             /* 余白指定 */
    border:  solid 1px;         /* 枠線指定 */
    background-color: #ffaec9;  /* 背景色指定 */
}

.test_cont-inner3 {
    background-color: #0066b7;  /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
}

書いたはずのCSSが適用されない…
逆に書いた覚えのないCSSが適用されている…

という時には、記述の順番やセレクタの指定をチェックしてみましょう。

まとめ

いかがでしたか？

CSSを適用させる要素を細かく決められるclass。
これは必須スキルですよね。

classを理解すれば、どんなデザインにも対応できるようになる上に、作業の効率化を図ることもできます。
ぜひ活用して、爆速コーディングしちゃってください！