CSSの#(シャープ)と.(ドット)の違いを現役エンジニアが解説【初心者向け】
初心者向けにCSSの#(シャープ)と.(ドット)の違いについて解説しています。id属性とclass属性それぞれの場合のセレクタの記述方法をサンプルコードで説明します。CSSの基本となる部分なのでしっかりと頭に入れておきましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
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では初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。