CSSの#(シャープ)と.(ドット)の違いを現役エンジニアが解説【初心者向け】

初心者向けにCSSの#(シャープ)と.(ドット)の違いについて解説しています。id属性とclass属性それぞれの場合のセレクタの記述方法をサンプルコードで説明します。CSSの基本となる部分なのでしっかりと頭に入れておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,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サイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。