PHP・MySQL入門

ゼロからはじめるPHP・MySQL入門　第４回「HTMLとPHP」

 

ここまでの記事はこちら
 

前回は PHP の基本的なルールと、テキストを表示する echo の使い方を紹介しました。

今回は「HTML と PHP をどのように組み合わせるのか」を紹介していきます。

PHP でウェブサイトやウェブアプリを作っていく場合 HTML と組み合わせてコードを書いていくので、HTML の知識も少しだけ必要になってきます。

「HTML を知らない、書いたことがない」という方もいると思うので、ここでは HTML の基本から紹介していきます。
 


 

HTMLの基本

HTMLとは？

HTMLの正式名称は Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）と言います。

直訳すると「テキストをマークアップする言語」です。

マークアップと言われてもと何をするのかイメージしにくいかもしれませんが、簡単に言うと「文章構造を作ること」です。

例えば、新聞の一面をイメージしてみてください。

まず新聞名が書いてあります。次に、日付・トップニュースの見出し・文章・写真があります。さらに天気予報があって、広告もありますよね。

これらを「これは見出しです」「これは画像です」「これは文章です」とページの構造を作っていく作業を「マークアップ」といいます。

どんなウェブサイトもHTMLで作られているので、このマークアップ作業が必要になります。

もちろん、今あなたが読んでくださっているこのページもHTMLで書かれています。

試しに、今読んでくださっているこの画面の上で右クリックしてみてください。
「ページのソースを表示」というメニューがあると思うので、クリックしてください。


 

これが HTML です。


 

文字がぎっしり詰まっていて「こんなの書けるか！」と思った方もいるかもしれませんが、大丈夫です！

HTMLとPHPを勉強していけば、どこに何が書いてあるかわかるようになりますし、今回は最低限必要な HTML だけを紹介します。

現時点では「ウェブサイトはHTMLで書かれていて、HTML は文書構造を作ること」ということを知っておいてください。

補足：ウェブサイトのデザインについて

HTMLだけでもウェブページを作ることはできますが、HTMLは文章構造を作るだけなので簡素なページになってしまいます。
ですので、実際にウェブサイトを作るときは、HTML に加えて CSS や JavaScript も使います。

CSSは 文字サイズや色、画像の並べ方などのレイアウトを調整するときに使います。
画像のスライドショーを追加したり、動きがあるアニメーションを付けたいときなどは JavaScript（jQuery）で書いていきます。

この講座でも少しずつ紹介していく予定です。

 
 

HTMLの基本構造

まずはウェブページを作るときに最低限必要になる HTML の基本構造を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLの基本構造</title>
</head>
<body>
</body>
</html>

 

どんなウェブページも必ずこの HTML がベースになっています。

HTMLの一番の特徴は「タグで囲むこと」です。

タグとは <head> <title> <body> などです。

どのタグも <head> と </head> のようにペアになっています。

meta タグのように例外もありますが、現時点では「開始タグと終了タグで囲む」ということを意識しておいてください。

<開始タグ>タグに合った内容</終了タグ>

この開始タグから終了タグまでを「要素」とも呼びます。
 
 

HTML はこのタグを組み合わせて文書構造を作っていきます。

基本構造を見てみると html タグの中に head タグと body タグがあります。


 

<!DOCTYPE html> は「これは HTML 文書です」という宣言文です。

head 内には、文字コード・ページのタイトル・アイコンなど、ユーザーからは見えないウェブページの情報を書きます。

body 内には、テキストや画像などウェブページとして実際に目にする部分を書いていきます。

この基本構造は HTML を書く時に必ず書くコードなので、ぜひ見慣れておいてください🙂
 
 

HTML のサンプル

以下のコードを test.php に貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基本構造</title>
</head>
<body>
<h1>見出し</h1>
<h2>見出し２</h2>
<p>bodyタグ内に<strong>テキスト</strong>を書いていきます。</p>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
</body>
</html>

 

ブラウザで test.php を開くと、このような画面になります。


 

画像と同じように、見出し・文章・リストが表示されたでしょうか？

さきほど HTML は開始タグと終了タグで囲むと書きましたが、「タグの中にタグを書く」こともできます。

この場合は、内側に入れたタグを閉じてから外側のタグを閉じるようにしてください。

正しい例
<p>あい<span>う</span>えお</p>

間違った例
<p>あい<span>う</p>えお</span>

 

タグは正しく囲まないと前後の HTML も崩れてしまうので注意が必要です。

ファイルの拡張子について

HTML だけを書く場合は index.html というファイルで保存することができますが、PHP と組み合わせて使う場合は index.php（php 拡張子）でファイルを作成して、MAMP や XAMPP などのローカル環境に置く必要があります。
一方 index.html はローカル環境に置く必要はありません。デスクトップにファイルを置いてもブラウザで開くことができます。

 
 

HTML タグの種類

HTML タグは何十種類もあります。

ここではすべてを紹介することはできないので、よく使うタグを5つ紹介しします。
HTML タグはこちらのページでもまとめているので、参考にしてみてください。
参考：HTML タグまとめ・リファレンス
 

Heading（見出し）

h1 が大見出し、h2 は2番目の見出し…のように h1 ~ h6 まで使うことができます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

 

Paragraph（段落）

段落を意味しています。

<p>テキストを入力します。テキストを入力します。<br>テキストを入力します。</p>

 

<br>を書くと改行することができます。
 
 

List（リスト）

リストには Ordered List（順序付き）と Unordered List（順序なし）の2種類があります。
 

Ordered List（順序付き）
<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    <li>項目4</li>
    <li>項目5</li>
</ol>
 
Unordered List（順序なし）
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
    <li>項目4</li>
    <li>項目5</li>
</ul>
 

 

Table（表）

表を作ることができます。
表に枠や線をつけるには CSS を使います。

<table>
    <thead>
        <tr>
            <th>単価</th>
            <th>数量</th>
            <th>合計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>100</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>200</td>
            <td>2</td>
            <td>400</td>
        </tr>
        <tr>
            <td>300</td>
            <td>3</td>
            <td>900</td>
        </tr>
    </tbody>
</table>

 

Link（リンク）

他のページへ遷移するリンクを作成することができます。

<a href="https://google.com/" target="_blank">Google</a>

作成されるリンク→ Google
 

target="_blank" をつけると新しいウィンドウでリンクを開くことができます。
target を書かない場合は、そのまま同じウィンドウでリンクが開きます。
 
 

HTML と PHP の組み合わせ方

ここからは HTML と PHP をどのように組み合わせるのかを紹介していきます。

誰でも一度は目にしたことがあると思う Amazon（ショッピングサイト）を例に考えてみましょう。

Amazon には
・トップページ
・商品一覧ページ
・商品個別ページ
などがあります。（実際はもっと多くありますが、ここでは省略します。）
 

それぞれのページに HTML が必要になるので
・top.html
・products.html
・detail.html
があるとしましょう。
 

トップページは、自分の購入履歴が表示されていたり、お気に入り商品が紹介されています。ユーザーによって表示される内容が変わりますが、それぞれのユーザーのために top.html を用意する必要があるでしょうか？

ログインしていた場合、画面の右上に「さん」と自分の名前が表示されますが、これも全利用者の名前ごとに HTML を用意するのでしょうか？

また、Amazon には何百万点もの商品がありますが、それぞれの商品ごとに detail.html を作成しなければならないのでしょうか？
 

答えは「複数作成する必要はない」です。
 

何百万人もの利用者・商品ごとに HTML を用意するなんて、気が遠くなりますし、絶対に不可能ですよね。

そこで活躍するのが PHP などのプログラミング言語です！

どの商品ページも商品名・値段などは異なりますが、表示する項目や配置はすべて同じです。
つまり文書構造（HTML）が同じということです。

ベースは同じ HTML を使って、ユーザーの名前・商品名・値段などはプログラミング、つまりコードを書いて切り替えていきます。

これが HTML と PHP を組み合わせるということです。
 

少し難しくなってしまいましたが、これから PHP でウェブアプリを作っていけば必ず分かるようになります。

現時点では「使う人や時間によって変わる箇所、データベースからデータを取得して表示する箇所に PHP を使う」ということを頭に置いておいてください。
 
 

PHP で現在時刻を表示する

最後に、PHP を使って HTML 内に現在時刻を表示してみましょう。

test.php に以下のコードを書いてください。

<?php 
date_default_timezone_set('Asia/Tokyo');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基本構造</title>
</head>
<body>
<p>現在時刻は【<?= date('Y年n月j日 H時i分s秒'); ?>】です。</p>
</body>
</html>

 
 

現在時刻が表示されましたか？


 

PHP で時間を取得しているので、ページをリロード（更新）するたびに現在時刻が変わっていると思います。

このように HTML の一部分を PHP で書きながら、ウェブアプリを開発していきます。
 
 

タイムゾーンについて
2行目に書いた date_default_timezone_set('Asia/Tokyo'); ではタイムゾーンを東京に設定しています。東京以外の場所に設定したい場合は「サポートされるタイムゾーンのリスト」から場所を指定してください。
 
 

まとめ

今回は HTML の基本を紹介しましたが、HTML は細かい規則がたくさんります。

このページを読んでくださったあなたは、ウェブデザインよりもプログラミングを勉強したいという方だと思うので、あまり HTML について心配する必要はありません。

正直言うと、私もまだ HTML に対して少し苦手意識があります。

ただ、PHP を勉強していくうちに基本的なことは自然と覚えていきますし、この講座でもその都度 HTML のルールも紹介していきたいと考えています。

また、自分で HTML を書かなくてもキレイなウェブサイトを作ることができるフレームワークというものもあります。

HTML については心配せずに「HTML と PHP を組み合わせていく」ということだけ頭に入れておいてくださいね🙂

次回はどのプログラミング言語にも必ず出てくる「変数について」紹介していきます。
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です