6日でできる 新HTML&CSS入門｜PHPで動的なWebページを作る
HTMLにPHPを加えると、ページは状況に合わせて変化する。
サーバーで動く仕組みを理解して、現在時刻を表示する動的なWebページを作ってみよう。
HTMLとCSSを使うと、見出し、文章、画像、表、フォームなどを配置したWebページを作れます。ただし、HTMLだけで作ったページは、基本的にあらかじめ書いた内容をそのまま表示する静的なページです。誰が見ても同じ内容が表示され、現在時刻やユーザーごとの情報を自動で変えることはできません。
そこで登場するのがPHPです。PHPは、Webサーバー側で動作するサーバーサイドスクリプト言語です。HTMLの中にPHPコードを埋め込むことで、現在の日付や時刻を表示したり、フォームから送信された内容を受け取ったり、データベースから情報を取り出してページに表示したりできます。
たとえば、お問い合わせフォーム、ログイン機能、掲示板、ブログ、会員ページ、商品一覧ページなどは、ユーザーの操作や保存されたデータに応じて内容が変わります。このようなページを作るときに、PHPのようなサーバーサイド言語が使われます。
PHPを学ぶと、HTMLで作ったページに動的な機能を追加できるようになります。最初は、画面に文字を表示するechoや、日付や時刻を取得するdate関数など、シンプルな処理から始めると理解しやすいです。
この記事では、PHPの基本的な特徴、PHPコードの書き方、MAMPを使った実行準備、PHPファイルの保存場所、ブラウザでの実行方法、現在時刻を表示するサンプルプログラムを、初心者にも分かりやすく解説します。
PHPとは何か
PHPは、Webページを動的に生成するためによく使われるプログラミング言語です。正式にはHypertext Preprocessorの略とされています。PHPはブラウザ上で直接実行されるのではなく、Webサーバー上で実行されます。
ユーザーがPHPファイルへアクセスすると、WebサーバーがPHPプログラムを処理します。その結果として作られたHTMLがブラウザへ送られ、画面に表示されます。つまり、ブラウザに届く時点では、PHPの処理結果がHTMLとして表示される仕組みです。
| 特徴 | 説明 |
|---|---|
| サーバーサイド言語 | ブラウザではなく、Webサーバー上で実行される |
| HTMLに埋め込める | HTMLの中にPHPコードを書いて、必要な部分だけ動的にできる |
| データベースと連携しやすい | MySQLなどと組み合わせて、投稿や会員情報を扱える |
| 無料で利用できる | オープンソースの言語として利用できる |
| 学習しやすい | 多くのレンタルサーバーやローカル環境で利用しやすい |
PHPは、HTMLやCSSの学習後に取り組みやすいサーバーサイド言語です。特に、Webページの中にPHPコードを埋め込めるため、HTMLで作った画面に少しずつ動的な処理を追加できます。
静的Webページと動的Webページの違い
PHPを理解するには、静的Webページと動的Webページの違いを押さえておくと分かりやすくなります。
静的Webページは、あらかじめ作成されたHTMLファイルをそのまま表示するページです。会社概要や固定のお知らせページなど、内容があまり変わらないページに向いています。
動的Webページは、アクセスしたタイミング、ユーザーの入力、ログイン状態、データベースの内容などによって表示内容が変わるページです。
| 種類 | 特徴 | 例 |
|---|---|---|
| 静的Webページ | HTMLに書かれた内容をそのまま表示する | 会社概要、プロフィール、固定ページ |
| 動的Webページ | 状況やデータに応じて表示内容が変わる | ログイン後のマイページ、掲示板、検索結果 |
| PHPで作るページ | サーバーでPHPを実行し、HTMLを生成する | 現在時刻表示、フォーム処理、投稿一覧 |
たとえば、HTMLに「こんにちは」と書けば、いつ見ても同じ文字が表示されます。一方、PHPで現在時刻を取得して表示すれば、アクセスするたびに表示される時刻が変わります。この「状況によって表示が変わる」ことが、動的Webページの基本です。
図1：PHPはサーバーで実行され、結果がHTMLとして表示される
この図から分かること
PHPはブラウザで直接実行されるのではなく、Webサーバー上で実行されます。ブラウザがPHPファイルへアクセスすると、サーバーがPHPコードを処理し、その結果をHTMLとして返します。そのため、現在時刻やデータベースの内容など、状況に応じた情報をページに表示できます。
PHPの基本構造
PHPのコードは、<?php と ?> の間に書きます。このPHPコードの部分が、サーバー側で実行されます。
<?php
echo "こんにちは、PHPの世界！";
?>echoは、文字列や値を画面に出力するための命令です。上の例では、「こんにちは、PHPの世界！」という文字がHTMLの一部として表示されます。
| 書き方 | 意味 |
|---|---|
| <?php | PHPコードの開始 |
| ?> | PHPコードの終了 |
| echo | 文字列や値を出力する |
| ; | PHPの命令の終わりを示す |
PHPでは、命令の終わりにセミコロンを付けます。echoで文字列を表示する場合、文字列はダブルクォーテーションで囲むことができます。
HTMLの中にPHPを埋め込む
PHPはHTMLの中に埋め込めます。これにより、ページ全体はHTMLで作り、一部だけPHPで動的に表示することができます。
<h1>PHPテストページ</h1>
<p>
<?php
echo "この文章はPHPで表示しています。";
?>
</p>この例では、h1やpは通常のHTMLです。その中にPHPコードを入れて、pの中身として文字を出力しています。
| 部分 | 役割 |
|---|---|
| h1 | ページの見出しを表示する |
| p | 文章のまとまりを作る |
| <?php ... ?> | PHPコードを書く |
| echo | ブラウザに表示する文字を出力する |
PHPを使うと、HTMLの固定部分と、PHPで変化する部分を組み合わせられます。最初は、見出しや本文の中にPHPで文字を表示するところから練習するとよいでしょう。
PHPを実行するにはWebサーバーが必要
PHPファイルは、HTMLファイルのようにダブルクリックして開くだけでは正しく実行できません。PHPはサーバー側で動く言語なので、PHPを実行できるWebサーバー環境が必要です。
学習用のローカル環境としてよく使われるのがMAMPです。MAMPを使うと、自分のパソコン上にApacheやPHPを含むローカルサーバー環境を用意できます。
| 項目 | 説明 |
|---|---|
| Webサーバー | ブラウザからのリクエストを受け取り、ページを返す仕組み |
| PHP | サーバー上で実行されるプログラム |
| MAMP | ローカル環境でWebサーバーやPHPを動かすためのツール |
| localhost | 自分のパソコン上のサーバーを表す名前 |
PHPを実行するときは、MAMPを起動し、Apacheサーバーを動かした状態でブラウザからlocalhostへアクセスします。
PHPファイルの保存場所
WindowsでMAMPを使う場合、PHPファイルは通常、次のフォルダー内に保存します。
C:\MAMP\htdocsたとえば、lesson57_1.phpというファイルを作る場合は、次のような場所に保存します。
C:\MAMP\htdocs\lesson57_1.phpこのhtdocsフォルダーは、Webサーバーから公開されるファイルを置く場所です。ブラウザでhttp://localhost/lesson57_1.phpへアクセスすると、htdocs内のlesson57_1.phpが実行されます。
| 保存場所 | ブラウザでのアクセス例 |
|---|---|
| C:\MAMP\htdocs\lesson57_1.php | http://localhost/lesson57_1.php |
| C:\MAMP\htdocs\sample.php | http://localhost/sample.php |
| C:\MAMP\htdocs\test\index.php | http://localhost/test/index.php |
保存場所とURLの対応を理解しておくと、PHPファイルを実行するときに迷いにくくなります。
図2：MAMPのhtdocsにPHPファイルを保存してlocalhostで開く
この図から分かること
PHPファイルは、MAMPのhtdocsフォルダーに保存し、Apacheサーバーを起動してからブラウザでlocalhostへアクセスして実行します。HTMLファイルのように直接開くのではなく、Webサーバーを通して実行することがポイントです。保存場所とURLの関係を理解すると、PHPの実行手順が分かりやすくなります。
PHPファイルの拡張子は.phpにする
PHPコードを含むファイルは、基本的に拡張子を.phpにします。拡張子が.htmlのままだと、通常の設定ではPHPコードが実行されず、そのまま文字として扱われることがあります。
| ファイル名 | 内容 |
|---|---|
| lesson57_1.php | PHPを実行するためのファイル |
| index.php | トップページとして使われることが多いPHPファイル |
| contact.php | お問い合わせ処理などに使われるPHPファイル |
| sample.html | 通常のHTMLファイル。PHPは基本的に実行されない |
PHPを含むページを作るときは、ファイル名をlesson57_1.phpのように.phpで保存しましょう。HTMLが含まれていても、PHPコードを実行したい場合は.phpにすることが大切です。
PHPで現在時刻を表示するサンプル
ここでは、PHPを使って現在の日時を表示するサンプルを作ります。HTMLの中にPHPコードを埋め込み、date関数で現在時刻を取得して表示します。
ファイル名： lesson57_1.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPで現在時刻を表示する</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
margin: 40px;
line-height: 1.7;
background-color: #f7fbff;
color: #222222;
}
h1 {
color: #205c8a;
}
.time-box {
background-color: #ffffff;
border: 1px solid #b8d7ee;
border-radius: 8px;
padding: 18px;
max-width: 520px;
}
.message {
color: #205c8a;
font-weight: bold;
}
</style>
</head>
<body>
<h1>PHPで作る動的なWebページ</h1>
<div class="time-box">
<p class="message">
<?php
date_default_timezone_set("Asia/Tokyo");
echo "現在の日時は " . date("Y年m月d日 H時i分s秒") . " です。";
?>
</p>
<p>このページは、アクセスしたタイミングに合わせてPHPが日時を作成しています。</p>
</div>
</body>
</html>サンプルPHPのコード解説
サンプルでは、HTMLの中にPHPコードを埋め込んでいます。特に重要なのは、date_default_timezone_set、echo、date、文字列連結です。
| コード | 内容 |
|---|---|
| <?php ... ?> | PHPコードを書く範囲 |
| date_default_timezone_set("Asia/Tokyo") | タイムゾーンを日本時間に設定する |
| echo | 文字列や値を画面に出力する |
| date("Y年m月d日 H時i分s秒") | 現在の日時を指定した形式で取得する |
| . | 文字列と値を連結する |
| ; | PHPの命令の終わり |
PHPでは、文字列と関数の結果をつなげるときにドットを使います。サンプルでは、「現在の日時は 」という文字列と、date関数で取得した日時と、「 です。」という文字列をつなげています。
echo "現在の日時は " . date("Y年m月d日 H時i分s秒") . " です。";この1行によって、実行時点の日時を含む文章が画面に表示されます。
date関数で日時を取得する
date関数は、現在の日付や時刻を指定した形式で取得するための関数です。フォーマット文字を使って、年、月、日、時、分、秒などを表示できます。
| 指定 | 表示される内容 |
|---|---|
| Y | 西暦4桁 |
| m | 月を2桁で表示 |
| d | 日を2桁で表示 |
| H | 時を24時間表記で表示 |
| i | 分を2桁で表示 |
| s | 秒を2桁で表示 |
たとえば、date("Y年m月d日")と書くと、2026年07月25日のように日付を表示できます。date("H:i:s")と書くと、14:30:10のように時刻を表示できます。
| コード | 表示例 |
|---|---|
| date("Y年m月d日") | 2026年07月25日 |
| date("H:i:s") | 14:30:10 |
| date("Y/m/d H:i") | 2026/07/25 14:30 |
日付や時刻は、ニュースページ、予約ページ、更新日時、ログ、投稿日時など、さまざまな場面で使われます。PHPのdate関数は、動的なWebページを学ぶ最初の練習に向いています。
タイムゾーンを設定する理由
サンプルでは、date_default_timezone_set("Asia/Tokyo")を使っています。これは、PHPで扱う日時の基準を日本時間にするための指定です。
date_default_timezone_set("Asia/Tokyo");サーバーの設定によっては、PHPの日時が日本時間ではなく、別の地域の時間になる場合があります。そのため、学習用のサンプルでは、明示的にAsia/Tokyoを指定しておくと分かりやすくなります。
| 指定 | 意味 |
|---|---|
| Asia/Tokyo | 日本時間を使う |
| date_default_timezone_set | PHPのタイムゾーンを設定する関数 |
| date | 設定されたタイムゾーンに基づいて日時を表示する |
日時を扱うWebアプリでは、タイムゾーンの考え方が大切です。投稿日時や予約日時を表示する場合、どの地域の時刻として扱うのかを意識しておきましょう。
図3：PHPで現在日時を作り、HTMLの中に表示する
この図から分かること
PHPでは、date関数を使って現在日時を取得し、echoでHTMLの中に出力できます。ページを実行したタイミングによって表示内容が変わるため、HTMLだけの固定ページとは違う動的な表示を作れます。小さなPHPコードをHTMLに埋め込むだけでも、ページに動きを加えられます。
PHPプログラムの実行手順
作成したPHPファイルは、MAMPを起動してからブラウザで開きます。手順を整理すると次のようになります。
| 手順 | 内容 |
|---|---|
| 1 | lesson57_1.phpを作成する |
| 2 | C:\MAMP\htdocsに保存する |
| 3 | MAMPを起動する |
| 4 | Apacheサーバーをスタートする |
| 5 | ブラウザでhttp://localhost/lesson57_1.phpへアクセスする |
| 6 | 現在日時が表示されることを確認する |
大切なのは、ファイルを直接ダブルクリックして開くのではなく、http://localhost/lesson57_1.phpのようにWebサーバー経由でアクセスすることです。
操作手順
１．上記プログラムを「lesson57_1.php」として保存
保存場所例：C:\MAMP\htdocs\lesson57_1.php
２．MAMPを起動（Apacheサーバーをスタート）
３．Webブラウザで
「http://localhost/lesson57_1.php」
と入力してアクセスすると、ページに現在の日時が表示されます。
ブラウザの表示例
表示例は次のようになります。
現在の日時は 2026年07月25日 14時30分10秒 です。表示される日時は、ページを実行したタイミングによって変わります。これが、PHPで動的なWebページを作る基本的な例です。
localhostとは
localhostは、自分のパソコン上で動いているサーバーを表す名前です。MAMPでApacheを起動すると、自分のパソコンが学習用のWebサーバーとして動きます。
| 表記 | 意味 |
|---|---|
| localhost | 自分のパソコン上のWebサーバー |
| http://localhost/ | htdocsの中をWebページとして表示する入口 |
| http://localhost/lesson57_1.php | htdocs内のlesson57_1.phpを実行するURL |
MAMPを使ってPHPを学習するときは、localhostというURLをよく使います。PHPファイルをhtdocsに置き、localhostからアクセスする、という流れを覚えておきましょう。
PHPが表示されないときの確認ポイント
PHPを実行しても思ったように表示されない場合は、次の点を確認します。
| よくある状態 | 原因 | 確認すること |
|---|---|---|
| PHPコードがそのまま表示される | Webサーバー経由で開いていない、または拡張子が.phpではない | localhostでアクセスしているか、拡張子が.phpか |
| ページが開かない | MAMPやApacheが起動していない | MAMPを起動し、Apacheが動いているか |
| Not Foundになる | 保存場所やファイル名が違う | C:\MAMP\htdocsに保存したか、URLのファイル名が合っているか |
| 日時がずれる | タイムゾーンの設定が違う | date_default_timezone_set("Asia/Tokyo")を指定しているか |
| 画面が真っ白になる | PHPコードにエラーがある | セミコロン、カッコ、ダブルクォーテーションを確認する |
PHPの学習では、エラーが出ることも大切な経験です。まずは保存場所、URL、拡張子、MAMPの起動状態を確認し、その後にPHPコードの書き間違いを見直しましょう。
PHPでできること
PHPを使うと、単に日時を表示するだけでなく、さまざまなWeb機能を作れるようになります。
| できること | 例 |
|---|---|
| フォーム処理 | お問い合わせ内容を受け取る |
| ログイン機能 | ユーザーIDとパスワードを確認する |
| 掲示板 | 投稿を保存して一覧表示する |
| ブログ | 記事を登録して表示する |
| 会員ページ | ログイン中のユーザー情報を表示する |
| データベース連携 | MySQLから商品や投稿を取得する |
| ファイル操作 | 画像やテキストファイルを扱う |
| Web API連携 | 外部サービスのデータを取得する |
PHPは、HTMLで作った画面と、サーバー側の処理をつなぐ役割を持ちます。フォームから送られたデータを受け取り、必要な処理を行い、結果をページに表示することで、Webアプリらしい動きを作れます。
PHP学習で次に押さえたい内容
現在時刻を表示するサンプルが理解できたら、次はPHPの基本構文を学んでいくとよいでしょう。
| 学習項目 | 内容 |
|---|---|
| 変数 | 値を名前付きで保存する |
| if文 | 条件によって処理を分ける |
| 繰り返し | 同じ処理を複数回実行する |
| 配列 | 複数の値をまとめて扱う |
| 関数 | よく使う処理をまとめる |
| フォーム連携 | 入力内容をPHPで受け取る |
| セキュリティ | 入力値のチェックや安全な出力を行う |
| データベース連携 | MySQLに保存したデータを扱う |
PHPは、少しずつ機能を試しながら学ぶと理解しやすいです。まずはechoで出力し、次に変数や条件分岐を使い、フォームからの入力を受け取る流れへ進むと、動的Webページの仕組みが自然に見えてきます。
タグや関数の確認表
今回出てきた主なタグ、拡張子、関数を整理しておきます。
| 項目・関数名 | 説明 |
|---|---|
| <?php ... ?> | PHPコードを書く範囲 |
| echo | 文字列や値を出力する |
| date | 指定した形式で現在の日付や時刻を取得する |
| date_default_timezone_set | PHPで使うタイムゾーンを設定する |
| .php | PHPを実行するためのファイル拡張子 |
| MAMP | ローカルWebサーバー環境 |
| htdocs | MAMPでWeb公開用ファイルを置くフォルダー |
| localhost | 自分のパソコン上のWebサーバーを表す名前 |
| meta charset="UTF-8" | 文字コードを指定する |
| title | ブラウザタブに表示されるページタイトル |
| style | ページ内にCSSを書くためのタグ |
PHPを学ぶときは、HTML、CSS、PHPがどの役割を持っているのかを分けて考えることが大切です。HTMLは構造、CSSは見た目、PHPはサーバー側の処理を担当します。
PHPで動的ページを作るための考え方
PHPは、Webページに動的な機能を追加するためのサーバーサイド言語です。HTMLの中にPHPコードを埋め込むことで、現在時刻の表示、フォーム処理、データベース連携などができるようになります。
最初に理解しておきたいのは、PHPはブラウザで直接動くのではなく、Webサーバーで実行されるという点です。MAMPを起動し、PHPファイルをhtdocsに保存し、localhostからアクセスすることで、PHPプログラムを実行できます。
今回のサンプルでは、date_default_timezone_setで日本時間を設定し、date関数で現在日時を取得し、echoで画面に表示しました。とても短いコードですが、アクセスしたタイミングによって表示が変わるため、動的Webページの基本を体験できます。
PHPに慣れてくると、お問い合わせフォーム、ログイン機能、掲示板、ブログ、会員ページなど、より実用的なWebアプリへ発展させられます。まずは小さなPHPコードを実行し、HTMLの中で処理結果がどのように表示されるのかを確認しながら学んでいきましょう。