CSS 書式

 

 

目次

1. CSSの記述例
2. CSSの書式
   • セレクタとプロパティ
   • コメント
   • @ルール

CSSの記述例

@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
  background:#FFFFFF;
}
/* ツールバー */
div#toolbar > ul {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background: #444444;
}

 

 

CSSの書式

セレクタとプロパティ

セレクタ {
  プロパティ名 : プロパティ値;
}

• セレクタとは、デザインの適用対象を指定するものです。
• セレクタの指定方法には、例えば以下のようなものがあります。
  1. ○○要素（例：h1要素）。
  2. id属性の値が○○である要素（例：id属性に値が「foo」である要素）
  3. class属性の値が○○である要素（例：class属性に値が「bar」である要素）
• プロパティは、セレクタで指定した適用対象に対してどのようなデザイン内容にするかを指定します。
• プロパティは、プロパティ名とプロパティ値のセットで指定します。
  • プロパティ名は、デザインの種類（背景色、幅、高さ、など）を指定します。
  • プロパティ値は、デザインの値（赤色、240px、など）を指定します。
  • プロパティ名とプロパティ値は、セレクタにつづく「{」と「 }」の内にに記述します。
    • 「{」と「 }」で囲われた部分を宣言ブロックと呼びます。
  • プロパティ名とプロパティ値の間には「:」（コロン）を記述し、行末には「;」（セミコロン）を記述します。

 

h1 {
  color : red;
}

• 上記の例では「h1要素の文字の色を赤色にする」という指定をしています。
• 「h1」はセレクタで、デザインの適用対象をh1要素に指定しています。
• 「color」はプロパティ名で、文字の色を指定するためのプロパティ名です。
• 「red」はプロパティ値で、赤色を指定するためのプロパティ値です。
• つまり「color : red;」とすることで、「文字の色を赤色にする」という意味になります。

 

• セレクタの詳しい説明については、セレクタを参照してください。
• プロパティの詳しい説明については、プロパティを参照してください。

 

 

コメント

/* コメント */

• コメントとは、コードの中に書き込むことができるメモのようなものです。
• メモであるため、デザインに影響を及ぼしません。
• 「/*」と「*/」で囲んだ範囲がコメントとなります。

 

/* これはコメントです。 */
a {
  cursor: pointer;
  color: #43D172;
  text-decoration: none;
  border: none;
}

 

 

@ルール

@ルール内容

• ＠ルールとは、CSSの振舞いを定義するものです。
  • 文字コード指定、インポートするCSSファイルパス指定、CSSを適用するメディア種類指定、などの指定ができます。
• ＠ルールは、行頭に「@」（アットマーク）を記述し、それに続けてルール内容を記述します。
• ＠ルールの詳しい説明については、@ルールを参照してください。

 

@charset "UTF-8";

• 上記の例では「CSSファイルの文字コードを”UTF-8″に指定」ということをしています。