スライドショー

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

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

CSSを指定する時、

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

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

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

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

【基礎】classとは何か
【基礎】classの指定方法
【発展】CSSと組み合わせて使おう
【発展】CSSには適用優先度がある

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

classとは?

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

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

class1

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

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

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

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

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

class2

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

class3

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

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

CSSとidの関係とは?要素に名前をつけて細かくデザイン指定しよう
更新日 : 2018年11月27日

どんな時にclassを使う?

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

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

class_4

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

CSSとidの関係とは?要素に名前をつけて細かくデザイン指定しよう
更新日 : 2018年11月27日

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をセレクタにして、リストの見栄えを調整してみましょう。

class5

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がついている要素」
という指定ができるわけです。

class6

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の要素に適用する」
ということができるのです。

class7

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タグでの指定は優先度が低いです。

id > class > HTMLタグ

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

優先度の追加ルール
・複数指定されていると優先度が高くなります。
・同じclassやidへの指定は、CSSファイルの下の行に記述されているものが優先されます。

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

class8

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説