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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
どのセレクタを使うべきか
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週間限定）
