CSSを記述する場所
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のコード自体が短い場合は管理がめんどくさいため、直接書くことをおススメします。
この記事が気に入ったらサポートをしてみませんか?