ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

classとidの使い方

classとidとは?

CSSを使うと、<h1>や<p>などの文字を大きくしたり、色を変えたりすることができるのは「CSSの基本的な書き方」で学習しましたね。

でも、この方法だと特定のタグ全てにスタイルが効いてしまうため、自由自在に操ることができません。
例えば、<p>の色を赤に指定した場合、そのホームページ内に出てくる全ての<p>が赤色に変わってしまいます。
これでは少し不便です。

従来の書き方では全てが変わってしまう

そこで、classとidといった要素を使い、CSSを自在に操る方法があります。

覚えておきたいポイント

classとidでCSSをコントロール

例えば、

p {
color:#F00;
}

このようなスタイルの場合、ページ内の<p>全てにスタイルが適用されてしまいます。(全て赤色になってしまいます)
これじゃあちょっと不便ですね。

そこで、classとidを使うことにより、任意の場所にだけスタイルを適用することができます。

CSSを自在に操る

CSSを自在に操るコツは、セレクタ名にあります。

セレクタ名は自分で自由に決めることができます。
必ずしも<h1>や<p>などのタグを入れる必要はありません。
下記のようなセレクタ名でもOKなんです。

.aka {
color:#F00;
}

ここで注目していただきたいのが、セレクタ名akaの前に.(ドット)が入っている点です。これは任意のタイミングで呼び出すことのできるスタイルであることを意味します。

h1やpなど、.(ドット)を付けずにセレクタ名を指定した場合、強制的にそのタグに対してスタイルが適用されてしまいますが、.(ドット)を付けることにより好きなタイミングで呼び出すことが可能です。

この.(ドット)がついたセレクタを、classセレクタといいます。

classセレクタの使い方

セレクタに.(ドット)が付いたスタイルを使うには、以下の方法で呼び出すことができます。

<p class="aka">テキストテキストテキスト</p>

任意のタグの後ろに、class="セレクタ名"を付けることにより、呼び出すことができます。(pとclassの間には半角スペースが入ります)
この場合、<p>で囲んだ「テキスト」の文字が赤色に変わります。

なお、classを指定した<p>だけにCSSが適用されますので、他の<p>には影響を与えません。

この<p>は文字の色を変えたいけれど、ここの<p>は変えたくないな・・・なんて時に便利です。

[classの適用例]

<p>テキストテキストテキスト</p>

<p class="aka">テキストテキストテキスト</p>

これをブラウザで表示すると、以下のような結果になります。

classセレクタをブラウザで表示した場合

自分の好きなタイミングで、好きな場所にスタイルを適用することができるので、非常に便利です。

覚えておきたいポイント

セレクタ名は自由に決めてOK!

セレクタ名は自由に決めてもOKです。
例えば、sakichinやhako、akairo、momoiro、dekamojiなど、好きな名前を付けることができます。

classとidの意味、使い分け

.(ドット)が付いたスタイルを呼び出すのがclassですが、もうひとつ、idを使ってスタイルを呼び出すこともできます。

#(シャープ)がついたセレクタを、idセレクタといいます。

idセレクタの使い方

idを使ってスタイルを呼び出す場合は、セレクタ名の前に#(シャープ)を付ける必要があります。

#midori {
color:#690;
}

#(シャープ)が付いたスタイルを使うには、以下の方法で呼び出すことができます。

<p id="セレクタ名">テキストテキスト</p>

classと同じように、指定した場所にのみスタイルを適用することができます。

classとidの違い

classとid、どちらでスタイルを呼び出しても結果は変わりません。読込速度が早いとか遅いとか、そんなこともありません。

classとidの違いは、「使用回数」にあります。

classは1ページ中に何度でも呼び出すことができますが、idは1ページ中に1度だけしか使うことができません。

まだCSSに慣れないうちは、1度しか使えないidなんて意味あるの?なんて思ったりもしますが、慣れてくるとそうでもないんです。

classとidは使用回数が違う

ホームページを制作していると、必ず「これは一度しか使用しない」スタイルが出てきます。
例:#wrapや#header、#footerなど

そこそこの規模のホームページになると、CSS周りもゴチャゴチャしてきますので、見やすいようにclassとidで使い分けたほうが、編集や修正の際に便利なんです。

この「さきちんWeb」のスタイルは100種類以上あるのですが、その中でidは3割ちょっと使っています。(数えてみたら、結構ありました・・・)

これが全部classになっちゃうと、スタイルを修正する際に探し出すのが大変です。

はじめのうちは慣れないかもしれませんが、徐々にclassとidを使い分けるようにするといいと思います。
もちろん、稀に全てclassで統一している人もいたりしますので、必ずしもclassとidを使い分けなければならないことはありません。

しかし、この先Web業界を目指す方や中~大規模のホームページを作りたい方、共同で作業する必要がある場合などは、自分だけではなく他人にもわかりやすいHTML・CSS構造とするために、classとidは使い分けたほうが良いでしょう。

覚えておきたいポイント

classとidは使いわけよう!

classは何度でも使い回すことができますが、idは一度しか使うことができません。なので、idは一度しか使わない要素(例えば、headerやfooter)などに使われることが多いです。

頻繁に呼び出すCSSはclassで定義し、一度しか使わないCSSはidで定義すると良いでしょう。

idを複数回使っても…

1ページ中にidを複数回使っても、正常にスタイルが適用される場合があります。でも、これはブラウザが気を利かせてくれているだけであって、文法的には大間違いです。必ず、classとidは使い分けるようにしましょう。

divでまとめて指定
« 前のページへ HTMLとCSSの紐付け

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。