【CSS初心者入門】classとは何?使い方も解説! | WEBCAMP NAVI
【1月の受講枠も残りわずか】

【CSS初心者入門】classとは何?使い方も解説!

みなさんはCSSの学習をしていませんか?

CSSを学習する時に「class」が使えることは基本となっています。

今回の記事ではclassの使い方を解説します!

classとは

classとは、正確にはクラスセレクタと呼ばれます。クラスとは「分類」などと考えるとわかりやすいかもしれません。

クラス名(分類名)を使った指定では、そのクラス名が付けられた要素にのみ、独自のスタイルを適用させることができます。


----------------------------------------------------------------------------------------------------------------------------------

国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%!
あなたも、IT業界で輝くエンジニアになりませんか?
本気で人生を変えたい方は、ぜひ無料カウンセリングへ!

\参加者満足度99%
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

記述方法

クラスセレクタの記述方法は『.』の後にクラス名を記述すればOKです。文字間に半角スペースなどは含んではいけませんのでご注意ください。

要素名に続けてクラス名を指定する方法と、クラス名だけで指定する方法があります。どちらの場合も、クラス名はピリオド( . )に続けて記述します。

下記の例では、クラス名だけの定義ですので、example というクラス名が付けられた全ての要素に、このスタイルが適用されることになります。

CSS
.example { color: red; }

次の例では、p要素に付与されたexampleクラスにのみこのスタイルが適用されます。

CSS
p.example { color: red; }

命名規則

クラス名を付ける際には、以下の点に注意してください。

大文字と小文字の区別があります。使用できる文字は、半角の英数字、ハイフン( – )、アンダーバー( _ )です。アンダーバー( _ )をクラス名に含めると環境によっては正常に動作しない場合があります。アルファベットで始めなければなりません。(数字や記号で始めてはならない)

複数クラス

クラスは一つだけというわけではなく、次のように、複数のクラス名を同時に指定することもできます。(半角スペースで区切って記述します)

CSSは後の設定が有効になりますので、同一プロパティは上書きされてしまうことに注意してください。

HTML
<p class="example example2 example3">複数クラスの指定</p>

class属性とid属性の役割の違い

「class」と同じような記述として、「id」というものがあります。

記述方法は似ていますが、役割と、使用上の違いがありますので注意が必要です。

class:

「分類名を割り当てる」ための役割があります。そのため、 同じclass名を、1ページ中に何度でも使用することが可能となっています。

id:

「固有名を割り当てる」ための役割があります。そのため、同じid名は、1ページ中に1度しか使用することができず、重複することはできません。

class属性が対象の「種類・分類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。
ですから、1ページ中に同じid名は1度しか使えません。

一度しか使わない場合は違いを意識しなくても動作しますが、違いはしっかりと理解しておいてください。


----------------------------------------------------------------------------------------------------------------------------------

転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

サンプル


&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;class&lt;/title&gt;
&lt;style type="text/css"&gt;
p.example { color: blue; }
p.example2 { color: green; }
.example { color: red; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;このテキストには適用されません&lt;/p&gt;
&lt;p class="example"&gt;このテキスト色は青色になります&lt;/p&gt;
&lt;p&gt;&lt;strong class="example"&gt;このテキスト色は赤色です&lt;/strong&gt;&lt;/p&gt;
&lt;p class="example example2"&gt;このテキスト色は緑色になります&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

まとめ

初心者の方向けにclassを紹介していきましたが、いかがでしたか?

classを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点