【PHP】コンタクトフォームの作り方 第２回「PHP」
Sara
Code for Fun
【PHP】コンタクトフォームの作り方 第１回「HTMLとCSS」
Sara
ここまでの記事はこちら
第１回は「HTMLとCSS」です。
まずは Bootstrap と Google Fonts を使って、以下のようなお問い合わせフォームのレイアウトを作っていきます。
Web アプリを作るときは、いきなり PHP のコードを書くのではなく
- HTML を作成
- CSS でスタイルを付ける
- PHP コードを組み込む
という手順で進めていきます。
まずレイアウトを作ることで、どこに PHP を書けば良いかを明確にできるのでミスを減らすことができます。
それでは始めていきましょう！
ファイルを作成
はじめに PHP ファイルを1つ作成します。
ファイル名は何でも良いですが、必ず PHP 拡張子 ファイル名.php で作成してください。
ここでは contact.php としました。
XAMPP や MAMP を使っている場合は contact.php を htdocs フォルダに置きます。
HTML
先ほど作成したファイルに、以下のように HTML を書きます。
クラス名について
container, row, form-control など、この HTML に書いているクラス名は全て Bootstrap で指定されているクラス名です。
これらの HTML は Bootstrap のドキュメントからコピー＆ペーストで使うことができます。
Bootstrap ドキュメント
CSS
PHP ファイルを実行するにはサーバー環境が必要です。
ローカル環境がない方は contact.php をお使いのサーバーにアップして下さい。
ウェブブラウザで contact.php を開くと、以下のような画面になっています。
Bootstrap を読み込んで、スタイルが反映されるようにしましょう。
Bootstrap を読み込む
検索、または以下のリンクから Bootstrap 5 のサイトを表示します。
公式サイト：https://getbootstrap.com/
Get Started を押します。
CSS の下にあるコードをコピーします。
contact.php の6行目に貼り付けます。
Google Fonts を読み込む
次にフォントを変更してみましょう。
検索、または以下のリンクから Google Fonts のサイトを表示します。
公式サイト：https://fonts.google.com/
好きなフォントを選んでクリックします。Language メニューから Japanese を選択することもできます。
今回は Noto Sans JP を使ってみます。（お好きなフォントを選んでください。）
使いたいサイズの横にある + Select this style をクリックします。
複数使うこともできますが、今回は Regular 400 だけ使います。
画面右側に表示されるコードを使います。
7~15行目を追加します。
ここでは body タグにフォントを指定して、背景色も変更しました。
ウェブブラウザで開いてみてください。
Bootstrap のスタイルが反映されて、フォントも変わっていれば完成です。
次に行うこと
HTML と CSS は完成です。
次回は PHP でお問い合わせフォームの機能を実装していきましょう。
ここまでのコード
Q
PHP・MySQL
カレンダー開発講座
カレンダーを開発しながら
- MySQLにデータを保存・編集・削除・検索する方法
- タブレット・スマートフォンに対応させる方法
- Datetimepicker の使い方
- CSV ファイルを使った祝日の表示
など幅広く学ぶことができる講座です。
何か開発してみたい方、より実用的なコードを学びたい方にオススメです。
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。