どうもイトサルです（@itosaru）です。
HTMLにclassやidというよくわからないものが出てきます。
これはどういう意味なんでしょうか？
HTMLを勉強しているとタグ以外にもこういったよくわからないものが多く出てきますよね。
classとidはHTMLタグに対して付与できるオプションで、
どちらもHTMLを装飾するためのCSSを書くために必要不可欠です。
このオプションをかっこいい言い方で「属性」といいます。
それぞれどんなケースで使用するかというと
class： 同じCSSを複数タグに適用したい場合
id：特定の1つのタグに対してのみCSSを適用したい場合
です。
今回はidとは何か？そしてCSSでどうやって指定するのかをお伝えします。
CSSの書き方は下のサルを表示するページを例に使って説明しますね。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p>イトサル</p>
<p>ニホンザル</p>
<p>チンパンジー</p>
</body>
</html>
classについて知りたい方はこちらの記事をご覧ください。
特定の1つを識別するものがid
id（アイディー）は皆さんよく聞く単語だと思います。
SNSのログインIDやApple IDなどがありますよね。
自分自身を特定するためのものがidです。
idは”identification”(識別)の略称です。
HTMLではidを
<p id=”itosaru”>イトサル</p>
というようにタグの中に「id=”つけたいid名”」を記述します。
idの特徴は
- 好きにid名をつけることができる
- 同じidを複数のタグに付与できない
- 1つのタグに対して1つ以上のidを付与できない
詳しく説明します。
好きにid名をつけることができる
idは自分の好きな名前をつけることができます。
プログラムの変数のようにあらかじめ指定する必要はなく、好きなタグにidを入力します。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p id="itosaru">イトサル</p>
<p>ニホンザル</p>
<p>チンパンジー</p>
</body>
</html>同じidを複数のタグに付与できない
同じページ内でidは使い回すことができず、1つのタグにしか付与できません。
想像がつくかもしれませんが、理由は同じidがあると特定することができなくなるからですね。
同じidは絶対に使わないようにしましょう。
【悪い例】
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p id="itosaru">イトサル</p>//同じidは使いまわさない
<p id="itosaru">ニホンザル</p>//同じidは使いまわさない
<p id="itosaru">チンパンジー</p>//同じidは使いまわさない
</body>
</html>【良い例】
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p id="itosaru">イトサル</p>
<p id="nihonzaru">ニホンザル</p>
<p id="chimpanzee">チンパンジー</p>
</body>
</html>1つのタグに対して1つ以上のidを付与できない
すでにidを付与しているタグに対してはさらに追加でidを付与することができません。
idは1つだけ付与するようにしましょう。
【悪い例】
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p id="itosaru saru">イトサル</p>//idを2つ付与している
<p id="nihonzaru saru">ニホンザル</p>//idを2つ付与している
<p id="chimpanzee saru">チンパンジー</p>//idを2つ付与している
</body>
</html>【良い例】
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
</style>
</head>
<body>
<p id="itosaru">イトサル</p>
<p id="nihonzaru">ニホンザル</p>
<p id="chimpanzee">チンパンジー</p>
</body>
</html>cssでidセレクタを使う方法
cssのセレクタでidを使うのは簡単です。
先頭にハッシュ（#）をつけてid名を記述し、その中にCSSの定義を入れていきます。
なんで先頭にハッシュ？と疑問に思うかもしれませんがそういうものなのです。
試しに「itosaru」idの背景色を変えてみます。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イトサルブログ</title>
<style>
#itosaru {
background-color: grey;
}
</style>
</head>
<body>
<p id="itosaru">イトサル</p>
<p id="nihonzaru">ニホンザル</p>
<p id="chimpanzee">チンパンジー</p>
</body>
</html>
イトサルの背景色がグレーになりました！
まとめ：idは特定のタグだけを装飾するためのオプション
今回はHTMLのidについて説明しました。
idは特定の1タグに対してCSSを適用するためのオプションです。
WEBページのロゴを装飾するなどで使う機会があるのでぜひ覚えましょう。
ちなみにid名をつけただけではページ上何も変化はありません。
あくまでもタグのオプションであるということを合わせて覚えておきましょう。
HTMLとCSSの勉強におすすめな本
もっと詳しくCSSのことを勉強したいなら
1冊ですべて身につくHTML & CSSと Webデザイン入門講座
の本がおすすめです！
CSSだけでなくHTMLの書き方やWEBのデザインまで細かく丁寧に説明してくれてます。
コードの図解はもちろん、勉強用のサンプルデータのダウンロードまでできるため、内容がとてもわかりやすく作られています。
この本を手元に実際にコーディングしていくことですぐに上達できますよ。
コメント