CSSはどこに記述するのか

CSSはどこに記述するのか

CSSは、大きく分けると以下3通りの記述場所があります。

  • HTMLのhead内
  • HTMLのタグ内
  • 外部ファイル

それぞれの記述方法についてご説明いたします。

HTMLのhead内

HTMLのhead内に記述する場合、HTMLの<head>~<head>の間に<style>~</style>で囲んで記述します。

<head>
<meta charset="UTF-8">
<title>CSSの基礎講座</title>
 <style>
 div{
 color:green;
 }
 </style>
</head>

この例では、「div要素の色を緑に変更する」という内容になっています。

HTMLのタグ内

HTMLのタグ内に直接スタイルを記述することもできます。

<div style="color:red;">CSSの基礎講座</div>

外部ファイル

HTMLのファイルとは別のファイルを用意し、スタイルシートとして参照するファイルの場所をhead内で指定することもできます。

<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="style.css" />
 <title>CSSの基礎講座</title>
</head>

link要素のrelには”stylesheet”、hrefにはCSSの場所を記述します。上記の例では、”style.css”という外部ファイルを参照しています。スタイルの内容は、style.cssの中に記述していきます。
このように、3通りの方法がありますが、外部ファイルに記述した方がHTMLも長くならずきれいにまとまるので、外部ファイルに記述することをおすすめします。ただ、スタイルの変更をさっと確認してみたい時は、headとかタグに直接書く方が早いですね。確認後、外部ファイルにコピーするというやり方が一番いいと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です