はじめに
Webサイトを作るときにまず触れるのが HTML とCSS。
これらは似ているようで実は「**構造と見た目を分離する」ための技術」です。
初心者にとっては「何が役割なのか」と「書き方のポイント」を把握することが最初の壁。
この記事では、HTMLとCSSの違いを丁寧に説明し、実際に手を動かしながら「見た目の作り方」を学んでいきます。
一歩ずつ進める形式にすることで、基礎から応用へスムーズに移行できるように構成しています。
1. HTMLとは？ ― 構造を決める言語
1.1 HTMLは「マークアップ言語」
- 画面上に何が表示されるかを 「タグ」 で記述します。
<h1>見出し</h1>：見出し（レベル1）<p>本文</p>：段落<a href="…">リンク</a>：リンク
1.2 要素と属性
| タイプ | 例 | 役割 |
|---|---|---|
| 要素 | <div>...</div> | 何かを区切るブロック |
| 属性 | <a href="https://example.com"> | 追加情報を渡す（URL） |
1.3 データ構造としてのHTML
- 階層構造（親子関係）を使って文書を分解。
<body>内の要素は全て 親子関係 を持つ。
- 例：
<section> <h2>セクション見出し</h2> <p>本文テキスト</p> </section>
1.4 実際にブラウザで確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>基本のHTMLサンプル</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>ここはサンプル段落です。 <a href="https://www.google.com">Googleへ</a></p>
</body>
</html>
もう一度ここで「なぜタグを書いたのか」を思い返してください。
例：<a>は「リンク」を示すために書いた。
2. CSSとは？ ― 見た目をデザインする言語
2.1 CSSは「スタイルシート」
- HTMLで構造を決定したあと、**見た目（色・フォント・レイアウト）**を設定。
- セレクタ + プロパティ + 値 で記述。
2.2 セレクタの種類
| 種類 | 例 | 役割 |
|---|---|---|
| 要素セレクタ | h1 { ... } | すべての<h1>に適用 |
| クラスセレクタ | .title { ... } | class="title"属性を持つ要素に適用 |
| IDセレクタ | #main { ... } | id="main"属性を持つ要素に適用 |
| 属性セレクタ | a[href^="https"] { ... } | 特定属性を持つ要素に適用 |
2.3 プロパティと値の基本
| プロパティ | 値の例 | 効果 |
|---|---|---|
color | red / #ff0000 | 文字色 |
background-color | lightblue | 背景色 |
font-size | 18px | 文字サイズ |
margin | 20px | 外側の余白 |
padding | 10px | 内側の余白 |
border | 1px solid #000 | 枠線 |
2.4 例：シンプルなCSS
/* style.css */
body {
background-color: #f8f8f8;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
}
h1 {
color: #333;
font-size: 2.5rem;
text-align: center;
margin-top: 30px;
}
p {
color: #666;
margin: 0 auto;
max-width: 600px;
padding: 0 15px;
}
2.5 HTMLとCSSを結びつける
<link rel="stylesheet" href="style.css">
3. HTMLとCSSを分離するメリット
| 見出し | 従来（混在） | 分離（モダン） |
|---|---|---|
| 保守性 | 変更が混在 → 複雑化 | 役割が明確 → 変更しやすい |
| 再利用性 | 同じHTMLに同じスタイルを書きたくなる | CSSだけ編集で複数ページ共通化 |
| パフォーマンス | ファイルが肥大化 | CSSはキャッシュされ、再読み込みが高速 |
| 協業 | デザイナーとエンジニアの衝突が起こりやすい | デザイナーはCSS担当、エンジニアはHTML担当 |
4. 実践！ステップバイステップでページを作ろう
4.1 ステップ1：基本的なHTML構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ステップバイステップ例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="site-title">My Blog</h1>
</header>
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<article>
<h2>記事タイトル</h2>
<p>記事本文のサンプルです。 …</p>
</article>
</main>
<footer>
<p>© 2026 My Blog</p>
</footer>
</body>
</html>
4.2 ステップ2：まずはベーススタイル
/* style.css */
body { margin: 0; font-family: sans-serif; line-height: 1.6; }
/* レイアウト共通 */
header, nav, main, footer { padding: 20px; }
/* グローバルカラー */
:root {
--primary: #0066cc;
--bg: #f4f4f4;
}
/* 背景と文字カラー */
body { background: var(--bg); color: #333; }
4.3 ステップ3：ヘッダーの装飾
header {
background: var(--primary);
color: #fff;
text-align: center;
}
.site-title { margin: 0; }
4.4 ステップ4：ナビゲーションを横並びに
.main-nav ul {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.main-nav a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
}
.main-nav a:hover { background: rgba(255,255,255,0.2); }
4.5 ステップ5：記事をレイアウト
article {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
article h2 { color: var(--primary); }
4.6 ステップ6：フッター
footer { text-align: center; background: #222; color: #ddd; }
footer p { margin: 0; }
4.7 完成！
確認
- ブラウザで開くと、ヘッダー・ナビ・本文・フッターがそれぞれ違う色とレイアウトで表示されます。
- HTMLは「何」を配置したかの記述に専念し、CSSは「どう見せるか」を担います。
5. さらに深掘る：CSSの応用テクニック
5.1 Flexbox を使ってレイアウトを簡略化
.main-nav ul {
display: flex;
gap: 15px;
}
ポイント：
gapは Flexbox 専用。マージンを個別に扱わずにスペースを調整できます。
5.2 Gridで複雑レイアウトもサクサク
main {
display: grid;
grid-template-columns: 1fr 3fr; /* サイドバーと本文 */
gap: 20px;
}
5.3 CSS カスタムプロパティ（変数）を積極的に使う
:root {
--font-base: 16px;
--color-text: #333;
}
body { font-size: var(--font-base); color: var(--color-text); }
メリット：色やフォントサイズを一括変更できる。
注意点：古いブラウザでは未対応の場合があるので、必要ならポリフィルを検討。
5.4 レスポンシブデザインの実装
@media (max-width: 600px) {
.main-nav ul { flex-direction: column; }
main { grid-template-columns: 1fr; }
}
スマホ表示時にメニューを縦並びにし、本文を全幅で表示。
5.5 アニメーションとトランジション
a {
transition: color 0.3s ease;
}
a:hover { color: var(--primary); }
ホバーでフェードイン効果を簡単に追加できます。
6. よくある質問 (FAQ)
| 質問 | 答え |
|---|---|
| Q1: HTMLとCSSを1つのファイルに書くと便利じゃない？ | A：実は保守性が低まります。開発が進むにつれて、クラス名の衝突やスタイルの侵食が起こりやすくなるので、分離した方が安全です。 |
Q2: class と id は何が違う？ | A：id はページ内部で一意である必要があり、主にJavaScriptでの参照に使います。class は複数要素に共通のスタイルを付与するために使い、複数回使用できます。 |
| Q3: CSSで画像を表示したいのですが？ | A：<img src="…" alt="…"> をHTMLで配置し、CSSで width, height, border-radius などを調整します。 |
| Q4: CSSの書き方を高速に覚える方法は？ | A：Google FontsやBootstrapを利用して、既存のクラスを使うと手間が省けます。また、カスタムプロパティを定義しておけば、色やフォントを一括で変更できます。 |
| Q5: CSSファイルを複数に分けるべき？ | A：大規模なプロジェクトでは構造化するのがベストです。例えば layout.css, theme.css, utils.css などと分けるとメンテナンスが楽になります。 |
7. まとめ：HTMLとCSS、それぞれの役割をしっかり押さえよう
HTML
- 何（構造）が何であるかを書き、要素を階層で整理する
- データの意味や関係を記述する「語彙」を持つ
CSS
- 何がどのように見えるか（色・レイアウト・フォント）を制御
- 変更に強く、再利用性とメンテナンス性を高める
分離のメリット
- 保守性、再利用性、パフォーマンス向上
- デザイナーとエンジニアが協業しやすい
実践例でのポイント
- セレクタは「意味」を持つように命名（例：
.main-nav） - カスタムプロパティでテーマを一括管理
- Flexbox / Gridでレイアウトはコードが短くなる
- セレクタは「意味」を持つように命名（例：
これで「HTMLは何を、CSSはどう見せるか」の基本が掴めたはずです。
次のステップとしては、CSSフレームワーク（Bootstrap、Tailwind CSS など）の導入やJavaScriptとの組み合わせを学び、実際に動的なWebページを作ってみましょう。
ご自身のプロジェクトに合わせて、HTMLとCSSを手書きすることができれば、Web制作はもっと自由で楽しいものになります。ぜひ、今回学んだステップを活かし、実際にコードを書いてみてください！
コメント