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