CSSの書き方とコメント

CSSの書き方

CSSは、HTMLで作った文字やレイアウトの見た目を整えてくれる言語です。

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

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

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

※外部ファイルにcssを記述するときは、<style>と</style>は不要です。

２．どの箇所に影響を与えるかを指定します。セレクタといいます。

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

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

2行目の#a1はセレクタです。#a1は、id="a1"を表し、7行目を指しています。

３．何をどうするかを指定します。

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

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

3行目は、「プロパティ」と「値」で以下の意味になります。

プロパティは、なにを→ color →文字の色を。

値は、どうする→ red →赤色にする。

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

図にすると以下になります。

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

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

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

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

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

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

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

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

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