HP制作③

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

shika16.hatenablog.com

CONTACTページを作る

HTML

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

CSS

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

PHP

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

CONTACTページ

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

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

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

おわりに

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

参考

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

ちゃんと使える力を身につける　Webとプログラミングのきほんのきほん