更新日: 2017年3月23日
公開日: 2015年12月2日

idとclassをわかりやすく説明！ゼロから始めるHTML/CSS講座Vol13

ゼロから始めるHTML/CSS講座idとclass
id属性とclass属性
classを複数指定
課題

ゼロから始めるHTML/CSS講座idとclass

id属性とclass属性

これまでCSSのセレクタは要素(h1、pなど)を指定していましたが、p要素のように多用される要素の場合、同じ要素でも別なCSSを適用したい場合があります。そのような場合、HTMLのid属性とclass属性を利用します。

ファイル名:global.html,global.css


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>id属性・class属性</title>
    <link rel="stylesheet" href="global.css">
</head>
<body>
    <section>
        <h1 class="font36">font-sizeのpx指定一覧</h1>
        <p id="font12">font-size: 12px;</p>
        <p class="font24">font-size: 24px;</p>
        <p class="font36">font-size: 36px;</p>
    </section>
</body>
</html>


＃font12 {
    font-size: 12px;
}

.font24 {
    font-size: 24px;
}

.font36 {
    font-size: 36px;
}

同じp要素でも異なる文字の大きさで表示することができました。 HTMLのid属性とclass属性の役割は、各要素に任意の名前をつけ、名前によって要素を区別することです。

CSSはHTMLの「どこの部分の」「なにを」「どんな値にするか」を上記書式に従い書きますが、セレクタとしてid属性とclass属性の属性値(名前)を指定できます。

id属性の場合、属性値(名前)の前に「#」(シャープ)をつけることで、CSSを指定できます。

class属性の場合、属性値(名前)の前に「.」(ドット)をつけることで、CSSを指定できます。

このようにid属性とclass属性を利用することで同じp要素に別々なCSSを適用することができます。

id属性とclass属性はHTMLの属性の中でもグローバル属性

id属性とclass属性の違いは以下となります。

id属性
同じWebページ内でid属性の値が重複してはならない

class属性
同じWebページ内で同じclass属性の値を何度でも用いることができる

id属性はHTML内に同じ名前を1つしか指定できませんが、class属性は複数可能です。

サンプルではh1要素とp要素に「class="font36"」と同じ値のclass属性を指定することで、両方の文字サイズを36pxにしています。

id属性とclass属性使い分けに関して「1箇所しかCSSを適用しない場合はid属性を使う」という勘違いをする方がいますが、この場合もclass属性を利用して問題ありません。

最初は2つの使い分けが難しいかもしれませんが、積極的に利用することで慣れていきましょう。

classを複数指定

class属性の値は複数指定することができます。

まずはclassを複数指定した下記HTMLとCSSを作成してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>class属性</title>
    <link rel="stylesheet" href="class.css">
</head>
<body>
    <article>
        <h1 class="font36">class属性</h1>
        <section>
            <h1 class="font24 red">class属性とは</h1>
            <p>HTMLの属性の中でもグローバル属性と呼ばれており、全ての要素に記述することができます。</p>
        </section>
        <section>
            <h1 class="font24 green">class属性の特徴</h1>
            <p>同じWebページ内で同じclass属性の値を何度でも用いることができます。</p>
        </section>
        <section>
            <h1 class="font24 blue">class属性の値</h1>
            <p>class属性の値はスペースで区切ることで複数指定できます。</p>
        </section>
    </article>
</body>
</html>


.font24 {
    font-size: 24px;
}

.font36 {
    font-size: 36px;
}

.red {
    color: #ff0000;
}

.green {
    color: #00ff00;
}

.blue {
    color: #0000ff;
}

同じh1要素でも様々な文字の大きさと色で表示することができました。

class属性に複数の値を指定するには、値を半角空白で区切って記述します。

サンプルでは「font24」を共通で指定し、これとは別に色に関するclassをそれぞれ指定しています。

これを利用することで、より効率的で無駄の少ないCSSを記述することができます。

複数指定の使い方自体は簡単ですが、これを有効的に使うのはなかなか難しいです。実践的な課題の中でclass属性の使い方を意識しながら書くことで、より良い書き方を身につけていきましょう。

課題

以下と同じデザインになるCSSを作成してください。HTMLはchallenge_global.htmlを基礎とし、これに追記してください。

CSSファイル名: challenge_global.css ```

<!DOCTYPE html> 課題

#rrggbb指定で赤緑青を表示

赤は#ff0000

緑は#00ff00

青は#0000ff


![challenge_global-css-639](//s3-ap-northeast-1.amazonaws.com/mash-jp/staging/uploads/3501/ae168e6ae4816a7e68163c9fc9575bc779e6bb32.3510.original.png?1488165263)
 CSSで指定する必要があるのはcolorプロパティのみです。

<h4>NEXT LESSON ☛ <a href="https://blog.codecamp.jp/naming_rule/" target="_blank">命名規則</a></h4>
<h4>PREV LESSON ☛ <a href="https://blog.codecamp.jp/article_section/" target="_blank">article要素とsection要素</a></h4>