こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、idとclassについてです。
違いと使い方を解説します。
idとclassは、コーディングする上で絶対覚える必要があるので、基本をマスターしましょう。
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
idとclassとは？
idとclassとは、それぞれ属性で、htmlのタグに追加することができるものです。
属性とは、htmlのタグに色々な効果を追加できるものです。
前回のhtmlで言うと、hrefが属性になります。
<a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>上記コードのように、idとclassも同じように属性として追加することができます。
<body>
<div>
<h1 id="title">タグを使ってhtmlコーディングしよう！</h1>
<p class="lead">
こんにちは<br>
ユウです！
</p>
</div>
<p>
<a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>では、htmlの概要説明をしました。<br>
今回の#2では、タグを使ってhtmlコーディングをしていきます。
</p>
</body>h1タグとpタグにidとclassを追加しました。
値の「title」と「lead」は、任意の文字列でOKです。
ただ、数字から始まる文字列はNGなので、半角英字から始まる分かりやすい名前にしましょう。
idとclassの違い
idとclassの違いは、大きく2つあります。
| id | class | |
| 使用回数 | 1回 | 複数回 |
| 優先度 | 高い | 低い |
使用回数
idは、同じ名前のidはページ内で1回しか使えません。
classは、同じ名前のclassをページ内で何回でも使えます。
<!-- idの複数回はNG -->
<div>
<h1 id="title">タグを使ってhtmlコーディングしよう！</h1>
<p id="title">
こんにちは<br>
ユウです！
</p>
</div><!-- classの複数回はOK -->
<div>
<h1 class="title">タグを使ってhtmlコーディングしよう！</h1>
<p class="title">
こんにちは<br>
ユウです！
</p>
</div>優先度
同じタグにidとclassの両方がある場合、idが優先されます。
<!-- idが優先される -->
<div>
<h1 id="title" class="text">タグを使ってhtmlコーディングしよう！</h1>
<p>
こんにちは<br>
ユウです！
</p>
</div>他にも違いはありますが、この2つの違いを覚えておきましょう。
idとclassの使い方
説明で記述の仕方は触れましたが、実際にどのようにして使うか解説します。
idとclassの主な使い方は、スタイルを個別に適用させるために使います。
コードを使って説明します。
<body>
<div>
<h1 id="title">タグを使ってhtmlコーディングしよう！</h1>
<p class="lead">
こんにちは<br>
ユウです！
</p>
</div>
<p>
<a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>では、htmlの概要説明をしました。<br>
今回の#2では、タグを使ってhtmlコーディングをしていきます。
</p>
</body>@charset "utf-8";
div {
width: 90%;
max-width: 1000px;
margin: 0 auto 30px;
}
h1 {
text-align: center;
color: #ff0000;
font-size: 40px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
p {
font-size: 18px;
text-align: center;
}前回の#4のcssです。
このh1タグをid名に変更してみます。
@charset "utf-8";
div {
width: 90%;
max-width: 1000px;
margin: 0 auto 30px;
}
#title {
text-align: center;
color: #ff0000;
font-size: 40px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
p {
font-size: 18px;
text-align: center;
}id名に変更しました。
保存してブラウザで確認すると、変わらずスタイルが適用されていると思います。
次は、pタグをclass名に変更してみます。
@charset "utf-8";
div {
width: 90%;
max-width: 1000px;
margin: 0 auto 30px;
}
#title {
text-align: center;
color: #ff0000;
font-size: 40px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
.lead {
font-size: 18px;
text-align: center;
}保存してブラウザで確認すると、「こんにちはユウです！」のテキストだけスタイルが適用されていると思います。
解説
順番に解説します。
「#」「.」と先頭につける
cssにid名とclass名を記述するときは、idのときは「#」、classの時は「.」を先頭につけます。
深く考えず、記述のルールとして覚えましょう。
タグではなく、id名とclass名に変更したわけ
変更前はタグに対してスタイルを記述していましたが、id名とclass名に変更しました。
ここが、idとclassを使用する1番重要なところになります。
idとclassを使用することで、スタイルを個別に適用させることができます。
h1タグはページ内で1つしかないので、idに変更しても表示は変わらずあまり意味がありませんが、pタグはページ内に2つあります。
変更前はpタグにスタイルを記述していたので、ページ内の全てのpタグにスタイルが適用されていましたが、classに変更すると、そのclassがあるタグにだけスタイルを適用させることができます。
idとclassがないと、同じタグに同じスタイルが適用されてしまうので、デザイン通りにコーディングすることができなくなってしまいます。
このように、idとclassを使って個別にスタイルを記述してコーディングをしていきます。
注意点
idとclassの使い方で注意したいことがあります。
idに関しては、同じidはページ内で1つしか使えないので、他でも使用しそうなスタイルの場合は、classで書くようにしましょう。
もうひとつは、何でもかんでもタグにidとclassをつけてはいけません。
表示上は問題ありませんが、全てのタグにidとclassがあると、それだけcssの記述が多くなり、管理も大変になってしまいます。
それに、ごちゃごちゃしてしまいソースコードが汚く見えてしまいます。
タグとclassを上手く使い、無駄のない管理しやすいコードにすることが上達する近道です。
最後に
以上、idとclassの違いと使い方について解説しました。
idとclassはとても便利で重要です。
htmlコーディングには必ず必要になるので、しっかり身につけましょう。
次回もcssについて、タグとclassの効率良いスタイルの記述方法について解説したいと思います。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント