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

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

CSSの書き方

CSSを使用すると文字の色や背景色を変えることができます。
CSSの構造は以下のようになっています。

以下は、実際のCSSを使用したコードの例です。

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

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

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

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

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

7行目は、Pタグの中にid="a1"があります。2行目とひも付きます。
画面を表示すると7行目の「あいうえお」という文字が赤色になります。

上記のサンプルでは、プロパティは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行目は背景色は黄色で文字は赤になります。