PHPの学習を始めると、HTMLやCSS、JavaScriptといった他の言語の名前も必ず目にしますよね。「たくさんあって混乱する！」「それぞれ何が違うの？」と感じる方も多いのではないでしょうか。
実は、私たちが普段見ているWebサイトは、これらの複数の言語がそれぞれの役割を分担することで成り立っています。
この記事では、Webサイト制作におけるHTML, CSS, JavaScript, PHPの4つの言語の役割分担を、初心者の方にも分かりやすく解説します。それぞれの得意なことを理解すれば、PHPがWebの世界でどのような立ち位置にいるのかが明確になりますよ。
Webサイト制作を「家づくり」に例えてみよう
それぞれの言語の役割を理解するために、Webサイト制作を「家づくり」に例えて考えてみましょう。
- HTML → 骨組みや構造: 家の柱、壁、屋根など、建物の基本的な構造を作る役割です。
- CSS → 内装や外装のデザイン: 壁紙を貼ったり、色を塗ったりして、家の見た目を美しく装飾する役割です。
- JavaScript → 家電や設備: 自動ドアが開いたり、センサーライトが点灯したりと、家にインタラクティブな「動き」を加える役割です。
- PHP → インフラや裏側の仕組み: 電気、水道、ガスを供給したり、セキュリティシステムを管理したりする、目には見えないけれど家を機能させるための重要な役割です。
このように、それぞれの専門家が協力することで、快適で機能的な家（Webサイト）が完成するのです。では、各言語の役割をもう少し詳しく見ていきましょう。
各言語の役割とできること
1. HTML：ページの「骨格」を作る言語
HTML (HyperText Markup Language)は、Webページの構造を定義するための言語です。文章に見出しをつけたり、段落を分けたり、画像を配置したり、表を作成したりと、ページに表示されるコンテンツの骨格を組み立てます。
ブラウザは、このHTMLを読み取って「ここが見出しで、ここが段落だな」と解釈し、画面に表示します。すべてのWebページの基礎となる、最も重要な言語です。
【HTMLのコード例】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のホームページ</title>
</head>
<body>
<h1>サイトへようこそ</h1>
<p>このサイトでは様々な情報をお届けします。</p>
<h2>おすすめの趣味</h2>
<ul>
<li>読書</li>
<li>映画鑑賞</li>
<li>散歩</li>
</ul>
</body>
</html>
2. CSS：ページの「見た目」を装飾する言語
CSS (Cascading Style Sheets)は、HTMLで作った骨格にデザインを施すための言語です。文字の色や大きさを変えたり、背景に色をつけたり、要素の配置を調整したりと、Webページの見た目を担当します。
HTMLとCSSの役割を分けることで、ページの構造とデザインを別々に管理でき、効率的なサイト制作が可能になります。
【CSSのコード例】 このコードをHTMLの<head>内に追加すると、<h1>の見出しが青色になります。
<style>
h1 {
color: blue; /* 文字色を青にする */
border-bottom: 2px solid blue; /* 下に2pxの青い実線を引く */
}
</style>
3. JavaScript：ページに「動き」をつける言語
JavaScriptは、Webページにインタラクティブな動きを加えるための言語です。HTMLやCSSが静的な「見た目」を作るのに対し、JavaScriptはユーザーの操作に応じてブラウザ上でリアルタイムに表示を変化させることができます。
- 画像のスライドショー
- クリックすると開くメニュー（アコーディオン）
- 入力フォームのエラーチェック
これらの機能はJavaScriptによって実現されています。主にユーザーが直接触れる部分（クライアントサイド）の挙動を担当します。
4. PHP：サーバー側で動く「縁の下の力持ち」
そして、今回の主役であるPHPです。PHPは、前の3つとは異なり、Webサーバー上で動作する言語です（サーバーサイド言語）。ユーザーの目には直接見えない、Webサイトの裏側の処理を担当します。
- データベースとの連携: ユーザー情報を保存したり、商品データを検索して取り出したりします。
- お問い合わせフォーム: 入力された内容を受け取り、メールを送信します。
- ログイン機能: IDとパスワードを検証し、ユーザーごとに異なるページを表示します。
PHPは、リクエストがあるたびにサーバーでプログラムを実行し、その結果をHTMLとして生成してブラウザに返します。JavaScriptのようにブラウザ上でリアルタイムに表示を変えることはできませんが、データベースと連携して、リクエストに応じた全く新しいページを作り出すことができるのが最大の強みです。
PHPはHTMLを動的に生成する
PHPの役割を理解する上で最も重要なのは、「PHPの最終的な仕事はHTMLを生成すること」です。
PHPプログラムの中にHTMLを書き、<?php ... ?> の部分でデータベースから取得したデータを埋め込むことで、動的なWebページが完成します。
PHP 8による動的なリスト生成のサンプルコード
以下のコードは、データベースから取得したという想定の商品配列を使い、PHPでHTMLのリストを動的に生成する例です。
<?php
// データベースから取得したという想定の商品の配列データ
$products = [
['id' => 101, 'name' => 'オーガニックコーヒー豆', 'price' => 1800],
['id' => 102, 'name' => '国産はちみつ', 'price' => 2500],
['id' => 103, 'name' => '手作りグラノーラ', 'price' => 1200]
];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>商品リスト | Dynamic Store</title>
<style>
body { font-family: sans-serif; color: #333; }
.container { width: 80%; margin: 20px auto; }
.product-table { border-collapse: collapse; width: 100%; }
.product-table th, .product-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.product-table th { background-color: #f2f2f2; }
</style>
</head>
<body>
<div class="container">
<h1>今週のおすすめ商品</h1>
<table class="product-table">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $item): ?>
<tr>
<td><?php echo htmlspecialchars($item['name'], ENT_QUOTES, 'UTF-8'); ?></td>
<td><?php echo number_format($item['price']); ?> 円</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</body>
</html>
このコードでは、PHPのforeachループを使って配列$productsの中身を一つずつ取り出し、HTMLのテーブル行（<tr>）とセル（<td>）を生成しています。もし商品の数が増えたり減ったりしても、PHPが自動的に対応してくれるため、HTMLを直接書き換える必要がありません。
まとめ
最後に、各言語の役割をもう一度おさらいしましょう。
| 言語 | 担当 | 動作場所 | 主な役割 |
| HTML | 構造 | クライアント（ブラウザ） | ページの骨格、コンテンツの定義 |
| CSS | 見た目 | クライアント（ブラウザ） | 色、レイアウトなどのデザイン |
| JavaScript | 動き | クライアント（ブラウザ） | ユーザー操作に応じた動的な変化 |
| PHP | 裏側処理 | サーバー | データベース連携、HTMLの動的生成 |
これらの言語は、どれか一つが優れているというわけではなく、それぞれが得意な分野で力を発揮する「チーム」のようなものです。
PHPを学ぶことは、Webサイトの裏側を支える強力な武器を手に入れることです。HTMLやCSSの基礎を固めながらPHPの学習を進めることで、本格的なWebアプリケーション開発への道が開けるでしょう。
