こんにちは、Mochiです。
CSSを適用するにはどうすればいいんだろう？CSSファイルってどうやって読み込むんだっけ？🤔
そんな方々に向けてCSSの適用方法やファイルの読み込み方をわかりやすく解説します。学んでいきましょう！
✍️CSSの3つの適用方法
CSSの適用方法は主に3つあります。
- インラインCSS：直接書き込む
- インターナルCSS：まとめて書き込む
- エクスターナルCSS：別ファイルに書き込む
それぞれについて解説し、結局どれを使えば良いのかを説明します。
インラインCSS：直接書き込む
1つ目の方法は、インラインCSSです。インラインCSSとはHTML要素に直接CSSを書き込む方法です。書き込み方のルールは
<tag sytle="property: value">Text</tag>のようになります。直接指定するため、セレクターはいらないです。
例えば見出しを青色にしたい場合は
<h1 sytle="color: blue">Mochi Blog</h1>というふうに書きます。
ただし、このインラインCSSは使わないほうがいいです。CSSを直接書いてしまうと後で変更する際に大変になります。例えば、1000行あるコードのうち、700番目のコードを探してCSSを書き換えるということを毎度やるのは大変です。
では、次の方法を見てみましょう。
インターナルCSS：まとめて書き込む
2つ目の方法は、インターナルCSSです。インターナルCSSとはHTMLのhead要素の中にまとめてCSSを書く方法です。書き方のルールは
<head>
<style>
selector {
property: value;
}
</style>
</head>のようになります。
head要素ってなんだっけ？🤔という方は記事「HTMLの基本的な構造をわかりやすく解説」を読むと内容を理解しやすくなるのでおすすめです。
例えば見出し2を紫色にする場合は
<head>
<style>
h2 {
color:blueviolet;
}
</style>
</head>
<body>
<h2>Mochi Blogはスキルアップのブログ</h2>
</body>のように書きます。
ただし、インターナルCSSも使わないほうが良いです。その理由はたくさんのCSSコードがあるとHTMLが見辛くなるためです。例えば200行のCSSコードを書いた場合、HTMLを見るには毎回200行分スクロールする必要があり、大変です。
また、インターナルCSSで書いたCSSは書き込んだHTMLファイルのみに有効で、他のHTMLには適用できません。そのため、同じ装飾を他のHTMLファイルにしたいときは、再度書いたり細かいコピペが必要になってしまいます。
では、どうすれば良いのでしょうか？最後の方法を見ていきましょう。
エクスターナルCSS：別ファイルに書き込む
3つ目の方法は、エクスターナルCSSです。エクスターナルCSSはCSSを別のファイルに書き込み、HTMLファイルでその別のCSSファイルを読み込む方法です。
2つのステップ
- CSSファイルを作り、書き込む
- CSSファイルを読み込む
に分けて説明します。
CSSファイルを作り、書き込む
CSSファイルは”css”という拡張子をつけることで作成できます。例えば”style.css”という名前のファイルを作成すれば、そのファイルがCSSファイルになります。フォルダはどこでも良いのですが、CSSファイルだけを入れたフォルダがあるとわかりやすくて良いです。
CSSファイル内の書き方は、基本に則ったシンプルな方法で
selector {
property: value;
}のように書きます。
例えば、段落の文字の色を紫色にしたい場合は
p {
color: blueviolet;
}のように書きます。
ただ、これだけでは文字の色は変わりません。これはHTMLファイルにCSSファイルの存在を教えてあげていないためです。そこで次のステップに移りましょう。
CSSファイルを読み込む
適用するCSSファイルを教えてあげるためのコードを、HTMLファイルへ書き込みます。書き込み方のルールは
<head>
<link href="path.css" rel="stylesheet" />
</head>のようになります。
href属性には適用するCSSファイルまでのパスを与えます。フォルダの中に入れている場合は、フォルダまでのパスも含める必要があるため、”folderName/style.css”のようなパスになります。
rel属性にはスタイルシートであることを伝えるために”stylesheet”を入れます。
例えば、先ほど段落の文字の色を紫色にしたCSSファイル”apply.css”を読み込むには
<head>
<link rel="stylesheet" href="apply.css">
</head>のように書きます。これによりCSSファイルが適用され、色が変わります。
ここでの注意点は<link>タグはページのリンクとは関係ないです。<link>タグはHTMLとCSSを繋ぐためのタグです。ページのリンクを作成するHTML要素には<a>タグを使います。
<a>タグってなんだっけ？🤔という方は記事「HTMLでリンクを作成するaタグについて分かりやすく解説」を読むと理解が深まるため、おすすめです。
CSSを適用する方法には、このエクスターナルCSSを使いましょう。この方法は一般的に使われています。理由は1つのファイルを作成するだけで、複数のHTMLファイルに適用できるためです。また、修正も複数のファイルに行き来することなく、一括で行えます。ですので、今後はエクスターナルCSSを使うのがおすすめです。
🎉まとめ
CSSを適用する3つの方法インラインCSS、インターナルCSS、エクスターナルCSSについて解説しました。３つのうち、エクスターナルCSSを使うのが良いです。
みなさんはCSSファイルの適用方法を身につけ、スキルアップしました。素晴らしいです👏
CSSを使って装飾していく上で避けては通れない方法ですので、忘れた時にはまたこの記事を見返してください！
