HTML に CSS を記述する3つの方法：魅力的なウェブページを作成

css 書き方 html内

**説明：** この記事では、HTML ファイルに CSS コードを記述する方法について詳しく解説します。3つの一般的な方法を取り上げ、コード例と SEO 対策のヒントを提供し、美しく、管理しやすいウェブページの作成を支援します。

HTML に CSS コードを埋め込む3つの方法

ウェブデザインでは、CSS（カスケーディングスタイルシート）を使用して、ウェブページのスタイルとレイアウトを制御し、より美しく読みやすくします。 CSS コードを HTML ファイルに埋め込むには、主に次の3つの方法があります。

1. インラインスタイル：HTML タグ内に直接 CSS を記述する

**適用シーン：** フォントの色やサイズを変更するなど、単一の HTML 要素に簡単なスタイル変更を加える場合。
**メリット：** シンプルで分かりやすく、追加ファイルが不要。
**デメリット：** コードが冗長になり、保守が難しく、SEO にも不利。
**コード例：**


<p style="color: blue; font-size: 16px;">これは青いテキストです。</p>

2. 内部スタイルシート：HTML ファイルのヘッダー <head> タグ内で <style> タグを使用して CSS を記述する

**適用シーン：** 単一の HTML ページに対してスタイルをカスタマイズする場合、スタイルコードが比較的まとまっている。
**メリット：** コード構造が明確で、保守しやすい。
**デメリット：** 複数のページでスタイルを共有できず、大規模なウェブサイトの開発には不向き。
**コード例：**


<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>
</html>

3. 外部スタイルシート：CSS コードを独立した .css ファイルに記述し、HTML ファイル内でリンクする

**適用シーン：** 大規模なウェブサイトや、複数のページでスタイルを共有する必要があるプロジェクト。
**メリット：** コードの再利用性が高く、保守や更新が容易で、SEO にも有利。
**デメリット：** CSS ファイルを別に管理する必要がある。
**コード例：**

style.css ファイルの内容：


body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

HTML ファイルで外部スタイルシートをリンクする：


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>
</html>

CSS の基本構文

CSS は、スタイルを適用する HTML 要素、プロパティ、値の組み合わせで構成されます。


セレクタ {
  プロパティ: 値;
}

**セレクタ:** スタイルを適用する HTML 要素を指定します。
**プロパティ:** 要素のスタイルを設定する項目を指定します (例: color, font-size)。
**値:** プロパティに設定する値を指定します (例: red, 16px)。

一般的な CSS セレクタ

セレクタ	説明
`要素名`	指定した要素全てにスタイルを適用 (例: p, h1)
`.クラス名`	指定したクラスを持つ要素にスタイルを適用 (例: .highlight)
`#ID名`	指定した ID を持つ要素にスタイルを適用 (例: #header)

まとめ

適切な CSS の記述方法は、プロジェクトのニーズによって異なります。小規模なプロジェクトでは、インラインスタイルや内部スタイルシートの方が便利な場合がありますが、大規模なプロジェクトでは、外部スタイルシートの方が合理的です。

SEO 対策のヒント

<h1>、<p> などの意味的に正しい HTML タグを使用する。
画像に alt 属性を追加して、画像の内容を説明する。
CSS 圧縮ツールを使用してファイルサイズを削減し、ページの読み込み速度を向上させる。 (CSS Minifier)
ブラウザキャッシュメカニズムを使用して、サーバーリクエストの回数を減らす。

参考資料

よくある質問

Q: インラインスタイル、内部スタイルシート、外部スタイルシートのどれを使うべきですか？
A: 小規模なプロジェクトで、特定の要素のみにスタイルを適用する場合は、インラインスタイルが適しています。単一のページに適用するスタイルが多い場合は、内部スタイルシートが適しています。複数のページでスタイルを共有する必要がある大規模なプロジェクトでは、外部スタイルシートが最適です。
Q: CSS を記述する際に、SEO に配慮すべき点はありますか？
A: はい、CSS は SEO にも影響を与えます。ページの読み込み速度に影響を与えるため、CSS ファイルを圧縮したり、ブラウザキャッシュを活用したりすることが重要です。また、意味的に正しい HTML タグを使用することで、検索エンジンがページの内容を理解しやすくなります。
Q: CSS を学習するのに最適なリソースは何ですか？
A: MDN Web Docs や W3Schools などのオンラインチュートリアルは、CSS の基礎を学ぶのに最適です。また、Codecademy や Udemy などのオンライン学習プラットフォームでは、より実践的な CSS コースを受講できます。

その他の参考記事:CSS 構文