プログラミング

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

PHPでWebアプリを作る手順の最初はHTML&CSSで枠作り!|3択クイズアプリの作成

こんにちは!

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

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

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

PHP初心者でも簡単!『3択クイズ』Webアプリを作ってみよう!
【第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弾まで読んでくれた人

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

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

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」のフォルダ内に以下の写真と同じようにが付いてあるファイルを追加していってください。

htdocs内のファイル一覧

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

index.html

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

index.htmlの画像

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

 

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

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

<link rel=”stylesheet” type=”text/css” href=”style.css”>

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

 

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

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

各要素のクラス名

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

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

style.css

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

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

quiz.php

quiz.phpの見た目

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

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

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

 

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

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

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

 

「クイズの選択肢」であったりといったその他の内容については、「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」と同じように、以下のステップを行います。

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

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

(変更前)

(変更後)

 

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

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

「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」を作っていきます。

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

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

(変更前)

(変更後)

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

index.htmlの画像

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

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

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

(変更前)

(変更後)

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

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

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

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

 

(変更前)

(変更後)

 

ライアン
ライアン
は?正解の数を「2」って決めていいの?

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

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

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

 

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

result.phpの画像

トップ画面へ」のボタンの表示が大きすぎたりする場合は、「result.css」の「.end-button{}」の中身を変更して、大きさや位置を調整しましょう。

これに続く内容は、次の第7弾で実装していきます!そのため、今回の第6弾では、ここまでで構いません!

まとめ

今回のPHPで『月5万円』稼ぐためのロードマップ第6弾では、「各ファイルを作成して、HTML&CSSで枠組みを作っていく」というところまで進みました。

次回の、第7弾では、PHPを実装していき、とうとう「3択クイズアプリ」が完成します!

Webアプリ開発の第一歩!3択クイズWebアプリにPHPで機能を実装する。
【第7弾】Webアプリ開発の第一歩!3択クイズWebアプリにPHPで機能を実装する。こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップ第7弾ということで、1つ目の課題である「3択クイズアプリ」にいよい...

 

今回は、以上になります!質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください!Twitterも是非フォローよろしくお願いします!

 

その他、勉強法や就活、プログラミングに関する相談なども受け付けています!