【CSS】CSSを書ける場所は３か所

2023.11.19

【CSS】CSSを書ける場所は３か所

1 CSSを書ける場所は３か所
2 ①HTMLファイル内の各HTMLタグにべた書きする
3 ②HTMLファイルのheadタグにまとめて書く
4 ③別ファイルに書いてHTMLファイルで読み込む

CSSを書ける場所は３か所

CSSを書ける場所は以下の３か所があります。

書ける場所	特徴
①HTMLファイル内の各HTMLタグにべた書きする	ちょっとお試しに便利
②HTMLファイルのheadタグにまとめて書く	もうちょっとお試しに便利
③別ファイルに書いてHTMLファイルで読み込む	実務では基本的にこっち！

①HTMLファイル内の各HTMLタグにべた書きする

もっとも気軽にCSSを試せますが、

あっちに書いたり、こっちに書いたりするので保守が大変です。

<html>
  <head></head>
  <body>
    <h1 style='color:blue;'>CSSの練習</h1>
    <p style='color:red;'>CSSを気軽に試す</p>
  </body>
</html>

②HTMLファイルのheadタグにまとめて書く

HTMLファイルに直接書き込むので気軽にCSSを試せますが、コード量が多くなると見づらくなってしまいます。

こちらも、ちょっとお試し程度に使います。

<html>
  <head>
    <style>
      h1{
        color: blue;
      }
      p{
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>CSSの練習</h1>
    <p>CSSを気軽に試す</p>
  </body>
</html>

③別ファイルに書いてHTMLファイルで読み込む

別ファイルを作成してCSSだけを書き、そのファイルをHTMLで読み込む方法です。

CSSだけをファイルに書き込むので、コードが読みやすく、実務ではほぼこのやり方をします。

CSSファイルとHTMLファイルの２ファイル必要なので、

１つフォルダを作成し、その中に「sample.html」「sample.css」を作成して以下を書き込んでください。

■sample.html

<html>
  <head>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <h1>CSSの練習</h1>
    <p>CSSを気軽に試す</p>
  </body>
</html>

■sample.css

h1{
  color: blue;
}
p{
  color: red;
}

以上です。