CSSの書き方/コメントとセレクタ

CSSの書き方とコメントとセレクタについてです。

CSSの書き方

CSSを使用すると文字の色や背景色を変えることができます。

CSSを使用したコードの例です。

<style>
  #a1 {
    color: red;
  }
</style>

<p id="a1">あいうえお</p>

ブラウザで見ると文字が赤になります。

書き方

1行目の<style>から5行目の</style>の間にCSSを記述します。

2行目の#a1が「セレクタ」です。
セレクタは、CSSを適用する場所です(どこに)。→ #a1 → IDの"a1"という箇所に。
#がついているセレクタはIDセレクタといいます。htmlの中にあるIDを指します。

7行目のPタグの中にid="a1"があります。2行目とひも付きます。

3行目は、「プロパティ」と「値」です。
プロパティは、CSSの項目です(なにを)。→ color →文字の色を。
値は、プロパティに対する指定です(どうする)。→ red →赤色にする。

セレクタとプロパティの図

上記のサンプルでは、プロパティは1つのみですが、以下のようにプロパティを複数設定することもできます。

<style>
  #a1 {
    color: red;
    font-weight: bold;
    background: LightSkyBlue;
  }
</style>

<p id="a1">あいうえお</p>

3行目は、文字の色は赤を指定しています。
4行目は、文字を太字にしています。
5行目は、背景色は水色にしています。

コメントされた箇所は、プログラムの実行に影響を与えません。
コメントは、/* で始まり、 */ で終了します。

<style>
  /* コメントです */
  #p1 {
    color: red;
  }
  /*
	  複数行のコメントです
	*/
</style>
<p id="p1">あいうえお</p>

6～8行目のように複数行のコメントも可能です。

CSSは以下の場所に記述できます。

・外部のファイルにCSSを記述する
・HTML内部でCSSを記述する
・タグ内でCSSを記述する

通常は、外部のファイルに記述します。
CSSを記述する場所のサンプル

セレクタは、CSSを適用する場所を指定するもので種類があります。

覚えておきたいのは、IDセレクタとクラスセレクタです。

IDセレクタは、1つのhtml文書内で1つだけのユニークなものである必要があります。
先頭にシャープ(#)がつきます。

クラスセレクタは、1つのhtml文書内に複数設定しても問題ありません。
先頭にドット(.)がつきます。

IDセレクタの例です。

<style>
  #a2 {
    color: red;
  }
</style>

<p id="a1">あいうえお</p>
<p id="a2">あいうえお</p>
<p id="a3">あいうえお</p>

2行目は、IDセレクタです。先頭にシャープ(#)がついています。
7～9行目までid=がありますが、id="a2"がある8行目の文字の色が赤になります。

クラスセレクタの例です。

<style>
  .a1 {
    color: red;
  }
</style>

<p class="a1">あいうえお</p>
<p class="a1">あいうえお</p>
<p class="a1">あいうえお</p>

２行目は、クラスセレクタです。先頭にドット(.)がついています。
7～9行目には、それぞれclass="a1"があります。7～9行目の文字の色が赤色になります。

<style>
  #p1 {
    background: yellow;
  }
  .p1 {
    color: red;
  }
</style>
<p id="p1" class="p1">あいうえお</p>

2行目のIDと5行目のクラスは同じ名称ですがそれぞれ機能します。
9行目は背景色は黄色で文字は赤になります。

-webkit-	Google Chrome,Safari,Microsoft Edge,Opera
-moz-	Firefox
-ms-	Internet Explorer,Microsoft Edge(2020年にChromiumベースになった)
-o-	Opera(現在使用されていない)

ブラウザ独自のプロパティを使用する時に付ける接頭辞です。

Can I useというサイトでブラウザの対応状態を調べることができます。