【HTMLハンズオン3】 ページにスタイル（デザイン）を適用する方法
これまでに学んだ<head>タグの基本やSEO対策、モバイル対応に続いて、今回はページにスタイル（デザイン）を適用する方法を学びましょう。
これまでに学んだ<head>タグの基本やSEO対策、モバイル対応に続いて、今回はページにスタイル（デザイン）を適用する方法を学びましょう。
具体的には、<link>タグと<style>タグを使用して、CSS（Cascading Style Sheets）を活用します。
都度、ブラウザでどんな動きをしているのか確認してみましょう。
外部CSSファイルをリンク
まずは、<link>タグを用いて外部のCSSファイルをリンクします。この方法は、特に大規模なウェブサイトや複数のページで同じスタイルを適用する場合に便利です。
<link rel=“stylesheet” href=“styles.css”>
rel属性はリソースの関係性を示し、href属性はリソースのURLを指定します。
index.htmlと同じ階層にstyles.cssを作成しましょう。
body {
background-color: black;
}
簡単に、背景色を black に設定します。
ブラウザで動きを確認してみよう！
内部CSSを適用
次に、<style>タグを用いてページ内に直接CSSを書きます。この方法は小規模なプロジェクトやテスト段階でよく使用されます。
styles.cssの中身はコメントアウトしておきましょう。
// body {
// background-color: black;
// }
<style>
body {
background-color: lightblue;
}
</style>
この<style>タグは<head>内に配置し、CSSのルールを定義します。
ブラウザで動きを確認してみよう！
両方を組み合わせてみる
外部CSSと内部CSSは組み合わせて使用することも可能です。ただし、同じセレクタがある場合は、後に定義されたスタイルが優先されます。
HTMLファイル（index.html）
<!DOCTYPE html>
<html>
<head>
<title>私の素晴らしいウェブページ</title>
<meta charset=“UTF-8”>
<meta name=“description” content=“これは素晴らしいウェブページです“>
<meta name=“keywords” content=“素晴らしい, ウェブページ“>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<!-- 外部CSS -->
<link rel="stylesheet" href="styles.css">
<!-- 内部CSS -->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
CSSファイル（styles.css）
body {
background-color: black;
}
/* この部分は内部CSSによって上書きされる */
h1 {
color: blue;
}
この例では、外部CSS（styles.css）でbodyの背景色をblackに、h1の文字色をblueに設定しています。さらに、内部CSSでh1の文字色をredに上書きしています。
ブラウザでこのページを表示すると、背景はblackで、h1の文字色はredになります。なぜなら、同じセレクタに対するスタイルが複数ある場合、後に定義されたもの（この場合は内部CSS）が優先されるからです。
まとめ
これで、外部CSSと内部CSSを組み合わせた使用方法について理解できたと思います。どんなデザインに挑戦するか、楽しみですね！