2.1 外部スタイルシート
CSS (Cascading Style Sheets) をHTMLドキュメントに接続することで、ウェブページをスタイリングして見た目や使いやすさを向上させることができるよ。 CSSをHTMLに接続する方法はいくつかあって、それぞれにメリットがあって、シチュエーションによって使い分ける感じだね。
CSS接続方法:
- 外部スタイルシート (External Stylesheets)
- 内部スタイルシート (Internal Stylesheets)
- インラインスタイル (Inline Styles)
外部スタイルシート (External Stylesheets)
外部スタイルシートは、別のCSSファイルとして保存され、<link> タグを使ってHTMLドキュメントに接続されるものなんだ。
この方法を使うと、ドキュメントの構造とスタイルを分離できて、スタイル管理がしやすくなるし、複数ページでCSSファイルを再利用できるのがいいね。
メリット:
- スタイルの管理が簡単
- 複数ページでスタイルを再利用可能
- キャッシュやパフォーマンスの向上
構文:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部スタイルシートの例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>テキスト</p>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部スタイルシートの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>見出し</h1>
<p>テキスト</p>
</body>
</html>
CSSファイルの例(styles.css):
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 内部スタイルシート (Internal Stylesheets)
内部スタイルシートはHTMLドキュメント内、<head> セクションに配置され、<style> タグを使って記述されるんだ。
この方法は1ページだけにスタイルを適用したいときや、外部ファイルが利用できない状況で便利だよ。
メリット:
- 1ページに簡単に適用可能
- 追加のファイルが必要ない
構文:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部スタイルシートの例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>テキスト</p>
</body>
</html>
2.3 インラインスタイル (Inline Styles)
インラインスタイルはHTML要素に直接style 属性を使って適用されるよ。この方法は、素早いテストや特定の要素だけのスタイル変更に便利だね。
メリット:
- 素早くピンポイントでスタイルを適用可能
- JavaScriptを使った動的な変更に適している
デメリット:
- 要素が多いとスタイル管理が大変
- スタイルの再利用が難しい
構文:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>インラインスタイルの例</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">見出し</h1>
<p style="color: #666; background-color: #f4f4f4;">テキスト</p>
</body>
</html>
全ての方法を1ページで使用した例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS接続方法の全例</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">見出し</h1>
<p style="color: #666;">このテキストはインラインスタイルを使用してスタイリングされています。</p>
</body>
</html>
2.4 スタイルの優先順位
スタイルが複数の方法で適用された場合、適用される優先順位は以下の通りだよ:
- インラインスタイル (Inline Styles) が最も優先される
- 内部スタイルシート (Internal Stylesheets) が次に優先される
- 外部スタイルシート (External Stylesheets) の優先順位は最も低い
同じ要素に複数の同じ優先順位のスタイルが適用された場合、セレクタの特異性や記述された順序によって優先度が決まるよ。
スタイル優先順位の例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>スタイル優先順位の例</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* 内部スタイル */
}
</style>
</head>
<body>
<p style="color: red;">このテキストはインラインスタイルの優先順位によって赤色になるよ。</p>
</body>
</html>
GO TO FULL VERSION