CSSの「#」シャープと「.」ドットの意味、違いは？
CSSをみていると下記のように「#」シャープや「.」ドットとなにか英字が含まれている文字列がありますね。
#example{
○○
}
.example{
○○
}「#や.はどういう意味？どう違ってどう使い分けるの？」
CSSの「#」シャープと「.」ドットの意味と違い、使い分けを解説します。
「#」シャープはid
CSSに書かれる「#」シャープはhtmlのidを指しています。
<div id="example">html</div>
<style>
#example{
background: red;
}
</style>htmlのid="○○"とCSSの#○○が一致しているとき、そのhtmlタグにCSSが効くというものです。
○○は完全に任意です。半角英数ならOKです。頭が数字だとダメです。
ちなみに、正確にはシャープ「♯」ではなくハッシュ「＃」です。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
「.」ドットはclass
CSSに書かれる「.」ドットはhtmlのclassを指しています。
<div class="example">html</div>
<style>
.example{
background: red;
}
</style>htmlのclass="○○"とCSSの.○○が一致しているとき、そのhtmlタグにCSSが効くというものです。
○○は完全に任意です。半角英数ならOKです。頭が数字だとダメです。
class「.」とid「#」の違い
「#」シャープはid、「.」ドットはclassであることがわかったところで、この2つの違いや使い分け方を解説します。
html内に記述していい回数
一つのhtml内に記述していい回数が異なります。
id:1回
class:複数回
idの例
同じidを記述（禁止）
<div id="A"></div>
<div id="A"></div>違うidを記述（OK）
<div id="A"></div>
<div id="B"></div>classの例
同じclassを記述（OK）
<div class="A"></div>
<div class="A"></div>違うclassを記述（OK）
<div class="A"></div>
<div class="B"></div>よってidはヘッダーやメインコンテンツなど各htmlに1回しかでてこない要素に指定し、classはリストなど複数回使う可能性がある要素に使うことに向いています。
慣れないうちはclassだけ使うのも手です。
一つのタグで記述していい回数
1つのタグの中で記述していい回数が異なります。
id:1回
class:複数回
タグ内に複数のidを記述（禁止）
<div id="A B"></div>タグ内に複数のclassを記述（OK）
<div class="A B"></div>CSS優先度
CSSの優先度が異なります。
id:高い
class:低い
#A{margin:10px;}
.A{margin:20px;}上記のようにidとclassに同じCSSプロパティが指定されている場合idが優先されます。
詳しくは以下の記事をご確認ください。
ページ内リンク利用
idはページ内リンク先として利用できます。
id:利用可
class:利用不可
例
<p><a href="#A">ページ内リンク</a></p>
<div id="A">テキスト</div>以前はページ内リンクと言えば「name」でしたが、現在ではブラウザによっては「name」ではページ内リンクしません。
idを使ってページ内リンクさせます。
#○○と.○○は別物
#と.が違うことはわかりましたが、idとclassの名前を同じにしたとき区別してくれるのでしょうか？
結論から言うと、区別します。
下記は「#example」と「.example」を指定した例です。
<style>
#example{
color: blue;
}
.example{
color: red;
}
</style>
<div id="example">#example</div>
<div class="example">.example</div>それぞれ違う色を指定しており、ちゃんとCSSが効いています。
このように#と.で同じ名前を付けることができます。
ただし実際に同じ名前にすると、#で指定したのか.で指定したのか間違えてCSSが効かなかったり、直すハメになるためオススメしません。
まとめ
CSSセレクタの「.」ドット「#」シャープの意味
- 「.」ドットはclass
- 「#」シャープはid
class「.」とid「#」の違い
- classは1ページ内に何度でも指定できるが、idは1ページ内に1回だけ。
- CSSにおける優先度が異なり、#のほうが.より優先される。
以上、CSSの「#」シャープと「.」ドットの意味と違いでした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
