HTMLとCSSの基本的な連携方法｜初心者でもわかるコーディング入門

これからWeb制作を始める方のために、HTMLとCSSの基本的な使い方と連携方法を徹底解説します。サンプルコード付きで、初心者でもコピペで試せる内容です。WordPressやブログ制作でも、HTMLとCSSをスムーズに活用できるようになります。

1 HTMLとCSSを連携するとは？
2 HTMLとCSSを連携する3つの方法
3 基本レイアウト例：ヘッダー・本文・フッター構造
4 応用テクニック：Flexbox／Grid／レスポンシブ対応
5 実務での活用例
6 よくあるトラブルとその対処法
- 6.1 CSSが反映されない
- 6.2 スマホ表示が崩れる
7 まとめ

HTMLとCSSを連携するとは？

HTMLはWebページの骨組み、CSSは見た目を整えるスタイルシートです。この2つを組み合わせることで、Webサイトの構造とデザインを効率よく作ることができます。

HTMLは文章・見出し・画像・リンクなどの要素を配置
CSSはフォント・色・間隔・レイアウトなど見た目を制御
両者を連携することで、読みやすく美しいページが作成可能

まずは「内容（構造）」と「見た目（スタイル）」を分けて考えることで、後から修正もしやすくなります。
関連：HTML基本タグ解説

HTMLとCSSを連携する3つの方法

CSSをHTMLに反映する方法には以下の3つがあります。それぞれの特徴を理解して、用途に合わせて使い分けましょう。

インラインCSS

HTMLタグに直接スタイルを書き込む方法。手軽ですが、複数ページでの管理は煩雑になりがちです。

<p style="color: red; font-size: 16px;">赤文字のテキスト</p>

メリット：即時反映でき、テストに便利。
デメリット：デザインの一貫性・管理性が低下。

内部CSS（<style> タグ）

HTMLファイル内の <head> に style を書く方法。1 ページのみで完結する場合に向いています。

<head>
  <style>
    p { color: blue; font-size: 18px; }
  </style>
</head>

メリット：手軽にスタイル調整が可能。
デメリット：複数ページで使うには非効率。

外部CSS（style.css など）

CSSを別ファイルに分けて読み込む方法。複数ページでデザインを共有する場合に最も効率的。

<head>
  <link rel="stylesheet" href="style.css">
</head>

実務ではこの方法が一般的。WordPress のテーマ作成でも同じです。
関連：CSS入門解説

基本レイアウト例：ヘッダー・本文・フッター構造

HTMLとCSSの連携を理解するための基本構造の例を示します。ブログや固定ページのベースとしても使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML + CSS 基本レイアウト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>サイトタイトル</h1>
  </header>

  <main>
    <p>ここに本文を記述します。HTMLで構造を作り、CSSでデザインを整えます。</p>
  </main>

  <footer>
    <p>© 2025 Kazoolog</p>
  </footer>

</body>
</html>

style.css の例も基本的な記述のみ：

body { font-family: Arial, sans‑serif; margin: 0; padding: 0; }
header { background: #f8f8f8; padding: 20px; text-align: center; }
main { padding: 20px; }
footer { background: #f0f0f0; padding: 15px; text-align: center; }

このシンプルな構造をベースとして、サイドバーやナビゲーション、レスポンシブ対応などを追加すると実用的なレイアウトになります。
参考：CSSレイアウト練習ガイド

応用テクニック：Flexbox／Grid／レスポンシブ対応

Webサイト制作やブログデザインをきれいに仕上げるために、Flexbox や CSS Grid、メディアクエリによるレスポンシブ対応は重要な技術です。

Flexbox を使った横並びレイアウト

.container { display: flex; justify-content: space-between; }
.item { width: 30%; background: #eee; padding: 10px; text-align: center; }

Flexbox を使うと、複数カラムが画面幅に応じて整列し、スマホ対応もしやすくなります。

Grid レイアウトで複雑な構造にも対応

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-item { background: #ddd; padding: 20px; text-align: center; }

Grid を使えば、Flexbox よりも自由度の高いレイアウトが可能になります。
詳しい解説は：Flexbox と Grid レイアウト解説

レスポンシブ対応のためのメディアクエリ

@media screen and (max-width: 768px) {
  .container, .grid-container { flex-direction: column; grid-template-columns: 1fr; }
}

これを使うことで、PCだけでなくスマホでも見やすい構造になります。

実務での活用例

以下のように、実際のWeb制作やブログ運営で応用できます：

WordPressテーマのカスタマイズ — テーマカスタマイズ入門
ブログ記事の見出し・画像・レイアウト調整
LP（ランディングページ）や商品の紹介ページのデザイン
コーポレートサイトでヘッダー／フッターの共通化

よくあるトラブルとその対処法

CSSが反映されない

CSSファイルの読み込みパスが間違っている
HTMLとCSSの構造が崩れている（タグの閉じ忘れなど）
ブラウザのキャッシュやキャッシュ系プラグインの影響

スマホ表示が崩れる

固定幅（px指定）のままにしていたり、メディアクエリが設定されていないため。解決策は相対単位（%やrem）を使うか、メディアクエリを追加すること。

まとめ

HTMLは構造、CSSは見た目 — 役割を明確にする
外部CSSでデザインを統一、管理性を高める
Flexbox・Grid・メディアクエリでレスポンシブ対応
実務での応用やテーマ制作にも対応可能

まずはこの基本を押さえてコピペで試し、自分のサイトに応用してみましょう。慣れてきたら、さらに応用CSSやレイアウト調整にチャレンジしてみてください。