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だけで作る矢印のアニメーション方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CS...
CSS

画像編集せずCSSで画像を暗くする方法を現役エンジニアが解説【初心者向け】

画像編集せずCSSで画像を暗くする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nb...
CSS

重ねて表示する！CSSのz-indexの使い方【初心者向け】

CSSで書くz-indexの使い方について解説している記事です。 ボックスを重ねて表示させる場合に必要な知識になります。現場でも使える技術なので、ぜひ身に...
CSS

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

実務で役立つ！CSSのセレクタの種類と使い方【初心者向け】

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

PHPのキーワードnamespaceについて現役エンジニアが解説【初心者向け】

今回は、PHPのキーワードnamespaceについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPのキーワードnamespaceについて詳しく説明していくね！ 大石ゆかり お願いします！   名前空間とは 名前空間とは項目（クラスや関数など）をカプセル化（グループ化）することをいいます。 PCにファイルを保存する時、同じフォルダに同じファイル名で保存することはできませんよね？ それは、同じ名前空間に同じ名前のファイルを保存すると名前の衝突が起きるからです。そのどちらかのファイルを開く時に、コンピューターはどちらのファイルを開けばいいのか判断ができないためです。 しかし、フォルダAとフォルダBを作成すれば、それぞれに同じファイル名のファイルを保存することが可能です。（A/file.txt、B/file.txt） これは、Aという名前空間とBという名前空間が別であるために、「Aというフォルダに保存してあるfile.txt」と、「Bというフォルダに保存してあるfile.txt」は別物であるとコンピューターは判断できるためです。 日常生活で言えば、名前に対して苗字をつける感覚に似ています。２人の太郎くんが同じ学校のクラスにいたとして、「太郎くん」と呼ばれただけでは、どちらの太郎くんが呼ばれたのか分からないですよね。でも、「田中太郎くん」と「鈴木太郎くん」と呼ばれれば、どちらが呼ばれたか判断できますよね。 PHPの名前空間もPCの名前空間の延長線上にあり、そういった名前の衝突を防ぐために使用されます。   namespaceキーワードの使い方 PHPでは、同じファイルに同一名のクラス、インターフェイス、関数、定数を定義できません。 しかし、PHPのnamespaceキーワードを使用するこで、上記の項目に名前空間を提供し、同じファイルであっても定義すること可能になります。 それでは、namespaceキーワードの使い方について見てみましょう。   namespaceの書き方 namespace 名前空間名; クラスや関数などの前に、「namespace 名前空間名;」を記述することで、それ以降に記載するクラスや関数などの項目に名前空間名で記載した名前空間を提供することができます。   サンプルコード <?php namespace tanaka; class Taro { public function getName() { return '田中太郎'; } } namespace suzuki; class Taro { public function getName() { return '鈴木太郎'; } } ?> 上記のサンプルコードでは、一つ目のクラスTaroが名前空間tanakaに属していて、二つ目のクラスTaroが名前空間suzukiに属しています。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう それでは、実際にnamespaceキーワードで名前空間を作成し、使用する例を見てその効果を確認しましょう。   名前空間を使用しない場合 まずは、名前空間を使用せずに同一ファイル内でクラスを定義した場合の例を見てみましょう。 person1.php： <?php class Taro
PHP

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

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