トップに戻る
【初心者向け】PHPの関数の中にHTMLタグをわかりやすく記述する方法
 > 
PHP > 
プログラミング > 
HOME > 
2022/06/22
2025/07/11

【初心者向け】PHPの関数の中にHTMLタグをわかりやすく記述する方法

PHPはサーバサイドの言語として知られていますが、HTMLのタグ構造を出力する、UIの生成を担うことも多々あります。

可能であれば、何度も使いまわす関数を作って、その中でタグを出力したいですよね。

今回は、そのような方に向けて、PHPの関数内で直接HTMLタグを記述する方法を詳しく解説していきます。

予習：HTMLタグの出力方法

そもそも、「PHPでHTMLタグを出力できるの？？？」という方もいるかもしれません。

そこで、まずはHTMLタグを出力し、画面上にDOM要素（HTMLタグをオブジェクトにしたもの）を表示させる方法について、予習しておきましょう。

PHPを用いてHTMLタグを出力する場合、”echo”という関数を使用します。

実際にコードを記述する際は、以下のように書くと、その内容がHTML文書の文字列として、ブラウザに読み込まれます。

<p>この下に出力</p>

<!-- <?php ～ ?>というタグで囲んだ -->
<!-- 部分がPHPのコード -->

<?php
    // HTMLタグをechoで出力
    echo "<div class='text'>PHPで出力！</div>";
?>

<p>この上に出力</p>
出力結果

こんな感じで、予習は十分でしょう。

本来PHPはサーバサイドでメールの自動送信などをするのが仕事ですが、上記のようにフロントエンドの開発にも一役買っているのです。

PHPの関数内にHTMLを直接記述！

PHPの関数echoを使えば、HTMLタグを出力することができます。

予習の段階だと、「これ関数化する必要ある？」となるかもしれません。ただし、以下のようなHTMLの構造をPHPで出力する場合はどうでしょうか。

<ul>
    <li>
        <div>1:</div>
        <div>1番目の要素です。</div>
    </li>

    <li>
        <div>2:</div>
        <div>2番目の要素です。</div>
    </li>

    <li>
        <div>3:</div>
        <div>3番目の要素です。</div>
    </li>

    <!-- ・・・・・・・・・・・・・・ -->

    <li>
        <div>99:</div>
        <div>99番目の要素です。</div>
    </li>

    <li>
        <div>100:</div>
        <div>100番目の要素です。</div>
    </li>
</ul>

サンプルコードを見ているだけでも頭が痛くなりますし、先ほどのようにechoを何行も書き続けるのは苦行です。

forループで直に記述しても良いですが、こういうリスト構造は何度か使いまわしたくなるタイミングがあるため、できれば関数として定義しておきたいところ。

良くない例 (従来の方法)

ということで、関数のプログラムを記述してみましょう。
まずは、あまり良くない例からです。

（前述の例では100番目まで出力していましたが、事情により3番目までを出力する処理に変更します。）

<?php
    function create_html(){
        $str = "";
        for($i=1; $i<=3; $i++){
            // 「 . 」はPHPで前後の文字列を連結させる記述
            $html = "<li><div>" . $i . ":</div><div>" . $i . "番目の要素です。</div></li>";

            $str = $str . $html;
        }

        echo $str;
    }

    // 関数を呼び出して出力
    create_html();
?>
実行結果

プログラムとしては、まずHTMLに直書きされていた1番目、2番目という数値の部分を、全てforのindex値（$i）で入力し、効率的にHTMLの構造を形成できるようにしています。

これでも動くので問題がないと言えば問題はないですが、何だか見にくいですよね。

例えば、上記コードのこの部分。

$html = "<li><div>" . $i . ":</div><div>" . $i . "番目の要素です。</div></li>";

これをパッと見たときに、HTMLタグの文字列を出力したいのはわかりますが、どのような構造で、どういった内容のコンテンツを出力したいのか、まったくわかりません。

良い方法 (HTMLを直接記述)

前述のコードをさらに見やすく、HTMLっぽい書き方にするため、
次はお手本の例を見ましょう。

<?php
    function create_html(){
?>
<!-- ここで一度閉じる -->

    <!-- HTML -->
        <ul>
            <?php for($i=1; $i<=3; $i++): ?>

            <li>
                <div><?php echo $i; ?>: </div>
                <div><?php echo $i; ?>番目</div>
            </li>

            <?php endfor; ?>
        </ul>
    <!-- ---- -->

<!-- ここからPHPを再開 -->
<?php
    }

    // 関数を呼び出して出力
    create_html();
?>

上記コードを実行すると、先ほどのコードと同じような実行結果が返ります。ただし、コードの内容は先ほどと全く違いますよね。

順を追って、このコードがどういった内容になっているか見ていきましょう。

まず注目すべきなのが、上部の3行。

<?php
    function create_html(){
?>
<!-- ここで一度閉じる -->

2行目で関数の宣言をはじめていますが、その後すぐに”?>”（<?phpの閉じタグ）でPHPの宣言を終えています。しかし、これはPHPの処理を打ち切っているわけではありません。

<?php?>というタグは、あくまでPHPファイルにおけるPHPコードの領域を示すだけのものであり、文法上は閉じタグを用いたとしても、PHPのコードそのものが”；”で閉じられていなければ、その処理は継続されているのです。

上記の内容を要約したものが、下の画像になります。

あくまでもPHPの関数内で記述されたHTMLのコードは、PHPの処理によって出力される情報に過ぎないということです。24行目に関数を呼び出さなければ、関数内のHTMLコードは一切出力されません。

よく見るとfor文なども”：”で区切ることで間にHTMLのコードを直で記述できるようにしています。PHPはHTMLコードの中に記述することが十二分に想定されているため、より視覚的にわかりやすいコードが書けるよう、こういった記法のサポートが豊富なのも魅力的です。

HTMLを直書きするメリット

HTMLなどのコードを書く場合、VScodeなどであれば閉じタグを自動で生成てくれたり、配色も自動で行ってくれたりするので、HTMLの構造を書くなら、それらの恩恵をしっかり受けたいところです。

しかし、従来の方法のように文字列としてHTMLコードを記述していると、エディタ側で用意されているサポートを一切受けられず、コードを書く時間、つまり開発時間が大幅に伸びてしまう可能性があります。

扱っているテキストエディタによっては、HTMLを直書きできる後者の方法で記述することで、開発効率を大幅に上げることが可能なのです。

まとめ

PHPの関数にHTMLを直書きすれば、他の開発者がそのコードを見た際に、関数の中でどういった処理をしたいのか、一目でわかるようになります。ワンランク上の開発者になるためにも、これまで解説してきた内容を意識しつつプログラミングしてみてください。

SHARE