HTMLの書き方が少しわかったら、次にやるべきはCSSです。「CSSのソースコードを調べたら、ものによって記述場所が違う気がする」「どこに書くのが正解なの？」といった疑問を持っている方もいるかもしれません。
私自身始めてCSSを見たとき、同じ処理なのにコードによって記述場所が違っているため混乱しました。
そこでこのページでは、CSSの3種類の記述場所について解説します。またどの方法もすぐに実際に試せるように解説するので、ぜひ試してみてください。
ちなみにHTMLの経験がまだの方は、以下の記事を参考にしてみてください。
タイトルの通りすぐにできるので、HTMLを速攻で試し、速攻でCSSも試してみることができます。
CSSの3種類の記述場所
CSSの3種類の記述場所は以下です。
この3種類です。あとで詳しく説明しますが、上から順に効果の優先度が高くなります。記述場所がHTMLに近ければ近いほど優先される、と覚えておくと良いでしょう。
ただし優先度が高ければ良いというわけではなくて、本格的な開発では外部ファイルを使うことがほとんどです。それについてはあとでそれぞれの記述方法の適用範囲・優先順位・メリット・デメリットでまとめます。
①HTMLのタグ内に直接記述
まず最初に、以下のHTMLを用意します。HTMLにある程度慣れている方は、これとは違う内容でも問題ありません。とりあえず簡単なHTMLを用意します。
<html> <head> <title>ここはタブです</title> </head> <body> <h1>ここは見出しです</h1> <p>ここはテキストです</p> </body> </html>
これを実行すると、以下のようなWEBページが表示されます。
タグにCSSを書いて、見出しの色を変えてみます。コードは以下です。
<html>
<head>
<title>ここはタブです</title>
</head>
<body>
<h1 style="color:red;">ここは見出しです</h1>
<p>ここはテキストです</p>
</body>
</html>
6行目に「 style=”color:red;”」を追加しています。
実行すると見出しが赤に変わりました。細かい文法については既存のコードを真似すれば問題ありませんが、公式をしっかり勉強したい方はまた改めて学習してください。
②styleタグに記述
先ほど編集したHTMLに、さらにstyleタグによる編集を加えます。
<html>
<head>
<title>ここはタブです</title>
<style>
p {color: blue;}
</style>
</head>
<body>
<h1 style="color:red;">ここは見出しです</h1>
<p>ここはテキストです</p>
</body>
</html>
4行目～6行目に
<style>
p {color: blue; }
</style>
を追加しています。
これを実行すると、じゃっかんわかりずらいですがテキストが青に変わりました。
③外部ファイルに記述
外部ファイルに記述する方法は、実際の開発でもっともよく使われます。具体的には以下のように行います。
まず以下のコードを書いたテキストファイルを用意します。CSSファイルはHTMLファイルから読み込むので、同じ階層に作るようにしてください。
p{
font-size:100px;
}
ファイル名はなんでも良いのですが、「font-size」にしました。
次に、拡張子を「.css」にします。ポップアップが出てくるかもしれませんが、「はい」を選択します。
cssファイルに変換できました。
次にHTMLファイルに「linkタグ」でCSSファイルを読み込むコードを記述します。
<html>
<head>
<title>ここはタブです</title>
<style>
p {color: blue;}
</style>
<link href="font-size.css">
</head>
<body>
<h1 style="color:red;">ここは見出しです</h1>
<p>ここはテキストです</p>
</body>
</html>
7行目に「 <link rel=“stylesheet” href=“font-size.css”>」を記述しています。
headタグ内に、CSSファイルを読み込むためのlinkタグを入れています。「rel=”stylesheet”」の部分は固定で、「href=”font-size.css”」についてはCSSファイル名を指定しています。
HTMLファイルを実行すると、以下のようにテキスト部分の文字が大きくなりました。
テキストが見出しよりも大きくなりました。
各記述場所の適用範囲・優先順位・メリット・デメリット
| 適用範囲 | 優先順位 | メリット | デメリット | |
| HTMLのタグ内に直接記述 | 記述したタグのみ | 1 | 適用させたいタグに直接書き込めるので、直感的に扱いやすい | 記述したタグにしか適用されない |
| styleタグに記述 | そのファイル内全体 | 2 | ファイル内では一括適用させることができる | そのファイル内でしか適用されない |
| 外部ファイルに記述 | 複数のHTMLファイル | 3 |
|
複数のHTMLファイルに適用している場合、特定のファイルのみに変更を適用させることができない |
適用範囲、優先順位については特に把握しておいた方が良いでしょう。とはいえ適用範囲と優先順位はなんとなく直感的にわかるかと思います。どこに対してCSSを適用させるのか、HTMLとより近い部分に書いた方が優先度が高くなる、と考えればすぐにわかります。
メリット・デメリットについては、ざっと見ておけば言われなくても感じることかと思います。
HTML&CSSについての書籍は以下にまとめています。
プログラミング初心者がHTML&CSSを学ぶのにおすすめの書籍
書籍で勉強する場合ぜひご参照ください。
