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

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

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

この記事でわかること

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

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

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

HTML
<!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>

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

CSS
h1 { color: red; } p { font-size: 16px; }

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

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>