HTMLとCSSを組み合わせて思い通りのWebページを作ろう！

Webサイト制作において、HTMLとCSSは欠かせない技術です。HTMLはWebページの骨格を、CSSはデザインやレイアウトを構築するために用いられます。

本記事では初心者でも理解しやすいように、HTMLファイルにCSSを読み込む方法について解説します。

この記事でわかること

HTMLファイルにCSSを読み込む方法
サンプルコード

1 HTMLファイルにCSSを読み込む3つの方法
2 まとめ
3 投稿者

HTMLファイルにCSSを読み込む3つの方法

HTMLファイルにCSSを読み込む3つの方法をそれぞれの特徴とメリット・デメリットを説明し、実際にコードを記述しながら解説します。

1. 外部CSSファイルを読み込む

複数のHTMLファイルで同じスタイルを適用したい場合、外部CSSファイルを使うのが一般的です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>外部CSSファイルを読み込む</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>見出し</h1>
 <p>本文</p>
</body>
</html>

メリット

コードの重複を避けることができる
スタイルの変更を簡単に反映できる
ファイルの管理がしやすい

デメリット

ファイルの読み込み時間が増える
初心者には少し難易度が高い

2. インラインスタイルを使う

特定の要素にのみスタイルを適用したい場合、インラインスタイルを使うことができます。

[CSS]

h1 {
color: red;
}

p {
font-size: 16px;
}

メリット

コードがシンプルになる
初心者でも簡単に使える

デメリット

コードの重複が発生しやすい
スタイルの変更が難しい
ファイルの管理がしにくい

3. スタイル属性を使う

要素ごとに個別にスタイルを適用したい場合、スタイル属性を使うことができます。

[HTML]

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8>
 <title>インラインスタイルを使う</title>
</head>
<body>
 <h1 style="color: red;">見出し</h1>
 <p style="font-size: 16px;">本文</p>
</body>
</html>