CSSを追加する方法
ブラウザがスタイルシートを読み取ると、スタイルシートの情報に従ってHTMLドキュメントがフォーマットされます。
CSSを挿入する3つの方法
スタイルシートを挿入する方法は3つあります。
- 外部CSS
- 内部CSS
- インラインCSS
外部CSS
外部スタイルシートを使用すると、1つのファイルを変更するだけで、Webサイト全体の外観を変更できます。
各HTMLページには、headセクション内の<link>要素内に外部スタイルシートファイルへの参照が含まれている必要があります。
例
外部スタイルは、HTMLページの<head>セクション内の<link>要素内で定義されます。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部スタイルシートは任意のテキストエディタで記述でき、.css拡張子を付けて保存する必要があります。
外部の.cssファイルにはHTMLタグを含めないでください。
「mystyle.css」ファイルの外観は次のとおりです。
「mystyle.css」
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
注：プロパティ値と単位の間にスペースを追加しないでください。
正しくない（スペース）：margin-left: 20 px;
正しい（スペースなし）：margin-left: 20px;
内部CSS
1つのHTMLページに固有のスタイルがある場合は、内部スタイルシートを使用できます。
内部スタイルは、ヘッドセクション内の<style>要素内で定義されます。
例
内部スタイルは、HTMLページの<head>セクション内の<style>要素内で定義されます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
インラインCSS
インラインスタイルを使用して、単一の要素に一意のスタイルを適用できます。
インラインスタイルを使用するには、関連する要素にstyle属性を追加します。style属性には、任意のCSSプロパティを含めることができます。
例
インラインスタイルは、関連する要素の「style」属性内で定義されます。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
ヒント：インラインスタイルは、スタイルシートの多くの利点を失います（コンテンツとプレゼンテーションを混合することにより）。この方法は慎重に使用してください。
複数のスタイルシート
異なるスタイルシートの同じセレクター（要素）にいくつかのプロパティが定義されている場合は、最後に読み取られたスタイルシートの値が使用されます。
<h1>要素の外部スタイルシートのスタイルが次のとおりであると想定します。
h1
{
color: navy;
}次に、内部スタイルシートにも<h1>要素の次のスタイルがあると想定します。
h1
{
color: orange;
}例
外部スタイルシートへのリンクの後に内部スタイルが定義されている場合、<h1>要素は「オレンジ」になります。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
例
ただし、外部スタイルシートへのリンクの前に内部スタイルが定義されている場合、<h1>要素は「ネイビー」になります。
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
カスケード順序
HTML要素に複数のスタイルが指定されている場合、どのスタイルが使用されますか？
ページ内のすべてのスタイルは、次のルールに従って新しい「仮想」スタイルシートに「カスケード」されます。ここで、番号1が最も優先されます。
- インラインスタイル（HTML要素内）
- 外部および内部スタイルシート（ヘッドセクション内）
- ブラウザのデフォルト
したがって、インラインスタイルが最も優先度が高く、外部スタイルと内部スタイル、およびブラウザのデフォルトを上書きします。
W3Schools Spacesについて聞いたことがありますか？ここでは、独自のWebサイトを作成したり、後で使用するためにコードスニペットを無料で保存したりできます。
無料で始めましょう❯*クレジットカードは必要ありません