classとは

classとは、HTMLのタグの中に設定することができる属性の一つです。
主に、タグを一つのグループにまとめ共通のクラス名を与えることができます。

classを使うことで、同じスタイルを複数の要素に簡単に適用できるだけでなく、同じタグでも異なるグループに分けたり、同じグループ内で異なるスタイルを適用することも可能です。
これにより、コードが整理され、作業範囲が明確になり、管理がしやすくなります。

HTMLの記述例

HTMLでは、「class=""」 に適当なクラスを追加します。
また、複数classを指定する場合は、クラス名をスペースで区切って列挙します。

<!-- class="" が1つの場合 -->
<div class="text">これはテキストです。</div>

<!-- class="" が複数の場合 -->
<div class="text red border">これはテキストです。</div>

CSSの記述例

CSSでは、classはセレクタとして使用され、指定する際にはクラス名の前に「.」を付けます。
これにより、そのクラスが適用されたHTML要素に対してスタイルを設定することができます。

.text {
  font-size: 16px;
  color: darkblue;
}

classを使ってみよう！

それでは、先ほど説明したclassを使って、理解を深めましょう。

下記のコードをコピーし、classを使用することでどのようにスタイルが変化しているかブラウザでチェックしましょう。

See the Pen 270_classとは_001 by Yugo Harima (@yh-dezadezi) on CodePen.

ブラウザでの表示
ブラウザを表示して確認してみましょう。

実際にclassを使用してみていかがでしたでしょうか。
classをHTMLタグに付けることで、特定の部分に簡単にスタイルを適用できました。

例えば、「p-section」というクラスを複数の要素に追加すると、同じデザインを共有できます。
さらに、異なるクラス名を追加することで一部の要素には別のスタイルを適用でき、似た見た目の要素でも背景色や文字の色を微調整することが可能になります。
これにより、コードの管理が楽になります。

以上が、「classとは」についての説明でした。

次のステップで、「css設計 BEMについて」について説明していきます。