cssの記載方法

ホームページ作成（無料）

• cssの説明
• cssの記載方法
• cssの読み込む順番
• コンテンツ余白設定

Pickup

• 無料アフィリエイト
• 無料ブログ 比較 宣伝

4種類

cssの記載方法は4種類あります。

ここでは、css（スタイルシート）の外部ファイルやテキスト上（head）に使用する4種類の記載方法を紹介しています。

1. 要素 { ～ }

要素は body h1 p など、はじめから用意されている基本となるものです。

• 例： body { font-size: 110% }

---

2. .クラス名 { ～ }

アルファベットではじまる好きな単語を記載します。単語の前に「.」ピリオドを忘れずに。

• 例： .font { font-size: 88% }
• ○ <p class="font">Next</p>
• ○ <span class="font">Next</span>

.クラス名の前に要素で、その部分にだけ指定できます。

• 例： p.font { font-size: 88% }
• ○ <p class="font">Next</p>
• × <span class="font">Next</span>

---

3. .クラス名 要素 { ～ }

半角スペースを入れて記載すると、その範囲にだけ指定できます。

• 例： .font strong { font-size: 110% }
• <p class="font"><strong>強調して110%を設定できます</strong></p>

---

4. #クラス名 { ～ }

#の場合、「 class 」から「 id 」に変わります。同じ#名前は、同じページには1回しか指定できません。

• 例： #font { font-size: 88% }
• <p id="font">Next</p>

複数のcssを指定するときは「 ; 」で区切ります。

body{ background-color: #800000; font-size: 110% }