HTMLからPHPを呼び出す方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLからPHPを呼び出す方法について解説しています。HTMLからPHPを呼び出すことのメリットと、実行の手順を説明します。実際にファイルを作成してサンプルで動作を確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLからPHPを呼び出す方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLからPHPを呼び出す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLからPHPを呼び出すメリット

HTMLからPHPを呼び出すメリットは大きく2つのメリットがあります。

メリット1:HTMLの構成を使いやすく動的に表示させる

HTMLとは記述したプログラムをそのまま出力することになる、Webを表示するためのマークアップ言語です。命令文によって呼び出すページを変更したい場合や表示させる文字を変更させたい場合にはHTMLだけで命令することはできません。

このような場合に「サーバーサイドのデータを使用して命令に応じて返答することができる」サーバーサイドプログラミング言語であるPHPが必要となります。

このようにHTMLの構成を使いやすく動的に表示させることができることがメリットの1つ目です。

メリット2:外部ファイルに記述したHTMLコードを呼び出しやすい

基本的な構成はHTMLにしたままで部分的に外部ファイルに移すことができ、そのファイルの呼び出しも簡単に出来るのがPHPの特徴です。

そしてこの簡易さがPHPが広く普及している理由の一つです。

 

HTMLからPHPを呼び出す方法

HTMLのファイル名の拡張子が「.html」となっているところを「.php」と変更するだけで、phpファイルとなります。

例)test.html → test.php

そして、あとはターミナルでPHPをプログラミングを実行すればHTMLを表示させることができます。

$ php test.php

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

①一般的なHTMLファイルとしてtest.htmlファイルを作成します。

(test.html)

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div>ヘッダー</div>

  <section id="news">

    <h1>ニュース</h1>

    <p>1 新着ニュース </p>

    <p>2 新着ニュース </p>

  </section>

</body>

</html>

②拡張子を「.html」から「.php」に変更します。

test.html → test.php

 

③外部ファイル化したい部分をphpファイルで保存します。

今回はnewsのsectionを外部ファイル化します。

(news.php)

<section id="news">
<h1>ニュース</h1>
<p>1 新着ニュース </p>
<p>2 新着ニュース </p>
</section>

④test.phpの抜き出したニュースの部分に外部ファイルを読み込むコードを加筆します。

(test.html)

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div>ヘッダー</div>

  <?php include('./news.php'); ?>

</body>

</html>

⑤ターミナルでPHPを実行します。

$php test.php

 

⑥実行結果がHTMLファイルだった場合と同様になっていれば成功です。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。