CSSの「#」シャープと「.」ドットの意味、違いは?マンガでわかるホームページ作成ホームへCSSの「#」シャープと「.」ドットの意味、違いは?2021年07月28日CSSをみていると下記のように「#」シャープや「.」ドットとなにか英字が含まれている文字列がありますね。○○}「#や.はどういう意味?どう違ってどう使い分けるの?」CSSの「#」シャープと「.」ドットの意味と違い、使い分けを解説します。「#」シャープはidCSSに書かれる「#」シャープはhtmlのidを指しています。red;}</style>htmlのid="○○"とCSSの#○○が一致しているとき、そのhtmlタグにCSSが効くというものです。○○は完全に任意です。半角英数ならOKです。頭が数字だとダメです。ちなみに、正確にはシャープ「♯」ではなくハッシュ「#」です。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む「.」ドットはclassCSSに書かれる「.」ドットはhtmlのclassを指しています。red;}</style>htmlのclass="○○"とCSSの.○○が一致しているとき、そのhtmlタグにCSSが効くというものです。○○は完全に任意です。半角英数ならOKです。頭が数字だとダメです。class「.」とid「#」の違い「#」シャープはid、「.」ドットはclassであることがわかったところで、この2つの違いや使い分け方を解説します。一つのhtml内に記述していい回数が異なります。class="B"></div>よってidはヘッダーやメインコンテンツなど各htmlに1回しかでてこない要素に指定し、classはリストなど複数回使う可能性がある要素に使うことに向いています。慣れないうちはclassだけ使うのも手です。一つのタグで記述していい回数1つのタグの中で記述していい回数が異なります。B"></div>CSS優先度CSSの優先度が異なります。id:高いclass:低い#A{margin:10px;}.A{margin:20px;}上記のようにidとclassに同じCSSプロパティが指定されている場合idが優先されます。詳しくは以下の記事をご確認ください。疑似クラス、属性セレクタなど含めたCSSセレクタの優先順位と点数計算方法を解説します。この記事を読むページ内リンク利用idはページ内リンク先として利用できます。id="A">テキスト</div>以前はページ内リンクと言えば「name」でしたが、現在ではブラウザによっては「name」ではページ内リンクしません。idを使ってページ内リンクさせます。#○○と.○○は別物#と.が違うことはわかりましたが、idとclassの名前を同じにしたとき区別してくれるのでしょうか?結論から言うと、区別します。下記は「#example」と「.example」を指定した例です。class="example">.example</div>それぞれ違う色を指定しており、ちゃんとCSSが効いています。このように#と.で同じ名前を付けることができます。実際に同じ名前にすると、#で指定したのか.で指定したのか間違えてCSSが効かなかったり、直すハメになるためオススメしません。「.」ドットはclass「#」シャープはidclass「.」とid「#」の違いclassは1ページ内に何度でも指定できるが、idは1ページ内に1回だけ。CSSにおける優先度が異なり、#のほうが.より優先される。以上、CSSの「#」シャープと「.」ドットの意味と違いでした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。