CSS(スタイルシート)を適用したいときに、どこに書くのが普通なのかよくわからないことがあります。CSSのスタイルを設定するときは、以下の3通りの方法があります。
- CSSを適用したいタグに直接書く style=””
- style要素で囲って記述する<style></style>
- 別ファイルから読み込む
基本的には別ファイルから読み込むのが主流ですが、別ファイルにするまでもない場合や、例外的に別のスタイルを適用したい場合などに使うことがあります。今回は、その書き方について書こうと思います。
CSSを適用したいタグに直接書く
HTML内のタグにstyle=””を指定して、スタイルを変更する方法です。
以下は、h1タグにstyle=”color:red”を記述してタイトルの文字色を赤色にしています。
<!DOCTYPE html>
<html lang="ja">
<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>CSSの勉強</title>
</head>
<body>
<h1 style="color:red">CSSを始める</h1>
</body>
</html>この書き方は、一番優先度が高い書き方で、他の書き方で別のスタイルが設定されていてもこの書き方で書いたスタイルが優先的に適用されます。
一方で、ファイルのあちこちでこの書き方をされると個別の設定となってしまい、非常にメンテナンスがしにくい書き方です。
この書き方は、よっぽど個別にスタイルを適用したいという要件がない限り、あまりいい書き方とは言えません。
style要素で囲って記述する
<style></style>で囲って記述することも可能です。あるスタイルをこのファイルだけに適用した場合などに使います。一般的にはheadタグに書くことが一般的ですが、bodyタグなどに書いてもスタイルは適用されます。この方法もhtmlに直接書くので、可読性が落ちます。
<!DOCTYPE html>
<html lang="ja">
<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>CSSの勉強</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>CSSを始める</h1>
</body>
</html>
別ファイルから読み込む
ほとんどはこのパターンです。別ファイルでcssのスタイル情報を管理することでメンテナンスがしやすいです。一般的なのは、HTMLファイルが存在するフォルダに別途cssなどのフォルダを作成してそのフォルダ内にstyle.cssなどのファイルを作成して利用します。
CSSを別のファイルから読み込む方法は、<head>タグ内に以下のように指定します。
<link rel="stylesheet" href="css/style.css">
style.cssにh1タグを赤色にする設定をした場合
<!DOCTYPE html>
<html lang="ja">
<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>CSSの勉強</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>CSSを始める</h1>
</body>
</html>h1 {
color: red;
}h1タグの文字が赤くなる。
基本的にはheadタグに<link rel=”stylesheet” href=”css/style.css”>を記述して外部ファイルで使用するのが一番いいと思います。
コメント