これからPHPの勉強を始める方に向けて！
PHP初心者の私が、実際に簡単なWebサイトを作成しながら学んでいく実践録です！！
この記事の目標は、同じく初心者の方が、実際に「作って学ぶ」を実践出来る内容を提示することです。
私自身は、他言語（C#、Javascriptなど）でのプログラミング経験がありますが、プログラミングを始めて勉強する方でも理解出来るように心がけて書いていきます。
ただし、HTML・CSSに関しては説明を省きます。ご了承ください。
また、分かりにくい所等あればコメント等頂けたら凄く喜びます。
こちらの記事は、「第４話」となっております。
第１話から読むことをオススメします！
目次
画面のデザインを作っていきます！
第３話では、DBの作成を行いました。
今回は、いったんDBからは離れて、画面のデザインである「HTML・CSS」を作っていきます！！
HTML・CSS自体の説明は、ほとんどしないので、さらっといきますよ！！
※HTML・CSSに関して分からない所があれば、質問して頂ければ出来る限り答えます。
作成する画面は３つ
まずは、作成する画面のおさらいをしておきましょう。
- 一覧表示画面
- 新規追加画面
- 変更・削除画面
作成する画面は、この３つになります。
新規追加画面と、変更・削除画面は、ほとんど同じ作りなので実質２つ作ればオッケーですね！
ということで、とりあえずそれぞれの画面ファイルを作成します。
新規追加画面 ⇒ add.php
変更・削除画面 ⇒ edit.php
とでもしておきましょう。
この作ったファイルたちを、第一話でダウンロードしたHonokaを配置した所に突っ込みます！
ファイル配置
さて、準備が出来たので
ガシガシ作っていきましょう！！
一覧画面の作成
まずは一覧画面から作っていきます。
作成する画面の完成図はこんな感じ。
一覧
ヘッダ部のナビゲーションバーと、ブックマーク表示用のテーブルを作ってあげればオッケーですね！
headタグを作る
何はともあれ「headタグ」をとりあえず作らないといけないですね。
ということで、
headタグ
こんな感じに。
ほとんど、Honokaのダウンロード時に入っていた「bootstrap.html」の中身を引っ張ってきただけですね！！
変えたのは、headタグに書かれていたCSSを外部ファイルに分けました。
CSS
これを、「style.css」として「css」フォルダの中に保存しておきます。
linkタグでstyle.cssを読み込んであげればオッケーですね！
ヘッダ部のナビゲーションバーを作る
bodyタグの中身を書いていきます！
まずはナビゲーションバーから作ります。
と言っても、これも「bootstrap.html」の中身を引っ張ってきたらほぼ完成ですね。
nav-bar
body内の最後に書いてあるscriptタグも、引っ張ってきただけです！！
これは、画面サイズが小さくなったときに、ナビゲーションバーをハンバーガーメニューとして表示して動作させるためなので、書いておきましょう！！
今回javascriptを使うのは、おそらくここだけ！
この状態で、ちょっと画面を見てみましょうか。
navbarのみ
画面幅を縮めてみると、
ハンバーガー
イイ感じですね！！
一覧表示のテーブル作成
続いて、ブックマーク一覧を表示するテーブルを作っていきます！
こっからは、コピーしてこれないので手書きしていきます。
テーブル
テーブルに表示する値は、PHPを使ってデータベースからデータを取得して表示する部分ですが、いったん手書きで書いています。
ということで、画面を見てみましょう！
一覧
ちゃんと出来てますね！！
ということで、一覧画面が出来ました！！
追加画面の作成
続いて、追加画面を作っていきます！
完成画面はこちら。
追加画面
formの作成
一覧画面と違う所は、メインのform部分のみなので、
同じ部分は、list.phpからコピーしてきましょう！
そして、formのHTMLはこんな感じ。
form
これで、画面を見てみると
追加
出来てますね！！
変更・削除画面の作成
ラストは、変更・削除画面の作成です！
ただしこれに関しては、追加画面と見た目がほぼ一緒！
違うのは、「削除ボタン」がついただけ！
ということで、add.phpからソースをコピーしてきたらほぼ完成ですね。
削除ボタンをつける
ということで、削除ボタンだけさくっと付け足しましょう！
削除ボタン
fieldsetタグ内の最後に、上のように付け足します。
これで、画面を見てみると、
編集
全画面完成です！！
今回はここまで！
今回はここまでとして、続きは次回！！
一気に３画面を作ったので、ちょっと長くなってしまいましたね。
次回は、ようやくPHPを書き始めますよ！！
すみません、１つ準備を忘れていたので書き始められません。
PHPは第６話から書き始めます！！
第５話はこちら！
記事の更新は、Twitterにて発信していきますので、フォローして頂ければ嬉しいです！！
質問・指摘はこちらから
プログラミング初心者の方は、本当にわからないことだらけだと思います。
そんな方へ、少しでも役立つことが出来れば嬉しいです。
分からない所があれば、こちらの記事にコメントを入れてください。
出来る限り回答していきます！
Twitterからの質問でもかまいません。
また、間違い等あればご指摘頂けると幸いです。
PHPに関しては、私自身キャッチアップ中のため至らない点もあるかと思います。
ご指摘頂いた内容は、随時修正していきます！
それでは、
のらくら でした！！
[…] 【第４話】作って学ぶPHP！初心者による実践録！～デザイン編～ […]
[…] 【第４話】作って学ぶPHP！初心者による実践録！～デザイン編～ […]