PHPとHTMLの関係を知ろう
PHPプログラミングの便利なところの一つは、普通のHTMLタグと簡単に同居させ、HTMLタグの一部を部分的に変えたりできる点だと思います。
基本的な文法や考え方さえわかれば、自分の作りたいウェブシステムを構築できます。
PHPはウェブ専門のプログラミング言語ですので、ブラウザに表示するHTMLタグやデザインするCSS(スタイルシート)の知識は必須となります。同時に勉強を開始する、というのは正解かどうか僕にはわかりませんが、どちらかというとHTMLは先に勉強しておいた方がいいかと思います。(心配しないでください!HTMLはプログラミングではありませんので、一通り必要なことは、1~2週間もあれば十分習得できます。)
このコラムでは、最低限のHTMLは習得されている前提で書かせていただきたいと思います。
目次 Table of Contents
HTMLとPHPコードの同居ってどういうこと?
PHPはウェブ専用のプログラミング言語です。
よって、ネット上で見られるWebサイトや、社内通信環境のみで使う業務データベースシステムなどが、代表的な作るものとなるでしょう。
有名どころでいえば、FacebookがPHPで書かれていたり、人気CMSのWordpressもPHPで作られています。いずれも世界ナンバーワンのSNS・世界一のシェアを誇るCMSですから、人気の高さがうかがえます。
では同居について。
HTMLファイルtest.htmlに↓のように書いてみます。
<head></head>
<body>
<p>こんにちは山田さん!あなたは2525人目の訪問者様です!</p>
</body>
</html>
ブラウザ画面では↓のようになります。
では同じファイルの名前をtest.phpに変えて、以下のように書き直してみます。
$name = "鈴木";
$count = 3300;
?>
<html>
<head></head>
<body>
<p>こんにちは<?php echo $name; ?>さん!あなたは<?php echo $count; ?>人目の訪問者様です!</p>
</body>
</html>
ブラウザでは以下のようになります。
変数$nameと$countに代入された“鈴木”と 3300 が展開され、HTMLの一部として表示されました。
$nameと$countの値を別のものに変えれば、ブラウザでの表示もそれに合わせて変わるというわけですね。
ここでは言及しませんが、$nameと$countに代入する値を別の場所からもらってこれば、ユーザーに合わせて名前の表示を変えたり、アクセスカウンターで訪問者数をカウントして表示したり、といったことが可能になるのです。
PHPコードはHTMLタグと見た目がよく似ているので、慣れるまでは見にくいかもしれません。
PHPで処理を書く部分は上部の4行のように分けて書き、HTMLに埋め込む短い部分は行を変えずに書くようにするといいかと思います。
変数にHTMLタグを代入して出力する
では次に、変数にHTMLタグをまるごと代入してみます。
ですがPHPでは「文字列」を表すために""で囲む必要があります。HTMLコード内の属性値を囲む""とかぶってしまいますね。
ということで次のように書いて解決します。
$img = "<img src='./img/image.jpg' width='300px' height='200px' alt='ディズニーランド' />";
echo $img;
?>
指定したフォルダパスに画像ファイルがあれば、ブラウザには画像が表示されます。HTMLファイルにimgタグを書いたのと同じ結果ですね。
HTMLタグの属性値を''(シングルクオート)で囲んで代用しています。
ブラウザでソースを確認すると、''の状態で表示されます。それが嫌な人は以下のように書くこともできます。
$img = "<img src=\"./img/image.jpg\" width=\"300px\" height=\"200px\" alt=\"ディズニーランド\" />";
echo $img;
?>
変数に文字列を代入するとき、"(ダブルクオート)をそのまま"として代入するには、直前に\(バックスラッシュ)を付けます。
バックスラッシュの直後の文字はそのままの文字として認識されるのです。
これならばHTMLのソース上でも <img src="./img/image.jpg"~ となります。
どちらでも構わないと思いますが、僕は下の書き方をしています。
今度は、クラス名を変えてスタイルシートで適用デザインを変える場面を想定してみます。
</div>
上のdiv要素にはクラス名red-bgがついています。スタイルシートでこの部分の背景色を赤にしていると思ってください。
ではPHPで以下のようにしてみます。
$color = "red";
?>
<div class="<?php echo $color; ?>-bg">
</div>
$colorという変数にredという文字列が代入されていますので、最初の例と同じ表示結果になります。
$colorに、必要に応じてblueやgreenという値を代入し直せば、スタイルシートにそって表示する背景色を変えられますね。
こんな風に、HTMLタグ自体を必要なところで出力したり、id名やclass名の振り分けに利用したり、動的にWebサイトの表示を変えることができるようになります。
コメントフォーム
自分の勉強にもなりますので、コメントいただけるとうれしいです。