TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSの#（シャープ）と.（ドット）の違いを現役エンジニアが解説【初心者向け】
CSS

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サイトを公開できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

CSSのコンフリクトを解消する方法を現役デザイナーが解説【初心者向け】

CSSのコンフリクトを解消する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSにつ...
CSS

CSSで要素の横幅をブラウザの画面幅100％まで広げる方法を現役エンジニアが解説【初心者向け】

CSSで要素の横幅をブラウザの画面幅100％まで広げる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
CSS

スマホ対応に便利！CSSのbox-sizingの使い方【初心者向け】

CSSで書くbox-sizingの使い方について解説する記事です。 Webデザインをする上で、今や必須となったスマホ画面への対応にも便利です。 bo...
CSS

要素を透明にする！CSSのopacityの使い方【初心者向け】現役Webデザイナーが解説

CSSで書くopacityの使い方をテックアカデミーのメンター（プロのWebデザイナー）が初心者向けに実際のコードを使って解説しています。 最近、画像上に...
CSS

CSSでサイズ可変の正方形の描き方を現役エンジニアが解説【初心者向け】

CSSでサイズ可変の正方形の描き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSにつ...
CSS

CSSでテーブル要素の枠線を消す方法を現役エンジニアが解説【初心者向け】

CSSでテーブル要素の枠線を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

あわせてよく読まれている記事

JavaScriptのgetElementByIdメソッドでIDを複数指定する方法を現役エンジニアが解説【初心者向け】

JavaScriptのgetElementByIdメソッドでIDを複数指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 getElementByIdメソッドでIDを複数指定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 getElementByIdメソッドの使い方 IDを複数指定する方法 実際に書いてみよう まとめ   getElementByIdメソッドの使い方 HTMLタグのid属性の名前を定めておいてから、JavaScriptの個別の要素として参照できます。   HTML <div id="sample">SAMPLE ELEMENT</div>   JavaScript var sample_element = document.getElementById("sample"); console.log(sample_element);   実行結果 See the Pen 2020-05-19-sample16 by YOHEI INAI (@yohei_inai) on CodePen.   [PR] HTML/CSSで挫折しない学習方法を動画で公開中IDを複数指定する方法 document.getElementByIdメソッドでは、複数の要素を参照できません。for文と組み合わせて処理することにて、連番による複数の要素を配列に格納することが可能です。   連番を取得するための基礎の処理 for (var i = 0; i < 24; ++i) {   document.write(i); // console.log(i);と同様 }   実行結果 See the Pen 2020-05-20-sample05 by YOHEI INAI (@yohei_inai) on CodePen.   実際に書いてみよう 以下、サンプルコードです。   HTML <ol> <li id="sample-0"></li> <li id="sample-1"></li> <li id="sample-2"></li> <li id="sample-3"></li> <li id="sample-4"></li> <li id="sample-5"></li> <li
JavaScript

Javaのアップキャストとダウンキャストについて現役エンジニアが解説【初心者向け】

Javaのアップキャストとダウンキャストについて解説します。実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。     田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 アップキャストとダウンキャストについて詳しく説明していくね！ 大石ゆかり お願いします！   キャストとは キャストとは型の変換を行うことです。キャスト演算子を使って書下記のように実装します。 (データ型)式   アップキャストとダウンキャストとは アップキャストとダウンキャストは継承や異なるオブジェクトをまとめて扱うことを可能にするjavaの重要な機能です。 継承関係のあるクラスで、継承元をスーパークラス、継承先をサブクラスと言いますが、javaではサブクラスのオブジェクトをスーパークラスと同じように扱うことができます。 これをアップキャストと言います。尚、アップキャストは特別なコーディングを行わなくても自動で行われます。 class Fish { int weight = 0; } class Shark extends Fish { } public class Sample { public static void main(String[] args) { Shark shark = new Shark(); //アップキャスト Fish fish = shark; fish.weight = 500; System.out.println("重さは" + fish.weight + "g");
Java

実際に書いてみる！Javaのthisの使い方【初心者向け】

Javaのthisの使い方について解説します。 実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 thisの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   thisとは thisは予約語で、そのクラスのオブジェクト自身を表します。 クラスのフィールド変数の名前と、メソッドのローカル変数の名前が同じ場合に、対象を特定するために利用することが多いです。 例えば下記のように、クラス変数と、ローカル変数の両方でanimalという名前の変数が定義されており、それぞれ別の値が格納されていたとします。 System.out.printlnを使って変数animalの値を出力すると、結果は”ねこ”になります。クラス変数より、ローカル変数のほうが優先される為です。 public class Sample { //Sampleクラスの変数 String animal = "うさぎ"; public static void main(String[] args) { //ローカル変数 String animal = "ねこ"; // "ねこ"が出力される System.out.println(animal); } }   thisの使い方 クラス変数のほうのanimalにアクセスしたい場合、this.変数名と書くことで、「このクラスの変数である」というを指定します。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう クラス変数とローカル変数の2つで同じ名前を使って定義します。 結果がわかりやすいように、別の値を格納しておきます。 出力処理の中で、animalとthis.animalの値を出力します。 ソースコード public class Sample { //Sampleクラス変数 String animal = "うさぎ"; public void printAnimal()
Java

Pythonの__str__と__repr__の違いを現役エンジニアが解説【初心者向け】

Pythonの__str__と__repr__の違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonの__str__と__repr__の違いについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 __str__メソッドとは __repr__メソッドとは __str__メソッドと__repr__メソッドの比較と使い分け 実際に書いてみよう まとめ   __str__メソッドとは __str__は、クラスで定義できる特殊なメソッドの一つです。 class Sample: def __str__(self): # 処理 s = Sample() str(s) とコーディングした場合、最終行のstr(s)が、__str__メソッドを呼び出します。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中__repr__メソッドとは __repr__も同様なメソッドです。 class Sample: def __repr__(self): # 処理 s = Sample() repr(s) とコーディングした場合、最終行のrepr(s)が、__repr__メソッドを呼び出します。 __str__メソッドと__repr__メソッドの比較と使い分け 公式のドキュメントを参照すると、__str__は以下の通りです。 Called by str(object) and the built-in functions format() and print() to compute the “informal” or nicely printable string representation of an object. 一方、__repr__は以下の通りです。 Called by the repr() built-in function to compute the “official” string
Python

Javaで平方根を計算する方法を現役エンジニアが解説【初心者向け】

Javaで平方根を計算する方法について解説します。実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 平方根を計算する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Mathクラスとは Mathクラスは、指数関数、対数関数、平方根、および三角関数といった基本的な数値処理を実行するためのメソッドを含むクラスです。   平方根（ルート）を計算する 平方根を計算するにはsqrtメソッドを使います。平方根を求めたい値を引数として指定し、戻り値はdouble型で返却されます。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 整数4の平方根を求めるサンプルです。 public class Sample { public static void main(String[] args) { System.out.println(Math.sqrt(4)); } } 実行結果は 2.0 となります。 引数に負の値を設定すると、戻り値はNaNとなります。NaNは「Not a Number」の略で無効な演算結果であることを表しています。 public class Sample { public static void main(String[] args) { System.out.println(Math.sqrt(-1)); } } 引数に負の値を設定した上記のサンプルの実行結果は NaN となります。   又、引数に正の無限大を設定すると、戻り値も正の無限大となります。下記サンプルで引数に設定しているDouble.POSITIVE_INFINITYは、double型の正の無限大値を表す定数です。 public class Sample { public static void main(String[] args) { System.out.println(Math.sqrt(Double.POSITIVE_INFINITY)); } } 実行結果は Infinity となります。   引数が0の場合は0が返却されます。 public class Sample {
Java

JavaScriptでオブジェクトのプロパティ値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオブジェクトのプロパティ値を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 オブジェクトのプロパティ値を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 プロパティとは オブジェクトのプロパティ値を取得する方法 実際に書いてみよう まとめ   プロパティとは JavaScriptには、データの形式として「オブジェクト」があります。オブジェクトには、名前である「プロパティ」に対して、値である「キー」を保持しています。 なお、ブラウザが処理するJavaScriptのコードは、グローバル変数も全てオブジェクトに格納します。この「プロパティ」の名前は、「window」に決められています。   JavaScriptのオブジェクト var sample_object = {}; console.log(sample_object); console.log(window.sample_object);   実行結果 See the Pen 2020-05-19-sample17 by YOHEI INAI (@yohei_inai) on CodePen. 「window」オブジェクトは、省略可能になっているため、「sample_object」から記述ができます。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中オブジェクトのプロパティ値を取得する方法 定義済みを前提として、オブジェクトの名前に「.」（ドット）演算子を用いて値を参照することができます。また、JavaScriptの場合は、配列の添字としても扱われることになりますので、配列の添字を指定してから、参照も可能です。   実際に書いてみよう 以下、サンプルコードです。   オブジェクトのプロパティに値を定義してから、参照するための処理 var sample_object = { access: "SAMPLE" }; document.write(sample_object.access); console.log(sample_object.access);   実行結果 See the Pen 2020-05-19-sample18 by YOHEI INAI (@yohei_inai) on CodePen.   配列の添字を用いて参照するための処理 var sample_object = { access: "SAMPLE" }; document.write(sample_object["access"]); console.log(sample_object["access"]);   実行結果 See the Pen 2020-05-20-sample04 by YOHEI INAI (@yohei_inai) on CodePen.   まとめ ブラウザが処理するJavaScriptのオブジェクトは、全て「window」オブジェクトの管理下にて配列としても扱われることになります。   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

TechAcademyから
現役エンジニアの方へ
お知らせ

藤門千明
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSの#（シャープ）と.（ドット）の違いを現役エンジニアが解説【初心者向け】