HTMLにCSSを適用させる方法

HTMLにCSSを適用する方法について解説します。

この記事のポイント

HTMLにCSSを適用する

CSSを適用する3つの方法

HTMLにCSSを適用する方法は、大きく分けて次の3つの方法があります。

style要素に記述する
link要素でCSSファイルを読み込んで適用する
HTML要素に直接記述する

これらの方法について１つずつ解説していきます。

Note

今回解説する方法の他にも、JavaScriptなどプログラミング言語を使って動的に適用する方法もあります。

style要素に記述する

スタイルを適用したいHTMLが書かれたページに、style要素を使って記載する方法です。
ファイルはHTMLファイルのみになるため、外部ファイルの読み込みを少なくしたい場合に有効な方法になります。

style要素はメタデータコンテンツのため、head要素内に記述します。

style要素にスタイルを記述する例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLにCSSを適用させる方法</title>
<style>
p {
	font-size: 150%;
	font-style: italic;
	color: #333;
}
</style>
</head>
<body>
	<p>CSSの基本的な書き方</p>
</body>
</html>

「<style>〜</style>」の中に記述されたスタイルが、body要素内のHTMLに適用されます。

link要素でCSSファイルを読み込んで適用する

HTMLファイルとCSSファイルを分けて記載し、link要素で読み込む方法です。
外部ファイルの読み込みが発生しますが、HTMLとCSSを分離できるため構造がわかり易く、メンテナンス性に優れた方法です。

CSSを読み込むHTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLにCSSを適用させる方法</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<p>CSSの基本的な書き方</p>
</body>
</html>

読み込むスタイルシート(style.css)

p {
	display: inline-block;
	padding: 10px;
	border-radius: 5px;
	border: 2px solid #333;
	color: #333;
}

HTML要素に直接記述する

HTML要素にstyle属性を使ってスタイルを記述する方法です。
「インラインスタイル」や「インラインCSS」と呼ばれます。

個々のHTMLに記載するとコードが複雑になり管理が大変になってしまうため、基本的にはあまり使われない方法です。
プログラミング言語と連携するときや、一時的な応急処置として使われることがあります。

インラインCSSの例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLにCSSを適用させる方法</title>
</head>
<body style="background-color: #f7f7f7;">
	<p style="font-size: 150%; color: #333;">CSSの基本的な書き方</p>
</body>
</html>