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

2021.09.09

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

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

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

【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き

classとは

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

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


「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

記述方法

クラスセレクタの記述方法は『.』の後にクラス名を記述すればOKです。文字間に半角スペースなどは含んではいけませんのでご注意ください。 要素名に続けてクラス名を指定する方法と、クラス名だけで指定する方法があります。どちらの場合も、クラス名はピリオド( . )に続けて記述します。 下記の例では、クラス名だけの定義ですので、example というクラス名が付けられた全ての要素に、このスタイルが適用されることになります。

CSS
.example { color: red; }
次の例では、p要素に付与されたexampleクラスにのみこのスタイルが適用されます。
CSS
p.example { color: red; }

命名規則

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

複数クラス

クラスは一つだけというわけではなく、次のように、複数のクラス名を同時に指定することもできます。(半角スペースで区切って記述します) CSSは後の設定が有効になりますので、同一プロパティは上書きされてしまうことに注意してください。

HTML


複数クラスの指定


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

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

「class」と同じような記述として、「id」というものがあります。 記述方法は似ていますが、役割と、使用上の違いがありますので注意が必要です。

class:

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

id:

「固有名を割り当てる」ための役割があります。そのため、同じid名は、1ページ中に1度しか使用することができず、重複することはできません。 class属性が対象の「種類・分類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。 ですから、1ページ中に同じid名は1度しか使えません。 一度しか使わない場合は違いを意識しなくても動作しますが、違いはしっかりと理解しておいてください。

サンプル

 

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

まとめ

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

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

【初心者向け】CSS(スタイルシート)基本の書き方を5ステップで解説

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5