お問い合わせフォーム

【PHP】コンタクトフォームの作り方 第1回「HTMLとCSS」

 

Bootstrap, Google Fonts を最新のバージョンに更新しました。(2021年7月2日)

ここまでの記事はこちら
 

第1回は「HTMLとCSS」です。
 

まずは Bootstrap と Google Fonts を使って、以下のようなお問い合わせフォームのレイアウトを作っていきます。


 
 

Web アプリを作るときは、いきなり PHP のコードを書くのではなく

  1. HTML を作成
  2. CSS でスタイルを付ける
  3. 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 ファイルを開くと、以下のような画面になっています。


 

Bootstrap を読み込んで、スタイルが反映されるようにしましょう。
 

PHP ファイルを実行するにはサーバー環境が必要です。
ローカル環境がない方は contact.php をお使いのサーバーにアップして下さい。

 
 

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 でお問い合わせフォームの機能を実装していきましょう

第2回「PHP」に進む
 
 

ここまでのコード

 

 

ABOUT ME
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
挫折しないプログラミング講座

 

 
Code for Fun プログラミング講座では「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで学ぶことができます。

  • 何か一つ形にしてみたい!
  • 次に何をして良いか分からない…
  • プログラミングに挫折しそう…

という方にオススメです。

詳しくみる

guest
0 Comments
Inline Feedbacks
View all comments
0
この記事にコメントするx