どうもイトサルです（@itosaru）です。
HTMLにclassやidというよくわからないものが出てきます。
これはどういう意味なんでしょうか？
HTMLを勉強しているとタグ以外にもこういったよくわからないものが多く出てきますよね。
classとidはHTMLタグに対して付与できるオプションで、
どちらもHTMLを装飾するためのCSSを書くために必要不可欠です。
このオプションをかっこいい言い方で「属性」といいます。
それぞれどんなケースで使用するかというと
class： 同じCSSを複数タグに適用したい場合
id：特定の1つのタグに対してのみCSSを適用したい場合
です。
今回はclassとは何か？そしてCSSでどうやって指定するのかをお伝えします。
CSSの書き方は下のあいさつを表示するページを例に使って説明しますね。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p>おはようございます</p>
<p>こんにちは</p>
<p>こんばんは</p>
</body>
</html>
idについて知りたい方はこちらの記事をご覧ください。
複数のものを1つにまとめるのがclass
class（クラス）という名前自体は聞いたことがあるのではないでしょうか。
学校の何年何組というクラス、はたまた飛行機の座席ではファーストクラスなどがありますね。
複数ある個々の要素を1つのまとまりとみなすものがclassです。
蛇足ですが人気アニメ作品「Fate」にもサーヴァントのクラスがありますね。
HTMLではclassを
<p class=”asa”>おはようございます</p>
というようにタグの中に「class=”つけたいclass名”」を記述します。
classの特徴は
- 好きにclass名をつけることができる
- 同じclassを複数のタグに同じ付与できる
- 1つのタグに対して複数のclassを付与できる
詳しく説明します。
好きにclass名をつけることができる
classは自分の好きな名前をつけることができます。
プログラムの変数のようにあらかじめ指定する必要はなく、好きなタグにclassを入力します。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p class="asa">おはようございます</p>
<p>こんにちは</p>
<p>こんばんは</p>
</body>
</html>classは複数のタグに設定できる
これがHTMLでclassを使う最大の理由です。
classは1つのまとまりの名称なので、複数のタグに対してつけることができます。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p class="asa">おはようございます</p>
<p class="aisatsu">こんにちは</p>//同じclass
<p class="aisatsu">こんばんは</p>//同じclass
</body>
</html>別々のHTMLタグにつけることもできますが、あとあと管理が大変になります。
ですのでclassは同じHTMLタグでまとめるのが一般的です。
1つのタグに対して複数のclassを設定できる
class=””の中に半角スペース区切りで1つのタグに対して複数のclassを設定することができます。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p class="aisatsu asa">おはようございます</p>//複数classを設定
<p class="aisatsu">こんにちは</p>
<p class="aisatsu">こんばんは</p>
</body>
</html>このように複数のclassにまたがったHTMLタグはよく見かけます。
ぜひ覚えておきましょう！
cssでclassセレクタを使う方法
cssのセレクタでclassを使うのは簡単です。
先頭にドット（.）をつけてclass名を記述し、その中にCSSの定義を入れていきます。
なんで先頭にドット？と疑問に思うかもしれませんがそういうものなのです。
試しに「asa」classの文字色を赤に変えてみましょう。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
/*asaクラスを指定したcss*/
.asa {
color: red;
}
</style>
</head>
<body>
<p class="aisatsu asa">おはようございます</p>
<p class="aisatsu">こんにちは</p>
<p class="aisatsu">こんばんは</p>
</body>
</html>
「おはようございます」の文字が赤になりました！
それではあいさつの文字をすべて太字に変えたいと思ったらどうすればいいでしょうか。
そう！「aisatsu」classをセレクタにしてCSSを適用しましょう！
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
/*asaクラスを指定したcss*/
.asa {
color: red;
}
/*aisatsuクラスを指定したcss*/
.aisatsu {
font-weight: bold;
}
</style>
</head>
<body>
<p class="aisatsu asa">おはようございます</p>
<p class="aisatsu">こんにちは</p>
<p class="aisatsu">こんばんは</p>
</body>
</html>
ちゃんと全ての「aisatsu」classのタグ要素が太字になりましたね！
このようにclassセレクタは一括でCSSを適用したい時にとても便利です。
まとめ：classはcssを一括で適用するためのオプション
今回はHTMLのclassについて説明しました。
classは複数のタグに対して一括でCSSを適用するための必須オプションです。
WEBページを作る際には必須になるものなのでぜひ覚えましょう。
ちなみにclass名をつけただけではページ上何も変化はありません。
あくまでもタグのオプションであるということを合わせて覚えておきましょう。
HTMLとCSSの勉強におすすめな本
もっと詳しくCSSのことを勉強したいなら
1冊ですべて身につくHTML & CSSと Webデザイン入門講座
の本がおすすめです！
CSSだけでなくHTMLの書き方やWEBのデザインまで細かく丁寧に説明してくれてます。
コードの図解はもちろん、勉強用のサンプルデータのダウンロードまでできるため、内容がとてもわかりやすく作られています。
この本を手元に実際にコーディングしていくことですぐに上達できますよ。
コメント