CSSの書く場所と基本的な書き方

2020年12月5日CSS

CSSを勉強する上で、最も基本となる部分を知っておきましょう。

具体的には、

  • CSSを書く場所
  • CSSの書き方
  • CSSのクラスセレクターの書き方

を解説します。

CSSの基本のキの部分であり、これから当たり前のように使っていくことになるので、しっかりと確認しましょう。


CSSを書く3つの方法

CSSを書く方法は、次の3つあります。

  • HTML要素に直接書く方法
  • HTML文書内にまとめて書く方法
  • HTML文書内にまとめて書く方法
CSSファイルを別に作って、HTML内でリンクさせる

 

HTML要素に直接書く方法

HTMLのタグに、style属性をつけることで、CSSを適用することができます。

例：<p style="color: blue;”>

 

HTML文書内にまとめて書く方法

HTML文書内にまとめて書場合は、headタグの中に書きます。
styleタグで囲って、{}を使って以下の書き方になります。

 
 <style>

 h1 {
color: yellow;

}
 
 </style>

HTML文書内にまとめて書く方法
CSSファイルを別に作って、HTML内でリンクさせる

CSSファイルを別に作って、HTML内でリンクさせる
head内で別に作ったCSSファイルをリンクさせる方法です。
実際にはこの方法が一番よく使われます。
<link rel="stylesheet" href="cssのURL>としてheadタグ内にいれてあげることでリンクさせることができます。属性の値はリンクさせる階層やファイル名で変わるので、リンク先が正しいかどうかしっかりと確認しましょう。

書く場所によるCSSの優先順位

CSSは3通りも書く方法がありますが、優先順位は決められています。
優先順位が高い順番は次の通りです。

  1. HTML要素に直接書く方法
  2. HTML文書内にまとめて書く方法
CSSファイルを別に作って、HTML内でリンクさせる
  3. CSSの基本用語
  • セレクター
  • 宣言
  • プロパティ
  • 
値

宣言の最後には;セミコロンが必要になります。

CSSのクラスセレクターの書き方
 
たとえばpタグが複数あって、別々にCSSを指定したいときにクラスセレクターを使います。
CSSを適用したいタグに識別子としてclass属性をつけます。
class属性は、styleをかくときは、(.)ピリオドで始まる。

HTML

<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p class="info">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>

CSS

.info {
  color: skyblue;
}

CSS

Posted by devsakaso