HP制作③

先月に引き続き、架空のカフェのHPを作っていきます。前回は全体的なデザインを整えるところまでいきましたが、CONTACTページの実装を行っていなかったため今回はこちらを作りたいと思います。

shika16.hatenablog.com

 

CONTACTページを作る

HTML

CONTACTページを構成する「contact.html」の内容になります(一部省略)。

f:id:shika16:20170324081615j:plain

f:id:shika16:20170324081710j:plain

 

CSS

CONTACTページ用に追加したCSSです。

f:id:shika16:20170324081727j:plain

 

PHP

入力内容確認ページのための「check.php」です。

f:id:shika16:20170324083221j:plain

f:id:shika16:20170324083238j:plain

 

CONTACTページ

f:id:shika16:20170324083350j:plain

 

CONTACTページにて、各項目の情報を入力してみます。全て入力し終えたら、最下部の送信ボタンをクリックします。

 

f:id:shika16:20170324083427j:plain

 

送信ボタンをクリックすると、入力内容の確認ページが出てきます。ここで入力内容を確認して、誤りがあった場合には最下部左の「修正」ボタンをクリックすれば元のページに戻ります。一方、「送信する」ボタンをクリックすれば、

f:id:shika16:20170324083553j:plain

 

メッセージは送信され、送信結果のページが出てきます(今回は架空のカフェということで具体的な送信先のアドレス等は設定しておりません)。

 

おわりに

以上、CONTACTページの実装含めすべてのページを作り終えました。HP制作を行ってきたこの数か月間で、このページに一番時間と労力を使ったように感じます。PHPを組み込み、そのデザインを行うといった過程に頭を悩ませていました。同時に、このあたりが自分の苦手分野であると気づいたため今後よりいっそう力を入れて勉強してきたいと考えております。

 

参考

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん