今回はHTMLで使われるclassの使い方について解説をしていきます！HTMLのタグで使われるclassが何を意味しているのか、分からない初心者の方もいるのではないのでしょうか？この記事では、
- classとは
- classの使い方
- 一つのタグで複数のclassを使う方法
- classとidの違い
について解説をしていきます。わかりやすいコードを交えて解説していくのでぜひ、ご覧ください！
classとは
それではclassとは何かを解説していきます。classはHTMLのタグに属性として用意されています。
そしてこのclassを目印にして、CSSやJavaScriptで装飾やいろいろなプログラムを実行させます。
classの使い方
それでは早速、簡単なclassの使い方について見ていきましょう。こちらのコードをご覧ください。
<style>
.text {
color: blue;
}
</style>
<html>
<p class="text">テキストテキストテキストテキストテキスト</p>
</html>
実行結果
ここでは段落を表すpタグに対して、「class="text"」を適用させています。
そこでCSS上では文字の色を変えるために、textというclassが適用されているものに対して実際にCSSを適用させています。このようにclassは何かの目印として使われています。
一つのタグで複数のclassを使う方法
classは一つのタグに一つだけというわけではなく、複数のタグを付けることも出来ます。こちらのコードをご覧ください。
<style>
.text {
color: blue;
}
.isOpen {
text-decoration: underline;
}
</style>
<html>
<p class="text">テキストテキストテキストテキストテキスト</p>
<p class="text isOpen">テキストテキストテキストテキストテキスト</p>
<p class="text">テキストテキストテキストテキストテキスト</p>
</html>
実行結果
このコードでは2つ目のpタグの行に、「isOpne」というclassを追加しました。「isOpen」ではアンダーラインを付けるという装飾を指定していますが、実際に装飾されていることが分かるかと思います。
このような指定はHTMLやCSSだけで現在開いてるページを明確にするためによく使われているので覚えておきましょう。
classとidの違い
ここでclassによく似たidについても知っておきましょう。classは先程のコードのように何回でも同じ名前のものを使うことが出来ます。しかし同じidは1ページに1つしか使うことが出来ません。
classはスタイルを統一させるためによく使われますが、idではヘッダーやフッター、サイドバーなどの1つのページに1つしかないものに対して使いましょう。
また、idはリンク先としても使うことが出来ます。ページのタイトルに対してidをつけ、目次をリンクにして移動先をページ内のそのidに指定すると簡単に目的のページまで飛ぶことができます。
まとめ
この記事ではHTMLでよく使われるclassがどういったものなのか、解説してきました。classが使われる場面については分かっていただけたでしょうか？
CSSやJavaScriptとHTMLを連携させるときには必須の属性になります。またidとの違いについても知っておくことで、使い分けを明確にしましょう。
