お問い合わせのフォームが作りたいな
そんな時はBootstrapでサクッと作りましょう。
Bootstrapの機能を詳しく知りたいという方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
リンク
作り方は簡単で指定のクラスをつけるだけです。
「Bootstrapってなんぞや？」という方はこちらの記事をご覧ください。
関連記事
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM |
フォーム(お問い合わせ)を作りたい
フォームはこんな感じです。
See the Pen
vYKMjaw by hiro web制作とブログ (@hiroweb9)
on CodePen.
※このコードは内部の処理が書いていません。見た目を作っているだけです。内部の処理はPHPの知識が必要です。
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="container my-5"> <form method="post" action=""> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="メールアドレス"> </div> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="お名前"> </div> <div class="form-group"> <textarea rows="4" cols="50" placeholder="質問などはこちらへお願い致します。" name="" type="text" class="form-control"></textarea> </div> <button type="submit" class="btn btn-outline-primary">送信</button> </form> </div> |
クラスの意味は以下の通りです。
| container | 幅の設定、レスポンシブデザインに対応しています |
| my-(0,1,2,3,4,5) | y軸方向のマージン 1=0.25rem 1rem=16pxです。 |
| form-group | マージンを下に1rem(16px)とっています |
| form-control | デフォルトのデザイン(input)を消し、デザインの調整をしている |
| btn | ボタンのデフォルトのデザインを消す |
| btn-outline-primary | ボタンのボーダーを青にし、ホバーすると背景が青に変わる |
ボタンの色はいくつか種類があります。
btn-(色の指定)で簡単に設定できます。
| btn-primary | 青 |
| btn-secondary | グレー |
| btn-success | 緑 |
| btn-warning | 黄 |
| btn-info | 水色 |
| btn-light | 薄いグレー |
| btn-dark | 濃いグレー |
| btn-white | 黒 |
| btn-transparent | 透明 |
| btn-danger | オレンジ |
btn-outline-(色の指定)でボーダーがあり、ホバーすると背景の色がボーダーと同じになります。
btn-(色の指定)にすると背景の色が指定した色になります。
またこんなデザインも容易に作れます。
コードは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <form method="post" action=""> <div class="form-group"> <div class="row"> <div class="col-md-4"> <p class="text-center">メールアドレス</p> </div> <div class="col-md-8"> <input type="email" name="email" class="form-control" placeholder="必須"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-4"> <p class="text-center">お名前</p> </div> <div class="col-md-8"> <input type="text" name="name" class="form-control" placeholder="必須"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-4"> <p class="text-center">お問い合わせ内容</p> </div> <div class="col-md-8"> <textarea rows="4" cols="50" placeholder="必須" name="text" type="text" class="form-control"></textarea> </div> </div> </div> <button type="submit" class="btn btn-outline-primary">送信</button> </form> |
グリッドシステムのクラスの意味をざっくりと紹介します。
| row | 横並びにします |
| col-4 , col-8 | col-(数字)数字が足して12になるようにします。数字が大きいほど幅が大きくなります。 |
| col-md-4 , col-md-8 | mdをつけるとレスポンシブデザインに対応します。ブレイクポイントは768pxです。 |
グリッドシステムを使っています。グリッドシステムはBootstrapの機能の１つで、よく使われます。
覚えておくととても便利です！
容易にレスポンシブデザインに対応できるのでcssの記述が減ります。
グリッドシステムについてはこちらの記事で詳しく解説しています。
関連記事
グリッドシステムってなんだ？グリッドシステムを詳しく知りたい... 今回はこんな疑問を解消していきます!Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。[…]
チェックボタンとラジオボタンを作りたい
チェックボタンはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="check1"> <label class="form-check-label" for="check1"> チェックボタン </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="default" disabled> <label class="form-check-label" for="default"> 無効なチェックボタン </label> </div> |
出典：Forms – Bootstrap 4.1 日本語リファレンス
クラス等の意味は以下の通りです。
| form-check | 位置を調整しています |
| form-check-input | 位置を調整しています、input要素につけます。 |
| form-check-label | 位置を調整しています、label要素につけます。 |
| id=”check1″ | for=””とid=””は同じにします。文字列は任意です。check1でなくてもforと一致していればOK |
| for=”check1″ | for=””とid=””は同じにします。文字列は任意です。 |
| disabled | 属性、無効化したい場合にinput要素につけます。 |
次にラジオボタンを作ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="form-check"> <input class="form-check-input" type="radio" name="" id="radios1" value="option1" checked> <label class="form-check-label" for="Radios1"> ラジオボタン1 </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="radios2" value="option2"> <label class="form-check-label" for="radios2"> ラジオボタン２ </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="radios3" value="option3" disabled> <label class="form-check-label" for="radios3"> 無効なラジオボタン </label> </div> |
出典：Forms – Bootstrap 4.1 日本語リファレンス
| checked | チェック済みとなります |
後はラジオボタンと同じです。