CSSを記述する場所

yuma

Web制作においてCSSはページの見た目を整える上で大切です。HTMLが構造を作るのに対し、CSSはレイアウトを作ります。ユーザーに読んでもらうためには見た目は重要です。

CSSを書く場所を間違えれば、CSSは機能せず、無機質なページになってしまいます。本記事ではCSSを記述する場所を紹介します。

HTMLファイルに直接書く

HTMLファイルに直接書くことができます。書く場所は<HEAD>の中に<STYLE>というタグを用意してその中に書きます。場所を間違えるとCSSは読み込みませんので、気をつけましょう。

HTMLファイルに直接書くときはCSSのコード数が少ないときがおすすめです。長くなるとファイルが重くなる上に、どこに何が書いてあるかわからなくなります。

（参考コード）

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.change-text{
  color: red;
  font-size:32px;
}
</style>
</head>

外部ファイルの書く

外部ファイルに書いてHTMLファイル内から読み込む方法も可能です。外部ファイルに書く場合は「.css」というファイル形式で保存しておく必要があります。

外部ファイルに読み込む場合のサンプル例を下に書きます。htmlファイルと同じディレクトリにCSSフォルダを用意し、「style.css」というCSSファイルを読み込む場合を想定します。

コードは<head>タグの中に記述してください。

<link rel=stylesheet href="css/style.css>

外部ファイルに書くメリットはCSSを一元管理できるため、コードを見つけやすく、HTMLファイルに書くよりもコードを短くできることです。また、両方のファイルを同時に開いておけば、見比べることも簡単です。

一方で、CSSのコード自体が短い場合は管理がめんどくさいため、直接書くことをおススメします。


この記事が気に入ったらサポートをしてみませんか？