【第6弾】PHPでWebアプリを作る手順の最初はHTML&CSSで枠作り！｜３択クイズアプリの作成

こんにちは！

今回は、PHPで『月5万円』稼ぐためのロードマップの第6弾ということで、1つ目の課題である「3択クイズアプリの作成」を行っていきましょう！

前回の第5弾では「3択クイズアプリ」を作成するにあたって、プログラムの流れだったり、作成するファイルの数と役割だったりといったところを解説していきました。

今回はその続きとなりますので、まだ第5弾を読んでないと言う方は先にそちらを見てください！

【第5弾】PHP初心者でも簡単！『3択クイズ』Webアプリを作ってみよう！こんにちは！今回は、PHPで『月5万円』稼ぐためのロードマップの第5弾ということで、1つ目の課題である「3択クイズアプリの作成」...

PHPで『月5万円』稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。今回から、一緒に作成していく「3択クイズアプリ」に関しても同じです。初めて実際に何かを作るステップに入る方もいると思いますが、安心してください。

また、この第6段を見る前に、PHPで『月5万円』稼ぐためのロードマップの使い方や、特長を分かってもらうためにも第1弾から是非お読みください！

【第1弾】PHP初心者の80％が間違えている5つの注意点を解説今回から定期的に投稿する「PHPで『月5万円』稼ぐためのロードマップ」は実際に、ゼロからPHP学習を始めて、仕事をもらい、Webアプリを...

というか必見です。この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に雲泥の差ができてきます。

また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。

【第4弾】月5万円稼ぐためのロードマップで何が作れるようになるの？こんにちは！今回は、PHPで『月5万円』稼ぐためのロードマップの第4弾ということで、このPHPで『月5万円』稼ぐためのロードマッ...

こんな人にオススメ

PHPでWebアプリを作りたい！
まだ何もPHPで作ったことがない
第5弾まで読んでくれた人

それでは、「３択クイズアプリ」の作成の続きに入っていきましょう！

Contents

プログラムのソースコード全文
各ファイルの作成と枠作り
まとめ

プログラムのソースコード全文

3人がコードを組み合わせてプログラミングをしているイラスト Freepik – jp.freepik.com によって作成された watercolor ベクトル

まずは、みなさんにここで例題となる「3択クイズアプリ」のソースコードの全文を公開しておきます。もし、途中でよく分からなくなった場合は、このソースコードを見て迷路から脱出してください！

各ファイルのソースコード

上記のリンクをクリックすると、各ファイルが表示されると思うので、それぞれのファイルをダウンロードして、内容を確認してみてください。

各ファイルの内容は第5弾に記載しており、各CSSファイルは「.css」の前に書いている名称が「.html(.php)」の物と同じものが対応するペアとなっています。ただし、「index.html」だけは、対応するcssファイルの名称が「style.css」となっていますので気をつけてください。

各ファイルの作成と枠作り

PHPで『月5万円』稼ぐためのロードマップ第3弾に書いてある内容をきちんと実行してくれた方なら、PHPのプログラミングをしている準備はできているはずですね！

具体的には、環境構築が終わったあと、「htdocs」というファイルに「index.php」を作成し、ブラウザのURLを打ち込む欄に「localhost」と打つことで、「index.php」の内容が表示されるようになっているという感じでしょうか！

まだ、環境構築が終わっていない方は第3弾で紹介してある書籍を参考に、環境構築を行ってください。

まずは、「htdocs」のフォルダ内に以下の写真と同じように☑が付いてあるファイルを追加していってください。

これらのファイルが作成できたら、それぞれのファイルの内容をプログラミングしていきます！

index.html

第5弾で説明してように、「index.html」では以下のような見た目にしていきます。

「index.html」は、HTMLのみで記述する内容なので、PHPだけを勉強したい方は、全てコピペでも構いません。HTML&CSSも含めて勉強したい方は、先に「HTML&CSSPHPで『月5万円』稼ぐためのロードマップ」の学習から始めることをオススメします。

まずは、HTMLでは毎回書く「<html>～</html>」までを作成します。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>3択クイズ</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

タイトルは「3択クイズ」とし、「style.css」のCSSファイルとリンクさせるので、

を<head>内に記入します。

次は、<body>～</body>内に3択クイズアプリの枠を作っていきます。

各要素のクラス名は以下のように設定しています。

上の要素のクラス名と同じ構成になるように<body>～</body>内に、ソースコードを記述していってください。

  <body>
        <div class="main">
      <div class="site-logo">
        <img src="img/quiz.png" alt="logo">
      </div>
      <div class="question-title">
        クイズタイトル：〇〇について
      </div>

    <div class="question-instruction">
      これからクイズが3題出題されます。<br>
      必ずいずれかの選択肢を選んでください。
    </div>

      <div class="start-button">
        <a href= "quiz.php" >
        <img src="img/start-button.png" alt="logo">
        </a>
      </div>
    </div>
  </body>

<body>

</div>

クイズタイトル：〇〇について

</div>

これからクイズが3題出題されます。<br>

必ずいずれかの選択肢を選んでください。

</div>

</a>

</div>

</body>

スタートボタンとなる「start-button.png」については、その画像をクリックすると、「quiz.php」に飛ぶように「<a href= “quiz.php” >～</a>」で囲っています。

style.css

また、このときのCSSは以下のように設定しています。

body {
  font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background-color: #FFFFFF;
  width: 80%;
  margin-left: 10%;
}
.main{
  width: 600px;
  height: 400px;
  margin: 100px 0 0 10%;
  background-color: #FFFFFF;
  border: groove #CCCCCC;
}
.site-logo img{
  height:  100px;
}
.question-title{
  position: absolute;
  margin: -70px 0 0 200px;
  font-size: 150%;
  font-weight: bold;
}
.border-hedder{
  width: 100%;
  height: 3px;
  margin-top: -10px;
  background-color: #00ced1;
}
.question-instruction{
  margin-top: 50px;
  margin-left: 20px;
  font-size: 120%;
  font-weight: bold;
}
.start-button img{
  width: 200px;
  margin: 50px 0 0 200px;
}

body {

font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

background-color: #FFFFFF;

width: 80%;

margin-left: 10%;

}

.main{

width: 600px;

height: 400px;

margin: 100px 0 0 10%;

background-color: #FFFFFF;

border: groove #CCCCCC;

}

.site-logo img{

height: 100px;

}

.question-title{

position: absolute;

margin: -70px 0 0 200px;

font-size: 150%;

font-weight: bold;

}

.border-hedder{

width: 100%;

height: 3px;

margin-top: -10px;

background-color: #00ced1;

}

.question-instruction{

margin-top: 50px;

margin-left: 20px;

font-size: 120%;

font-weight: bold;

}

.start-button img{

width: 200px;

margin: 50px 0 0 200px;

}

PHPで『月5万円』稼ぐためのロードマップなので、「HTML&CSS」については詳しく説明しませんが、ポイントだけ説明しておくと、3択クイズアプリの枠となる[main]は横幅を600px、縦幅を300pxとし、その枠に入るように、それぞれのdiv要素の横幅、立幅を指定し、設定していっています。

quiz.php

「quiz.php」についても、「index.html」と同様に「HTML&CSS」で枠組みを作っていきます。今回の「3択クイズアプリの作成」でメインポイントとなるPHPを使って機能を実装していく部分については、次の第7弾でしっかり説明していきますので、ここでは第5弾で説明した「『3択クイズアプリ』を作成するまでの流れ」に従って、枠組みを作っていきましょう！

写真を見て分かるように、「枠」や「画面上部」については「index.html」とほとんど同じ、見た目なので、まずは以下のステップを行います。

「index.html」の内容をコピーして「quiz.php」に貼り付け。
「style.css」の内容をコピーして「quiz.css」に貼り付け。

では、まずは「quiz.php」の内容を変更していきましょう。

<head>内の、<title>～</title>の内容が「3択クイズ」となっているのでを「Quiz」と変更しておきましょう。
（一応ページタイトルを変えましたが、変えなくても、他の名前にしても構いません。）

また、対応するCSSファイルの名前も変わるので「style.css」から「quiz.css」に変更します。

  <head>
    <meta charset="utf-8">
    <title>QUiz</title>
    <link rel="stylesheet" type="text/css" href="quiz.css">
  </head>

<head>

</head>

次に<div class=”question-title”>～</div>の内容を、「クイズタイトル：〇〇について」となっているので「第１問」と変更します。

また、 <div class=”question-instruction”>～</div>の内容を第1問の質問である「世界で2番目に高い山は？」と変更しておきます。

さらに、「quiz.php」ではクイズを開始するための<div class=”start-button”>～</div>は必要ないので、削除します。

そうすると、<div class=”main”>～</div>は、下記のようになるはずです。また、そのときのデザインについては、以下の画像のようになっているはずです。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Quiz</title>
    <link rel="stylesheet" type="text/css" href="quiz.css">
  </head>
  <body>
        <div class="main">
      <div class="site-logo">
        <img src="img/quiz.png" alt="logo">
      </div>
      <div class="question-title">
        第1問
      </div>
      <div class="border-hedder"></div>

    <div class="question-instruction">
      世界で2番目に高い山は？
    </div>

    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

第1問

</div>

世界で2番目に高い山は？

</div>

</body>

</html>

最後に、完成版の写真と比較してもらうと、「Q」のマークを追加する必要がありそうですね。

<div class=”question-instruction”>～</div>の下に、<div class=”q-logo”>～</div>という要素を作成し、以下のように記述してみましょう。

      <div class="q-logo">
        <img src="img/q.png" alt="logo">
      </div>

</div>

３択クイズアプリのデザインの途中段階

デザインが崩れたと思うので「quiz.css」を編集して、位置調節をしていきます。

まず、「.start-button img{}」は必要ないので削除しましょう。

次に、「quiz.css」に以下のようにコードを追加します。

.q-logo img{
  position: absolute;
  width: 50px;
  margin: -50px 0 0 30px;
}

.q-logo img{

position: absolute;

width: 50px;

margin: -50px 0 0 30px;

}

「margin: 〇px 〇px 〇px 〇px;」となっていますが、この「〇」の中の値は自身で、適切な位置にくるように調節してみてください。

また、<div class=”question-instruction”>～</div>の位置が、例題の完成版の写真と比べると左に寄りすぎてますね。調整しましょう。

.question-instruction{
   margin-top: 50px;
   margin-left: 150px;
   font-size: 150%;
   font-weight: bold;
}

.question-instruction{

margin-top: 50px;

margin-left: 150px;

font-size: 150%;

font-weight: bold;

}

３択クイズアプリのデザインの途中段階

この段階での「quiz.php」の内容は以下のようになっているか、確認してください。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Quiz</title>
    <link rel="stylesheet" type="text/css" href="quiz.css">
  </head>
  <body>
        <div class="main">
      <div class="site-logo">
        <img src="img/quiz.png" alt="logo">
      </div>
      <div class="question-title">
        第1問
      </div>
      <div class="border-hedder"></div>

    <div class="question-instruction">
      世界で2番目に高い山は？
    </div>
    
      <div class="q-logo">
        <img src="img/q.png" alt="logo">
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

第1問

</div>

世界で2番目に高い山は？

</div>

</div>

</body>

</html>

「クイズの選択肢」であったりといったその他の内容については、「PHP」をがっつり使って実装していくため、次の第7弾で実装していきます！そのため、今回の第6弾では、ここまでで構いません。

　実際にWebアプリを作っていく際には、「たぶんこのへんはPHPを使うかもしれないな？」と思うところでも、一旦PHPを使わずに、HTML&CSSだけで記述してもいいかもしれません。

もちろん、後で「PHP」を使って実装するときに、無駄になってしまう内容があるかもしれませんが、結局のところPHPはHTML&CSSで作られた要素を、動かしたりするので、最初に動かす要素を作っておくことで、PHPの実装時にイメージがしやすかったりします。

私自身も、「構造が複雑だな」と思ったときは、先にHTML&CSSで仮の要素を作っておくことがあります。

quiz_result.php

「quiz_result.php」についても、これまでと同様に「HTML&CSS」で枠組みを作っていきます。第5弾で説明した「『3択クイズアプリ』を作成するまでの流れ」に従って、枠組みを作っていきましょう！

今回も、「quiz.php」と同じように、以下のステップを行います。

「quiz.php」の内容をコピーして「quiz_result.php」に貼り付け。
「quiz.css」の内容をコピーして「quiz_result.css」に貼り付け。

「quiz_result.php」内のページタイトルと、リンクしているCSSファイルの名称を変更しておきましょう。

    <title>Quiz</title>
    <link rel="stylesheet" type="text/css" href="quiz.css">

1 2	<title>Quiz</title> <link rel="stylesheet" type="text/css" href="quiz.css">

（変更前）

    <title>Quiz Result</title>
    <link rel="stylesheet" type="text/css" href="quiz_result.css">

1 2	<title>Quiz Result</title> <link rel="stylesheet" type="text/css" href="quiz_result.css">

（変更後）

この段階で「quiz_result.php」の見た目は、このようになっているはずですね！

「quiz_result.php」についても、ここからは「PHP」をがっつり使っている部分ですので、次の第7弾で実装していきます！

ファイル作成における注意点

ライアン

「3問」クイズがあるってことは、このファイルを3セット作るんやろ！！

いえ、違います。

ライアン

むっ・・・。

というのも、このような図を覚えていませんか？

忘れたよーって方は、ひとつ前第5弾の「プログラムの流れ」（下図）のところをもう一度確認してください。

この図を見ると、②、③、④は「quiz.php」と「quiz_result.php」が同じファイル間をぐるぐるしていることが分かると思います。

簡単に説明すると、ここで作成した「quiz.php」と「quiz_result.php」を枠組みとして、各問題で内容の変わる表示する内容については「PHP」を使って実装していきます！

そのため、問題の数だけ新規でファイルを作る必要はありませんよ！

result.php

「result.php」についても、これまでと同様に「HTML&CSS」で枠組みを作っていきます。

ここでも、これまでと同じように以下のステップを行います。上の「result.php」の写真を見てもらうと、今回作った「index.html」と一番似ています。そこで、「index.html」をベースとして「result.php」を作っていきます。

「index.html」の内容をコピーして「result.php」に貼り付け。
「quiz.css」の内容をコピーして「quiz_result.css」に貼り付け。

他のファイルと同様に「result.php」内のページタイトルと、リンクしているCSSファイルの名称を変更しておきましょう。

    <title>3択クイズ</title>
    <link rel="stylesheet" type="text/css" href="style.css">

1 2	<title>3択クイズ</title> <link rel="stylesheet" type="text/css" href="style.css">

（変更前）

    <title>Quiz Result</title>
    <link rel="stylesheet" type="text/css" href="result.css">

1 2	<title>Quiz Result</title> <link rel="stylesheet" type="text/css" href="result.css">

（変更後）

上記の手順を行ってもらうと、「index.html」と同じ、以下のような状態になっていると思います。

完成版(第5弾に記載)の「result.php」と比較してもらうと、「あなたは3問中〇問正解しました。」の文言と、「トップ画面へ」のボタンを追加する必要がありそうです。

それでは、その２つの点を修正していきましょう。

まずは、 <div class=”question-instruction”>～</div>の内容を変更します。

    <div class="question-instruction">
      これからクイズが3題出題されます。<br>
      必ずいずれかの選択肢を選んでください。
    </div>

これからクイズが3題出題されます。<br>

必ずいずれかの選択肢を選んでください。

</div>

（変更前）

    <div class="question-instruction">
 　　　あなたは、3問中2問正解しました。
    </div>

　　　あなたは、3問中2問正解しました。

</div>

（変更後）

次に、「トップ画面へ」のボタンを追加しましょう。

<a href= “quiz.php” >～</a>の部分を、<a href= “index.html” >～</a>とし、その中の画像ファイル名を「end-button.png」とします。

また、クラス名についても「start-button」となっているので、「end-button」と変更しておきましょう。

cssファイル内の、「.start-button{}」の部分も「.end-button{}」に変更しておくことを忘れないことに注意してください。

      <div class="start-button">
        <a href= "quiz.php" >
          <img src="img/start-button.png" alt="logo">
        </a>
      </div>

</a>

</div>

（変更前）

      <div class="start-button">
        <a href= "index.html" >
          <img src="img/end-button.png" alt="logo">
        </a>
      </div>

</a>

</div>

（変更後）

ライアン

は？正解の数を「２」って決めていいの？

なかなか鋭い指摘ですね。

実は、その部分は次回の第7弾で、PHPを使って、正解数に応じて表示を変えるという処理を実装していきます。ここでは、仮に「2」などの数字を置いてみましょう。

また、気付かれた方もいらっしゃるかと思いますが、「quiz.php」や「result.php」においても、勝手に「複数問題があるのに『第１問』や『世界で2番目に高い山は？』」などに設定している部分があったと思いますが、これについても同様で、次回の第7弾で、PHPを使って、表示を変えるという処理を実装していきます。

ここまで終わると以下のような状態になっていると思います。