CSSとは
HTMLのみでCSSがないWebサイトは白い背景と黒い文字だけのシンプルな表示です。CSSはWebサイトの土台であるHTMLの見た目を調整できる言語です。CSSを使えば華やかに装飾できてます。
CSSを適用させる方法
CSSファイルを読み込んで適用させる
１つ目は「.css」の拡張がついたCSSファイルを作成し、それをHTMLファイルに読み込ませて適用させる方法があります。Webサイトを制作するときは、この方法が最も一般的です。１つのCSSファイルを複数のHTMLファイルに読み込まぜられるので、一括管理できます。修正が入った場合も1つのCSSファイルを変更するだけなので簡単です。
適用方法
HTMLファイルの<head>内に<link>タグを使ってCSSファイルに指定します。rel属性に「stylesheet」、href属性にCSSファイルを指定すれば、CSSファイルに書かれた装飾を適用させます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="サイトの説明文">
<link rel="stylesheet" href="style.css">
</head>
<body>
Webサイトの内容
</body>
</html>
HTMLファイルの<head>内に<style>タグで指定する
２つ目はHTMLファイルの<head>内にCSSを書き込む方法です。CSSを記述したHTMLファイルでのみ適用されます。前の適用方法とはちがい他のHTMLファイルには反映されないので注意が必要です。特定のページのみ、デザインを変えたいと時に使えます。
適用方法
タグの中にCSSを書くときは、各タグの中にstyle属性を使って指定します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="サイトの説明文">
<style>
h1{color:#f00;}
p{font-size:18px;}
</head>
<body>
Webサイトの内容
</body>
</html>
HTMLタグの中にstyle属性を指定する
３つ目はHTMLタグに直接CSSを書き込む方法です。直接書かれたタグにのみ適用されます。１つひとつのタグに指定するので手間がかかり、メンテナンスも難しいです。ただ、ほかの方法で指定するよりCSSを適用させる優先順位が高く、CSSを上書きしたいときや一部のデザインだけ変更したいときに使えます。
適用方法
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="サイトの説明文">
</head>
<body>
<h1 style="color:#f00;">Webサイトの内容</h1>
<p style="font-size:18px;">テキスト</p>
</body>
</html>
上記のとおり、「HTMLファイルの<head>内に<style>タグに指定する」や「HTMLタグの中にstyle属性を指定する」のやり方だとCSSをまとめて管理することが難しく、メンテナンスに時間がかかってしまいます。特別な理由がない限りは「CSSファイルを読み込んで適用させる」方法で適用させましょう。
終わりに
今回はCSSの適用方法を解説しました。次回はCSSコードを解説したいと思います。
エンジニアファーストの会社 株式会社CRE-CO 吉川 真史