【PHP初心者向け】HTMLにPHPを埋め込む方法を分かりやすく解説

PHPでHTMLを動的に作成する方法、しっかり理解できていますか？

PHPはもともと、HTMLを動的に作成するためのツールとして生み出されたプログラミング言語です。しかし、学習して間もない頃は、PHPとHTMLの違いや関係を理解できず、どのように応用すればよいか分からず、悩んでしまうことでしょう。

そこで今回は、

・PHPでHTMLを動的に作成する仕組み
・HTMLにPHPを埋め込むためのいくつかの方法

について解説します。

1 HTMLとPHPの関係とは？
2 PHPを埋め込むための基本
3 PHPを使ってHTMLを動的に作成する方法
4 まとめ

HTMLとPHPの関係とは？

HTMLにPHPの処理を埋め込む方法を理解するには、各言語の特徴と関係性についてあらかじめ把握するのがポイントです。

まずは、各言語の特徴について解説していきましょう。

HTMLはWebページの設計図

HTMLは「HyperText Markup Language」の略で、平たく言えばWebページの設計図のようなものです。HTML形式のファイルには、Webページのタイトル・見出し・本文などの情報が含まれています。

ブラウザを利用してWebページを閲覧できるのは、WebサーバーからHTML形式のファイルを取得し、ブラウザが解析してユーザーに理解できる形で表示しているからです。

HTMLファイルは、開発者の手によって変更を加えない限り中身が変化することはありません。このようなWebページのことを静的ページ（静的コンテンツ）と呼び、後述するPHPで作成されたページと区別されます。

HyperTextとは？

HyperText（ハイパーテキスト）は、複数存在するテキストを相互に関連付ける仕組みのことです。HTMLの<a>タグを使ってリンクを貼ることで別のテキスト、つまりHTMLファイルを参照できるようになります。

HTMLはプログラミング言語ではない

HTMLは、その名の通りマークアップ言語の1つでプログラミング言語ではありません。マークアップ言語とは、テキストに対して「このテキストはタイトル」や「このテキストはリスト形式で表現する」といった指定を行うための言語です。

PHPはHTMLファイルを作成する

PHPは「PHP: Hypertext Preprocessor」の略で、平たく言えばHTMLを作成するためのプログラミング言語です。もともとは、ブラウザのリクエストに応じてHTMLを作成するためのツールとして開発されました。

PHPによって作成されたWebページは動的ページ（動的コンテンツ）と呼び、ユーザーの要求した情報に応じて異なるWebページを送信することができるのがメリットとして挙げられます。

HTMLとPHPの関係

HTMLとPHPの特徴を簡単にまとめると、以下の通りです。

言語	特徴
HTML	Webページの設計図で、開発者の手が加わらない限り内容は変化しない。
PHP	ブラウザのリクエストに応じてHTMLファイルを生成する。

ここからは、HTMLとPHPの関係について解説します。

例として、ショッピングサイトでユーザーが欲しい商品を検索欄に入力・検索し、検索結果を表示するとしましょう。一連の流れを図で示すと、以下のようになります。

Webサーバーで動作しているプログラムが、クライアント（ブラウザ）からリクエストを受け取ると、PHPのプログラムを起動させます。PHPプログラムは、リクエストの内容に応じてHTMLを作成し、最終的にクライアントに送信します。

このやり方であれば、ユーザーのリクエストに応じてWebページを柔軟にカスタマイズができ、開発者がいちいち変更を加える必要がありません。

PHPとhtmlの違いを理解しよう！プログラミングするなら知っておきたいこと

こんにちは、近頃筋トレにはまっているkaeです。シックスパックの腹筋を目指して日夜奮闘中ですが、なかなかきれ ...

PHPを埋め込むための基本

HTMLのファイルにPHPの処理を埋め込むことで、動的なWebページを作成可能です。PHPの処理を埋め込む際には、PHPタグを利用します。利用できるタグは、以下の3種類です。

<?php で始まるタグ
<?= で始まるタグ
<? で始まるタグ

<?php で始まるタグ

1つ目に紹介するのは「<?php」で始まるタグです。このタグと終了タグ「?>」で囲まれた部分がPHPの処理対象です。以下のサンプルコードをコピペして、php形式で保存してください。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <!-- ここより下がPHPの処理対象 -->
    <?php echo 'ここには本文が表示されます。'; ?>
    <!-- ここより上がPHPの処理対象 -->

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<?php echo 'ここには本文が表示されます。'; ?>

ありがとうございました。

</body>

</html>

ブラウザの表示結果は以下の通りです。

このページ上で右クリックし、「ページのソースを表示」をクリックしてソースを見てみると以下の通り表示されていることが分かります。

サンプルコードに記述されていた「echo」は、PHPの関数の1つで文字列を出力する機能を備えています。

今回のサンプルコードでは、<?php、?>で囲まれた部分が処理され、「ここには本文が表示されます。」という文字列が出力されたため、上記画面のような結果となりました。

また、タグで囲まれていれば間に何行あっても問題ないため、以下のサンプルコードのように記述することも可能です。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <!-- ここより下がPHPの処理対象 -->
    <?php 
        echo 'ここには本文が表示されます。';
        
        $val1 = 2;
        $val2 = 4;
        $sum = $val1 + $val2;

        echo $val1." + ".$val2." = ".$sum;
    
    ?>
    <!-- ここより上がPHPの処理対象 -->

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<?php

echo 'ここには本文が表示されます。';

$val1 = 2;

$val2 = 4;

$sum = $val1 + $val2;

echo $val1." + ".$val2." = ".$sum;

ありがとうございました。

</body>

</html>

表示結果は、以下の通りです。

<?= で始まるタグ

2つ目に紹介するタグは「<?=」で始まるタグです。PHPのecho関数と同等の機能を持ち、以下のサンプルコードのように、単に文字列を出力したい場合に利用します。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <!-- ここより下がPHPの処理対象 -->
    <?= 'ここには本文が表示されます。'; ?>
    <!-- ここより上がPHPの処理対象 -->

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<?= 'ここには本文が表示されます。'; ?>

ありがとうございました。

</body>

</html>

表示結果は、以下の通りです。

ただし、以下のサンプルコードのように、一度セミコロンで処理を区切ると以降は処理されないことに注意してください。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <!-- ここより下がPHPの処理対象 -->
    <?= 'ここには本文が表示されます。';
        '一度セミコロンで区切った場合、それ以降は処理されません'; ?>
    <!-- ここより上がPHPの処理対象 -->

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<?= 'ここには本文が表示されます。';

'一度セミコロンで区切った場合、それ以降は処理されません'; ?>

ありがとうございました。

</body>

</html>

<? で始まるタグ

3つ目に紹介するタグは「<?」で始まるタグです。phpの初期設定ファイルのphp.iniに記載されているshort_open_tagディレクティブをOnにすることで有効となります。

short_open_tag=On ;「<?」を有効にする
;short_open_tag=Off ;「<?」を無効にする

1 2	short_open_tag=On ;「<?」を有効にする ;short_open_tag=Off ;「<?」を無効にする

以下のサンプルコードのように、書き方は他2つの開始タグと変わりません。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <!-- ここより下がPHPの処理対象 -->
    <?  // ← php.iniのshort_open_tagをOnにすると利用できる
        
        echo 'ここには本文が表示されます。';
        
        $val1 = 2;
        $val2 = 4;
        $sum = $val1 + $val2;

        echo $val1." + ".$val2." = ".$sum;
    
    ?>
    <!-- ここより上がPHPの処理対象 -->

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<? // ← php.iniのshort_open_tagをOnにすると利用できる

echo 'ここには本文が表示されます。';

$val1 = 2;

$val2 = 4;

$sum = $val1 + $val2;

echo $val1." + ".$val2." = ".$sum;

ありがとうございました。

</body>

</html>

PHPを記述する際は、<?php か <?= の使用を推奨

<?タグは「php」を省略して記述できるのがメリットです。しかし、XML形式の文を含んでいる場合、<?タグで囲むとエラーになります。これは、XMLにおいても<?xmlで始まる記述が仕様として存在しているからです。
したがって、特段の理由がない限りは、<?phpまたは<?=で始まるタグを使用することが推奨されています。

注意

php.iniを変更した際は、一度サーバーを再起動しましょう。php.iniは、サーバーが起動した際に1度だけ読み込まれるファイルであるため、サーバー起動中に自動的に反映されません。

PHPを使ってHTMLを動的に作成する方法

ここからは、PHPでHTMLを動的に作成する方法について、サンプルコード付きで解説していきます。

文字列の出力

文字列を出力する方法は、主に以下の3つが存在します。

方法	特徴
echo関数の使用	文字列を出力する機能を持ち、結合演算子（.）を利用可能。
print関数の使用	文字列を出力する機能を持つが、結合演算子は利用不可能。常に戻り値「1」を返す。
ヒアドキュメントの使用	指定した文字に達するまで、文字列を出力可能。

上記の方法で出力した文字列は、HTMLの文字列として解釈されます。したがって、以下のサンプルコードのようにタグを含んでいる場合は、HTMLのタグとして機能します。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <?php
        // echo関数による文字列出力
        echo '<p style="color:red;">'.'この文章は赤色で表示されます。'.'</p>';

        // print関数による文字列出力
        print '<p><strong>この文章は太字で表示されます。</strong></p>';

        // ヒアドキュメントによる文字列出力
        echo <<<EOM

        <div style="border: 1px solid green;">
            <p>この文章は、全体が緑色の枠線で表示されます。</p>
            <p>HTMLタグを出力すると、ブラウザはHTMLタグとして解釈します。</p>
        </div>

        EOM;

    ?>

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<?php

// echo関数による文字列出力

echo ''.'この文章は赤色で表示されます。'.'';

// print関数による文字列出力

print 'この文章は太字で表示されます。';

// ヒアドキュメントによる文字列出力

echo <<<EOM

この文章は、全体が緑色の枠線で表示されます。

HTMLタグを出力すると、ブラウザはHTMLタグとして解釈します。

</div>

EOM;

ありがとうございました。

</body>

</html>

ブラウザで確認すると、以下のようにHTMLタグとして解釈されることが分かります。

もし、HTMLタグを直接文字列として出力したい場合は、htmlspecialchars関数を使って以下のように記述しましょう。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <p>おはようございます。</p>

    <?php
        // echo関数による文字列出力
        echo htmlspecialchars('<p style="color:red;">'.'この文章は赤色で表示されます。'.'</p>');

        // print関数による文字列出力
        print htmlspecialchars('<p><strong>この文章は太字で表示されます。</strong></p>');

        // ヒアドキュメントによる文字列出力
        echo htmlspecialchars(<<<EOM

        <div style="border: 1px solid green;">
            <p>この文章は、全体が緑色の枠線で表示されます。</p>
            <p>HTMLタグを出力すると、ブラウザはHTMLタグとして解釈します。</p>
        </div>

        EOM);

    ?>

    <p>ありがとうございました。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

おはようございます。

<?php

// echo関数による文字列出力

echo htmlspecialchars(''.'この文章は赤色で表示されます。'.'');

// print関数による文字列出力

print htmlspecialchars('この文章は太字で表示されます。');

// ヒアドキュメントによる文字列出力

echo htmlspecialchars(<<<EOM

この文章は、全体が緑色の枠線で表示されます。

HTMLタグを出力すると、ブラウザはHTMLタグとして解釈します。

</div>

EOM);

ありがとうございました。

</body>

</html>

ブラウザで確認すると、以下のようにHTMLタグを直接文字列として出力されていることが分かります。

PHPで文字列をHTMLに出力する方法を解説【初心者向け】

PHPを使えば、変数に格納した文字列をHTMLに出力することができます。最も広く使われているのが「echo」を ...

条件分岐による処理

条件によって出力するHTMLを変えたい場合は、PHPのif文やswitch文を利用しましょう。

以下のサンプルコードは、アクセスした時間（午前/午後）によって出力する文字列を変更する処理を、if文で実装しています。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <?php

    echo "現在の時刻は".date("H:i")."です。";

    if(date("A") === 'AM'){ ?>
        <p>午前中です。</p>
    <?php }else{ ?>
        <p>正午を過ぎました。</p>
    <?php } ?>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

<?php

echo "現在の時刻は".date("H:i")."です。";

if(date("A") === 'AM'){ ?>

午前中です。

<?php }else{ ?>

正午を過ぎました。

<?php } ?>

</body>

</html>

18:55頃にアクセスした場合、以下のように表示されます。

波括弧の代わりにコロン（:）とendifを使用すると、ソースコードの見た目がスッキリするのでおすすめです。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <?php

    echo "<p>現在の時刻は".date("H:i")."です。</p>";

    if(date("A") === 'AM'): ?>
        <p>午前中です。</p>
    <?php else : ?>
        <p>正午を過ぎました。</p>
    <?php endif; ?>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

<?php

echo "現在の時刻は".date("H:i")."です。";

if(date("A") === 'AM'): ?>

午前中です。

<?php else : ?>

正午を過ぎました。

<?php endif; ?>

</body>

</html>

switch文も同様の処理を実装可能です。以下のサンプルコードは、アクセスした曜日によって出力する文字列を変える処理を、switch文で実装しています。if文ではendifで終了したのに対し、switch文ではendswitchで処理を締めます。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <?php

    echo "<p>本日の日付：".date("m月d日")."</p>";

    switch(date("w")): 
        case 0 :?>
        <p>日曜日です</p>
        <?php break; ?>
    <?php case 1: ?>
        <p>月曜日です。</p>
        <?php break; ?>
    <?php case 2: ?>
        <p>火曜日です。</p>
        <?php break; ?>
    <?php case 3: ?>
        <p>水曜日です。</p>
        <?php break; ?>
    <?php case 4: ?>
        <p>木曜日です。</p>
        <?php break; ?>
    <?php case 5: ?>
        <p>金曜日です。</p>
        <?php break; ?>
    <?php case 6: ?>
        <p>土曜日です。</p>
        <?php break; ?>
    <?php endswitch; ?>
</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

<?php

echo "本日の日付：".date("m月d日")."";

switch(date("w")):

case 0 :?>

日曜日です

<?php break; ?>

<?php case 1: ?>

月曜日です。

<?php break; ?>

<?php case 2: ?>

火曜日です。

<?php break; ?>

<?php case 3: ?>

水曜日です。

<?php break; ?>

<?php case 4: ?>

木曜日です。

<?php break; ?>

<?php case 5: ?>

金曜日です。

<?php break; ?>

<?php case 6: ?>

土曜日です。

<?php break; ?>

<?php endswitch; ?>

</body>

</html>

木曜日にアクセスした場合、以下のように表示されます。

反復による処理

while文やfor文などを利用すれば、HTML出力したい文字列を反復的に生成可能です。

以下のサンプルコードは、指定した行数だけ文字列を出力する処理を、while文で実装しています。while文の場合はendwhileで処理を締めます。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <?php
        $row_max = 10;
        $count = 1;
    ?>

    <ul>
        <?php while($count <= $row_max) : ?>
            <li><?= $count++; ?>行目を表示</li>
        <?php endwhile; ?>
    </ul>

</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

<?php

$row_max = 10;

$count = 1;

<ul>

<?php while($count <= $row_max) : ?>

<li><?= $count++; ?>行目を表示</li>

<?php endwhile; ?>

</ul>

</body>

</html>

ブラウザで確認した結果は、以下の通りです。

以下のサンプルコードは、配列データをリストで出力する処理を、for文で実装したものです。処理の終わりはendforと記述しましょう。

<!DOCTYPE html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <?php
        $data = ['りんご', 'ぶどう', 'パイナップル', 'みかん' ];
    ?>

    <h1>果物リスト</h1>
    <?php for($i=0; $i<count($data); $i++) : ?>
        <li><?= $data[$i]; ?></li>
    <?php endfor; ?>

</body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルページ</title>

</head>

<body>

<?php

$data = ['りんご', 'ぶどう', 'パイナップル', 'みかん' ];

<h1>果物リスト</h1>

<?php for($i=0; $i<count($data); $i++) : ?>

<?php endfor; ?>

</body>

</html>

ブラウザで確認した結果は、以下の通りです。

【PHP】繰り返し処理のfor文をHTML内に埋め込む方法

PHPで繰り返し処理を行うfor文はHTML内に埋め込むことができますが、どうやって埋め込めばいいかわからない ...

まとめ

いかがでしたか？

今回は、

・PHPでHTMLを動的に作成する仕組み
・HTMLにPHPを埋め込むためのいくつかの方法

について解説しました。

学習するうえでポイントなのは、PHPはHTMLを動的に作成するための言語であることを、最初に理解することです。そのうえで、さまざまな書き方や例を身につけて、自身で処理を実装することでPHPをマスターすることができます。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。