style属性の値としてスタイルを指定する
【構文】<タグ style=”プロパティ: 値;”>
この方法は、最も簡単にCSSを適用することができますが、文書構造であるHTMLの中に装飾のCSSを記述するため、文書構造と装飾が混在してしまうので、あまり利用されません。
See the Pen
2-3_1 by Koji Seto (@yseseto)
on CodePen.
headタグ内にstyleタグを使用し記述する
【構文】
<style>
セレクタ{
プロパティ: 値 ;
：
}
</style>
2つ目の方法は、CSSの構文である「セレクタ{プロパティ: 値 ;}」をheadタグ内に記述する方法です。HTMLファイル内にCSSの構文を埋め込むには、styleタグを使用します。
文書構造と装飾をbody部とhead部に分けて記述できますが、HTMLファイル内に記述するため、同じスタイルを別ページに適用させたい場合は、同じスタイルを別ページにコピーしなければなりません。また、変更があった場合は各ページを修正する必要があるため、管理がしにくくなります。
See the Pen
2-3_2 by Koji Seto (@yseseto)
on CodePen.
分かりにくいので、こちらにコードをそのまま記載しておきます。
（HTML）
<head>
<style>
h1{color: blue;}
</style>
</head>
CSSファイルを作成しリンクする
【構文】
（HTML）
<link rel=”stylesheet” href=”CSSファイルのパス”>
（CSS）
セレクタ{プロパティ: 値 ;}
3つ目の方法は、CSSだけを記述したCSSファイルを作成し、head部のlinkタグにてリンクする方法です。一番手間はかかりますが、1つのCSSファイルを複数のHTMLファイルで共有することができ、変更もCSSファイルの修正だけで済みますので、結果的に管理しやすくなります。
Webサイトを制作するときには、主にこの方法を使用してCSSを適用します。
See the Pen
2-3_3 by Koji Seto (@yseseto)
on CodePen.
（HTML）
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
（CSS）
@charset “utf-8”; /* 文字コードの指定 */
h1{color: blue;}