CSS初心者でもわかる！クラスの使い方を基礎からマスター

プログラミングを勉強し始めたけど、クラスの使い方がわからずCSSの最初で躓いてしまった。

そんなあなたにもわかりやすく丁寧に、クラスの使い方を基礎から応用まで解説します。

HTMLとCSS、タグの機能

クラスについて解説する前に、HTMLとCSS、HTMLタグについて説明します。これらの用語はこの後も出て
きますので、ここで一度確認しておきましょう。

HTMLとCSS

HTMLとは、Webページを作るときの設計図です。

「ここは太文字にする」「ここは箇条書きにする」など、テキストの大枠を指定します。

テキストだけのWebページであれば、HTMLだけで作ることができます。
一方、CSSではHTMLで作ったテキストの文字の大きさや色、配置などを記述します。

CSSを記述することで、Webページの見た目を綺麗に整えることができます。

HTMLで作った設計図を元にして、実際にWebページを作る指示を出すというイメージです。

CSSは、設計図であるHTMLがないと機能しません。

タグ

タグとはHTMLタグとも言われ、HTMLでテキストの前後を挟むことで機能します。

タグで囲まれた1つの塊を要素と呼びます。

タグは層構造をとることができ、一番の外枠が親要素、その1つ内側が子要素、さらに内側が孫要素です。
それぞれのタグには名前を付けることができ、そのクラス名をCSSで指定することで、そのタグのスタイル
を決められます。

よく使うタグは、囲んだ要素をグループにする「div」や段落を作る「p」、画像を挿入する「img」などです。

CSSクラスの基礎

プログラミング初心者が、初めに勉強するHTMLやCSSで頻繁に登場するクラス (class)。

ここでは、どんなときにクラスを使うのか、その役割について基礎から解説します。

CSSセレクタ「クラス」とは？

クラスとは、何種類もあるCSSセレクタの1つで、正式には「クラスセレクタ」と呼びます。

CSSセレクタは、CSSで記述した内容をHTMLのどの部分（要素）に反映させるかを指示するものです。クラスセレクタの
他には、全称セレクタやidセレクタなどがあります。
あとで詳しく説明しますが、HTMLでタグの間に「class=”クラス名”」と記述すると、その要素を「クラス名
」という名前を付けることができます。

クラスの役割

クラスセレクタの役割は、HTMLでクラスを記述した要素のカラーやサイズなどの装飾です。

CSSで「.クラス名」と指定して、その後に装飾の内容を記述すると要素を装飾することができます。
CSSとHTMLは連動しているため、CSSで指定したクラス名への装飾は、HTMLで記述した同じクラス名の全
てに反映されます。これは、同じ装飾の要素を複数作りたいときに、とても便利です。

あとで解説しますが、違うクラス名がついていても同じ装飾を一度に行うこともできます。

クラスとidの違い

idセレクタは、クラスセレクタと同じく要素の装飾に使われます。

HTMLタグで「id=”id名”」と記述すると、CSSでこのid名の付いた要素を装飾することができます。
ここまで聞くと、クラスセレクタとidセレクタは、名前が違うだけで同じものと思うかもしれません。

しかし、クラスセレクタとidセレクタは、その適用範囲とCSSでの記述方法が異なります。

また、クラスセレクタは何回も使用できるのに対し、idセレクタは1つのWebページに対して1回しか使えません。

idセレクタは主にページのタイトルなどに使用されます。

CSSクラスの使い方

クラスについて基本的な知識を押さえたら、次は実際にクラスを使ってみましょう。

ここでは、クラスを使うときのルールから、CSSでの記述までを解説します。

クラス名を付けるときのルール

クラスにはクラス名を付けて使いますが、クラス名は何でも良いわけではありません。

使用できる文字や記号が制限されており、付け方のルールもあります。

クラス名に使用できる文字と記号

クラス名に使えるのは、半角英数字と2種類の記号だけです。日本語は使用できません。
クラス名に使える記号は、アンダーバー（_）とハイフン（-）です。

それ以外の記号は使えませんので注意しましょう。

半角英数字は大文字、小文字ともに使うことができます。

クラス名の付け方

半角英数字とアンダーバー、ハイフンなら、どんなクラス名を付けても良いのかと言うと、そうではありま
せん。

記号が頭文字にくるクラス名は使えない決まりです。

クラス名の頭文字は、必ず半角英数字にします。
また、半角英数字は大文字と小文字、両方とも使用可能なため、両者は区別されます。

そのため、CSSを記述するときに大文字と小文字を間違えると、出力されないので注意が必要です。

クラスをHTMLで指定する

CSSでクラスを使って装飾するためには、まずHTMLの要素にクラス名を付ける必要があります。

基本的な記述方法は以下のとおりです。

「タグ」にはpやh、divなど、必要に応じたHTMLタグを入れます。

「クラス名」は前項のクラスを使うときのルールに乗っ取り、任意のクラス名を記述します。
<タグ class=”クラス名”>テキスト</タグ>
これで、HTML側でのクラス名の指定は完了です。

このクラス名をCSSで記述すれば、スタイルの装飾ができます。

CSSでクラスを使う

HTMLでクラスを指定しても、CSSに記述しないと装飾はできません。

以下のように、HTML側で任意の要素に付けたクラス名を指定して、CSSを記述することで装飾ができます。

「/クラス名部分の要素を装飾するCSS/」

には、カラーやサイズなどの任意のCSSを記述してください。

クラス名の前にドット(.)を入れるのを忘れないようにしましょう。
.クラス名 {
/クラス名部分の要素を装飾するCSS/
}
HTML側のクラス名指定とCSS側での出力をして、初めて指定した要素の装飾がされます。

クラスの装飾が反映されないときの対処方法

CSSで正しく記述をしても、実際のWebページに指示が反映されないことがあります。

その原因として、以下の2つが考えられます。

意外と多いのが、クラス名を付けるときのルールに反したクラス名を指定していること。

ルールの項で説明したように、自分で付けたクラス名がルールに合っているかをもう一度確認しましょう。
ページに反映されないもう1つの原因としては、指定したクラスの優先順位が低いことが考えられます。

CSSでは、どの記述を適用するかの優先順位があります。

優先順位がないと、要素に対する指示が重複して上手く反映できないからです。

CSSの優先順位は、id>クラス>HTMLタグです。
また、クラスが複数指定されていたり、同じクラスへの指定は後に記述される方が優先されたり、というル
ールがあります。

CSSのクラスが上手くページに反映されないのは、この優先順位が働いて、別の指示が動いてしまっていることが原因かもしれません。

優先順位のルールを確認して、自分が記述したコードに該当する場所がないかをチェックしてみてください。

差がつくクラスの使い方

基本的なクラスの使い方は、前項で説明しました。

ここでは、クラスの使い方の応用について解説します。

複数のクラスを指定する

CSSでは、複数のクラスを同時に指定することができます。
例えば、HTMLで「クラス名１」、「クラス名１　クラス名２」という2つのクラスを記述したとします。

このとき、以下のようにCSSを記述するとどうなるでしょうか？

クラス名を2つ並べて記述すると、「クラス名１」かつ「クラス名２」を装飾するという指示になります。

つまり、「クラス名１」の要素は装飾されず、「クラス名１　クラス名２」の要素だけが装飾されるのです。

子要素を指定する

要素が層構造になっている場合には、子要素のクラスを指定することで、より細かな指示を与えます。
.親要素のクラス名 .子要素のクラス名 {
/クラス名部分の要素を装飾するCSS/
}
このようにCSSを記述すると、親クラスの中の子クラスだけに装飾することができます。

CSS初心者でもわかる！クラスの使い方　まとめ

Webページを作成するときに必須となるHTMLとCSS。

今回はHTMLでのクラス名の付け方と、CSSで装飾するときのクラスの使い方について解説しました。
クラスの使い方をマスターすれば、思い通りのWebページを作るのに一歩前進できます。ここで解説した内
容をしっかりと理解して、プログラミング学習を進めていってくださいね。