CSSの#（シャープ）と.（ドット）の違いを現役エンジニアが解説【初心者向け】
初心者向けにCSSの#（シャープ）と.（ドット）の違いについて解説しています。id属性とclass属性それぞれの場合のセレクタの記述方法をサンプルコードで説明します。CSSの基本となる部分なのでしっかりと頭に入れておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
WebサイトをCSSでコーディングするときに出てくる#（シャープ）や.（ドット）の記号。
意味や使い方がいまいちわからない、どっちの記号を使うべきか迷う。
そんな皆さんのために、CSSのシャープやドット記号について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
#（シャープ）と.（ドット）の違いについて詳しく説明していくね！
お願いします！
CSSのセレクタ
#（シャープ）や.（ドット）などの記号は、CSSではセレクタと呼びます。
HTMLで記述した文書に対し、CSSでスタイルを装飾しますね。
その時に、「HTMLのどの部分を」装飾するか選択するのがセレクタです。
セレクタ HTMLのどこを装飾するか Where
プロパティ 選択した要素の何を装飾するか What
値 どのように装飾するか How
セレクタは、いくつかの意味を持った記号を使って、数式のようにHTMLを選択します。
#（シャープ）や.（ドット）は、それぞれ違う意味を持ったセレクタ記号なのです。
IDセレクタ #(シャープ)
HTML要素のID属性を指定してセレクトするのが、IDセレクタの#(シャープ)です。
HTMLを記述する際に、要素にID属性を付与できます。
<p id="green">メッセージ</p>
ここでは仮に、greenというIDを付けてみました。
CSS側の記述で、この要素を装飾するときに、IDセレクタを使います。
#green{
/*ここにプロパティと値を書いて装飾する*/
}
#(シャープ)の後に、指定したいIDを記述することで、要素をセレクトするのです。
この例ではgreenというIDにしましたが、実際に色が緑かどうかは関係ありません。
HTML側の記述で、greenというIDを付与した要素がセレクトされます。
HTMLには、同じIDはページ内で1つしか付与できない、というルールがあるので注意してくださいね。
クラスセレクタ .(ドット)
HTML要素のクラス属性を指定してセレクトするのが、クラスセレクタの.(ドット)です。
HTML側の記述で、要素にクラスを付与することもできますね。
<p class="pink">メッセージ</p>
次は仮に、pinkというクラスを付けてみました。
CSS側で、クラスセレクタを使って装飾してみましょう。
.pink{
/*ここにプロパティと値を書いて装飾する*/
}
.(ドット)の後に、指定したいクラス名を記述し、要素をセレクトしました。
先ほどと同様、実際に色がピンクかどうかは関係ありません。
クラスはIDと違い、HTML内に同じクラスを何度も付与できます。
複数の要素をクラスでまとめてセレクトし、一度に装飾すると便利ですね。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
どのセレクタを使うべきか
IDセレクタとクラスセレクタ、若干の違いはありますが、どちらもHTMLをセレクトするものです。
また、セレクタ記号はこの2つ以外にもあり、複数のセレクタを組み合わせることもできます。
| 記号 | 種別 | 記述例 | 解説 |
| (記号なし) | 要素名セレクタ | h1 { … } p{ … } div{ … } | 指定した名前の要素すべて |
| #(シャープ) | IDセレクタ | #header{ … } #menu{ … } | 指定したIDの要素 |
| .(ドット) | クラスセレクタ | .left{ … } .red{ … } | 指定したクラスの要素すべて |
| > (大なり) | 子セレクタ | #header > .red { … } | ID headerの子要素にあたるクラスredの要素すべて |
| (スペース) | 子孫セレクタ | #header .red { … } | ID headerの子孫要素にあたるクラスredの要素すべて |
| (隙間なく連続) | アンドセレクタ | #header.red { … } | ID headerかつクラスredの要素 |
| , (カンマ) | オアセレクタ | #header , .red { … } | ID headerもしくはクラスredの要素すべて |
Webページをコーディングしていると、どのセレクタを使うべきか迷うことがありますよね。
結論から言うと、自分がセレクトしたい要素「だけ」をセレクトできていれば、どのセレクタでも構いません。
HTMLのルールでは、1つのIDは1つの要素を指す、1つのクラスは複数の要素を指す。
そのため、同じ装飾を複数個所に当てたい場合はクラス、1ヶ所だけでいい場合はID、という考え方もあります。
また、クラスの用途はCSSやJSで要素をセレクトするのみですが、IDはページ内リンクなど様々な用途があります。
ですので、CSSから要素をセレクトする場合は絶対にクラスを使い、IDは他の用途に使う、という考え方もありです。
様々なセレクタを上手に組み合わせて、おしゃれなサイトを作ってみてくださいね。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
