HTML・CSS独学応援 3-7 「id属性とclass属性」

今までのの学習では、CSSのセレクタに<p>や<h1>を指定してきました。
webページを作るときには、<p>などは繰り返し使用します。

今回は、特定の<p>にのみCSSを付けたい場合などに使用する方法の紹介をします。

  • id属性
  • class属性

この2つを使用します。
それぞれの違いを学んでいきましょう。

どんな時に使うものか

HTMLにおいて「id属性」「class属性」の役割は以下のものになります。

”各要素に名前を付けて、名前によって区別ができるようにする”
どういうことか、実際に見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>id属性とclass属性</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>これは通常の段落です</p>
        <p>これは、id属性を付ける</p>
        <p>これはclass属性を付ける</p>
        <p>これは通常の段落です</p>
    </body>
</html>

<P>などは、HTML内で頻繁に利用します。
<p>に対して直接CSSを適応してしまうと
全てのものにCSSが適応されてしまいます。

これでは、思うように見た目を作ることができません。

そこで、必要な部分に名前を指定することで
個別にCSSを付けることができます。

これにより、思うようにデザインを変更することができます。
また、この2つは、全ての要素に対して
使うことができる特徴があります。

id属性とclass属性

2つの属性はHTMLにおいて、同じような役割を持っていますが、
書き方や、使う場面は違います。

少し詳しく見てみましょう。

id属性

id属性は、他のプログラミング言語と組み合わせて使うイメージです。

混乱を防ぐため、HTML・CSS独学応援シリーズでは、紹介のみにとどめます。

今後の学習のために、
ルールと書き方のみ紹介しておくきます。

  • HTMLの中に同じ名前は1までしかつけられない
  • CSSの属性名の前に#を付けてCSSを記入

HTMLコード

    <body>
        <p>これは通常の段落です</p>
        <p id="red">これは、id属性を付ける</p>
        <p>これはclass属性を付ける</p>
        <p>これは通常の段落です</p>
    </body>

CSSコード

#red {
    color: #fff;
    background-color: red;
}

上記HTMLのように、id属性の値に任意の名前を付けます。
CSSでは、先頭に#(シャープ)を付けて、名前を指定します。

これで、その名前の部分にのみ、適応することができます。

class属性

id属性同様に要素に名前を付けることができます。
class属性のルールと特徴は以下の通りです。

  • HTML内に同じ名前を付けられる
  • CSSの属性名の前に.(ドット)を付けて書く

id属性との大きな違いは、
class属性の場合HTML内に同じ名前を複数指定することができることです。

HTMLのコード

    <body>
        <p>これは通常の段落です</p>
        <p class="blue">これは、class属性を付ける</p>
        <p>これは通常の段落です</p>
        <p class="blue">これはclass属性を付ける</p>
    </body>

CSSのコード

.blue {
    color: #fff;
    background-color: blue;
}

HTMLでは、複数の箇所に同じCSSを適応したい場合が多くあります。
class属性を使って、同じ名前にしておくと
CSSを1つ書くだけで複数のHTMLに対応できるので便利です。

まとめ

HTMLの要素に名前を付けるものが「id属性」と「class属性」です。
他のプログラミング言語と組み合わせて、特別な役割を持たせたい時には「id属性」をしよう。
CSSの適応は、基本的に「class属性」っというざっくりした認識でOKです。

© 2021 ーれおの部屋ー