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

nas2017/12/07

目次

01. CSSの書き方

・CSSのサンプルと構造

・セレクタに対してプロパティが複数の例

・CSSのコメントの書き方

・CSSを記述する場所

02. セレクタ

・IDセレクタとクラスセレクタ

・IDセレクタとクラスセレクタが同じ名称の場合

03. ブラウザベンダーの仕様

・ベンダープレフィックス

CSSの書き方

CSSのサンプルと構造

CSSは、<style>から</style>の間に記述します。

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

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

上記コードをブラウザで見ると文字が赤になります。

セレクタとプロパティと値の関係

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

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

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

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

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

セレクタに対してプロパティが複数の例

以下のcolor,font-weight,backgroundがプロパティです。

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

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

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

CSSのコメントの書き方

コメントは、/* で始まり、 */ で終了します。

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

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

コメントされた箇所は、プログラムの実行に影響を与えません。

CSSを記述する場所

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

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

外部のファイルに記述することが多いです。
CSSを記述する場所のサンプル

IDセレクタとクラスセレクタ

セレクタは、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行目の文字の色が赤色になります。

IDセレクタとクラスセレクタが同じ名称の場合

<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(現在使用されていない)

ベンダープレフィックスのサンプル

<style>
    .p1 {
        -webkit-text-fill-color: red;
    }
</style>
<p class="p1">ABC</p>

3行目は、-webkit-でベンダープレフィックスです。
6行目の文字は赤になります。

関連の記事

CSSを記述する場所のサンプル
CSS セレクタの優先順位(!important)

△上に戻る