CSSの#（シャープ）と.（ドット）の違いを現役エンジニアが解説【初心者向け】
初心者向けにCSSの#（シャープ）と.（ドット）の違いについて解説しています。id属性とclass属性それぞれの場合のセレクタの記述方法をサンプルコードで説明します。CSSの基本となる部分なのでしっかりと頭に入れておきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
CSSの#（シャープ）と.（ドット）の違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
#（シャープ）と.（ドット）の違いについて詳しく説明していくね！
お願いします！
#と.役割と解説
CSSのセレクタの文法として、#と.があります。HTMLのタグの属性としてidやclassの値に定義した名前がセレクタの文法と一致することで、スタイルを適応することが可能です。
この2つの相違点は、ページ内にて一度だけを対象にしているか、複数を共通として対象にしているかです。下記に、雛形のサンプルコードを展開します。
html
<p id="sample">サンプル</p> <p class="sample">サンプル</p>
idの名前としてsampleと、classの名前としてsampleを定義しています。
css
#sample {
}
.sample {
}
idの名前がsampleの方は、#から始まるセレクタ（#sample）です。classの名前がsampleの方は、.から始まるセレクタ（.sample）です。前述のサンプルコードは、セレクタを定義して、HTMLと一致しているだけですので、対象としては定まっていますが、スタイルは未定義の状態なので、特に変化はありません。
#のスタイル方法
See the Pen
2020-01-12-sample-01 by YOHEI INAI (@yohei_inai)
on CodePen.
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
.のスタイル方法
See the Pen
2020-01-12-sample-02 by YOHEI INAI (@yohei_inai)
on CodePen.
#と.を使ってCSSをスタイルしてみよう
前述にてサンプルコードを提示しましたが、あらためて、実用例としてのサンプルコードを以下に展開します。#の場合、idの名前を指定することになりますので、ページ内に一度だけの適応になります。.の場合は、classの名前を指定することになりますので、ページ内の共通部分への適応が可能です。
idの名前を指定してから、単体要素の文字色を黒色から赤色に変更します。
See the Pen
2020-01-20-sample10 by YOHEI INAI (@yohei_inai)
on CodePen.
classの名前を指定してから、複数要素の文字色を黒色から赤色に変更します。
See the Pen
2020-01-20-sample11 by YOHEI INAI (@yohei_inai)
on CodePen.
監修してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
