CSSの書き方 – idやclassなど基本的なルールを解説

2023年12月20日2024年7月30日

CSSとはWebページの装飾を行う役割を担っており、文字の大きさや色、配置などを制御し、Web制作においては必須のスキルとなります。

本記事ではCSSの基本的な文法、書き方について解説いたします。

文法について

CSSの記載は、3つの部分を組み合わせて成り立ちます。

p {
  color: blue;
}

セレクタ

pはセレクタと呼ばれ、どのHTMLの要素に対してCSSを適用するか、指定をします。

セレクタの後ろには｛　｝波カッコを記載し、その中にプロパティを記載します。

プロパティ

colorはプロパティと呼ばれ、セレクタに対して何を変更するか、何を装飾するかを指定します。colorの場合は文字の色を変更するプロパティの意味を持ちます。

プロパティの後ろには「：」コロンを付けるのを忘れないようにしましょう。

値

blueは値と呼ばれ、プロパティに対する設定値となります。「color」に対して、「blue」を設定しているので、「p」の「文字色」は「青」といった指定となります。

値はプロパティによって指定できるものが異なり、例えば文字の大きさを指定する「font-size」プロパティでは「blue」は使用できません。なぜなら「font-size」は文字の大きさを指定するプロパティであるため、「blue」は対応していないからです。そのため、プロパティと値はセットで覚えていく必要があります。

プロパティは複数指定することが可能で、それぞれ「；」セミコロンで区切って記載します。プロパティが１つの場合は、セミコロンなしでも動作しますが、付ける場合と付けない場合で分けて記載すると、記述エラーとなった場合にエラーの場所がわからないなど、ハマってしまう原因にもなりかねないので、セミコロンは必ず記載するようにしておいた方が良いです。

セレクタの種類について

セレクタには、タグの名称をそのまま記載する場合と、idで記載するidセレクタ、classで記載するclassセレクタがあります。

タグの名称を記載する場合

<p>今日は</p>
<p>CSSの記載方法について</p>
<p>勉強します</p>

<style>
  p {
    color: blue
  }
</style>

セレクタにはタグ名を記載します。上記の場合はセレクタにpを指定しているため、htmlのpタグすべてに適用されております。

idを記載する場合

idとは

HTMLのタグに指定する属性のことで、具体的には以下のようにHTMLで記載します。

<p id="text">今日は</p>
<p>CSSの記載方法について</p>
<p>勉強します</p>

idで指定する名称（上記の場合はtext）は1つのhtmlファイル中に１つしか使用できず、以下のようには使用できません。

<p id="text">今日は</p>
<p id="text">CSSの記載方法について</p>
<p id="text">勉強します</p>

上記ではエラーとなり、正しく動作しなくなります。

CSSでは以下のように指定します。

<p id="text">今日は</p>
<p>CSSの記載方法について</p>
<p>勉強します</p>

<style>
  #text {
    color: blue
  }
</style>

idを指定した箇所のみ、青色になっていることがわかります。

CSSでidを使用する場合は、#id名で記載する必要があり、上記の場合は「#text」と記載しております。

classを指定する場合

class（クラス）とは

idと同様にHTMLのタグに指定する属性のことで、具体的には以下のようにHTMLで記載します。

<p class="text">今日は</p>
<p>CSSの記載方法について</p>
<p>勉強します</p>

classで指定する名称（上記の場合はtext）は1つのhtmlファイル中に何度でも使用できます。

CSSでは以下のように指定します。

<p class="c-blue">今日は</p>
<p class="c-blue">CSSの記載方法について</p>
<p>勉強します</p>

<style>
  .c-blue {
    color: blue
  }
</style>

classを指定した箇所のみ、青色になっていることがわかります。

CSSでclassを使用する場合は、.class名で記載する必要があり、上記の場合は「.c-blue」と記載しております。

classは同時に複数使用することができ、以下のように記載することも可能です。

<p class="c-blue f-large">今日は</p>
<p class="c-blue">CSSの記載方法について</p>
<p>勉強します</p>

<style>
  .c-blue {
    color: blue       /* 文字の色 青 */
  }
  .f-large {
    font-size: 24px;    /* 文字の大きさ 24px（ピクセル） */
    font-weight: bold;  /* 文字の太さ 太字 */
  }
</style>