【初心者向け】CSSの記入場所と読み込み方法とCSSファイルの作成

cssの作成と記入場所
チャッピー
チャッピー

前回CSSの使い方は学んだけどこれってどこに書いたらいいの?

こばゆた
こばゆた

CSSを適用させるには

  1. タグ内に記入
  2. headタグ内に記入
  3. 別ファイルを作成する

と三種類の方法があるんだ

きなこ
きなこ

じゃあどれで書けば良いの?

こばゆた
こばゆた

それぞれ特徴があるから順にみていこう!

スポンサーリンク

1.タグ内に記入

タグの中にstyle属性を書いて、プロパティとその値を書く事でCSSを反映させる事ができます。

<タグ style="プロパティ: プロパティの値;"> </タグ>

<p style="color: skyblue;">おはよう</p>
<p style="color: red;">こんにちは</p>
<p style="color: green;">こんばんは</p>

おはよう

こんにちは

こんばんは

それぞれスタイルが適用されている事がわかります。

スポンサーリンク

2.headタグ内に記入

二つ目はheadタグ内にstyleタグを入れて、その中に通常通りセレクターを指定して、プロパティと値を入れるやり方です。

<head>
  <style>
    セレクター{
      プロパティ: 値;
    }
  </style>
</head>

<head>
  <meta charset="UTF-8">
  <meta name="description" content="練習用サイトです">
  <title>sample-site</title>
  <style>
    p{
      color: blue;
    }

    span{
      color: orange;
    }
  </style>
</head>
<body>
  <span>おはよう</span>
  <p>こんにちは</p>
 <span>こんばんは</span>
</body>

おはよう

こんにちは

こんばんは

こちらもそれぞれスタイルが適用されています。

3.CSSファイルを作成して読み込む

三つ目は別のCSSファイルを作成し、head内でlinkタグを使用して読み込む方法です。

この方法がキレイに書けて一番ポピュラーです。

読み込み方
  1. CSSファイルを作成する
  2. headタグにコードを記入する
<link rel="stylesheet" href="スタイルシートの名前.css">

rel属性にはstylesheetを読み込むということを書き、href属性には読み込むスタイルシートの名前を書きます。


これをheadタグ内に記入します。

<head>
  <meta charset="UTF-8">
  <meta name="description" content="練習用サイトです">
  <title>sample-site</title>
  <link rel="stylesheet" href="スタイルシートの名前.css">
</head>
<body>
  <span>おはよう</span>
  <p>こんにちは</p>
 <span>こんばんは</span>
</body>
@charset "UTF-8";
p{
  color: pink;
}

span{
  color: tomato;
}

おはよう

こんにちは

こんばんは

ちゃんと指定できていれば例の様に反映されます。

チャッピー
チャッピー

@charset “UTF-8”;って何?

こばゆた
こばゆた

headタグ内に書いたmetaタグと同じで、これをcssの先頭に書くことでコードの文字化けを防ぐことができるんだよ

忘れない様にね!

3-1. VS CodeでのCSSファイルの作り方

こばゆた
こばゆた

VS Codeの場合はこの方法が一番楽かなと思います。

CSSファイルの作り方
  • STEP1
    HTMLファイルを読み込む
    CSSファイルの作り方
  • STEP2
    linkタグをheadタグ内に記入する
    先ほどのlinkタグを記入します。CSSファイルの作り方今回は”stylesheet.css”という名前で作成しました。
  • STEP3
    CSSファイルを作成する
    CSSファイルの作り方
  • STEP4
    開いたら「ファイルの作成」をクリック
    CSSファイルの作り方
  • STEP5
    @charsetを忘れずに書いてCSSを書き始める
    CSSファイルの作り方あとは前回見た様に書いていくだけです!

もちろん普通にCSSファイルを作成してlinkタグで呼び出す方法でもOKだと思います。

4.優先度

きなこ
きなこ

ここまで三種類の書き方を聞いたけど三箇所全ての場所にCSSを書くとどうなるの?

こばゆた
こばゆた

その場合はタグ内headタグ内別のスタイルシートの順で優先されます

参考までに覚えておきましょう

5.まとめ

CSSファイルの作成 まとめ
  • CSSファイルの作成には三種類ある

1.タグ内に記入

<タグ style="プロパティ: プロパティの値;"> </タグ>

2.headタグ内にstyleタグを書いてその中に記入

<head>
  <style>
    セレクター{
      プロパティ: 値;
    }
  </style>
</head>

3.別にCSSファイルを作成し、headタグ内で読み込む

<head>
  <link rel="stylesheet" href="css/スタイルシートの名前.css">
</head>
  • 「3.別にCSSファイルを作成し、headタグ内で読み込む」のが一般的
  • 優先順位はタグ内>headタグ内>別のスタイルシート

コメント