CSSの書き方とコメント

目次

CSSの書き方

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

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

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

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

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

 

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

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

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

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

 

3.何をどうするかを指定します。

<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は以下の場所に記述できます。

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

CSSのコメントの書き方

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

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

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

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

関連の記事

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

△上に戻る