HTMLでCSSファイルをリンクする方法
外部CSSをリンクする方法
外部CSSは、別のファイルに記述されたCSSをHTMLに適用する方法です。これにより、複数のHTMLファイルで同じCSSを使い回すことができます。
基本的な書き方
HTMLの<head>内で、<link>タグを使ってCSSファイルを指定します。
<link rel="stylesheet" href="styles.css">
具体例
以下のようなディレクトリ構成を考えます。
/project
│── index.html
│── styles/
│── style.css
この場合、index.html内で以下のようにCSSファイルを読み込みます。
<link rel="stylesheet" href="styles/style.css">
CDNを使用する方法
外部のCDNを利用することもできます。例えば、BootstrapのCSSを利用する場合は以下のように記述します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
内部CSSを使用する方法
内部CSSは、HTMLファイル内の<style>タグを使用して記述する方法です。
基本的な書き方
<head>内に<style>タグを記述し、そこにCSSを書くことで適用できます。
<style>
body {
background-color: lightblue;
}
</style>
具体例
以下のようにHTML内でCSSを直接記述できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>内部CSSの例</title>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>これは赤色の文字です。</p>
</body>
</html>
インラインCSSを使用する方法
インラインCSSは、HTMLの各要素に直接style属性を指定する方法です。
基本的な書き方
例えば、以下のように記述します。
<p style="color: blue; font-weight: bold;">青色の太字テキスト</p>
具体例
実際のHTMLコードでは次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインCSSの例</title>
</head>
<body>
<p style="color: green; font-size: 18px;">これは緑色のテキストです。</p>
</body>
</html>
CSSの適用順位
CSSの適用順位は以下のようになります。
- インラインCSS（
style属性） - 内部CSS（
<style>タグ） - 外部CSS（
<link>タグ）
この優先順位に従って、同じ要素に異なるスタイルが適用される場合、最も優先度の高いものが適用されます。
CSSのベストプラクティス
- 可能な限り外部CSSを使用し、HTMLとスタイルを分離する。
- 内部CSSは、一時的なスタイル変更や特定のページのみに適用する場合に使用する。
- インラインCSSは、特定の要素だけを変更する場合に限定する。
- クラスやIDを適切に使い、セレクタを明確にする。
- 可読性を向上させるために、CSSの記述ルールを統一する。