bootstrap_thumb

Bootstrap HTML,CSS

CSSのフレームワーク「Bootstrap」を使ってメールフォムを作成してみる。

2016/11/02

CSSのフレームワークである「Bootstrap」を使って既存のメールフォームをリニューアルしたので、その使い方などを忘備録としてポストします。

Bootstrapでメールフォーム

既存のメールフォームのリニューアル案件でBootstrapを使ってみました。

これまではスマホで見てもPCページを表示させていたので、目標として『PCで見た場合も、スマホで見た場合も(それなりに)正規化されたデザインでページ表示させる』を目標としてやってみます。

ダウンロード・設置

まず、Bootstrap本体のダウンロードから。

「Download Bootstrap」ボタンを押して、ダウンロードページへ。

bootstrap_01

一番左の、「Download Bootstrap」ボタンをクリック。

bootstrap_02

初っ端のページにもありましたが、この記事の時点でのバージョンは3.2.0。

bootstrap_03

zipファイルを解凍すると、以下の様なディレクトリ構成。
ルートの dist ディレクトリ以下に、必要なファイルは格納されています。

bootstrap_04

dist ディレクトリ以下の、 css、fonts、js ディレクトリをそのまま、自分の環境にコピーします。
今回はわかりやすく、リニューアル前の CSS などのファイル群と同じ階層の public_html/css/bootstrap/ 以下に設置しました。

なお、リニューアル前のフォームはこのようなデザインとなっていました。
これに近い形にリニューアルしたいと思います。

bootstrap_06

ひな形を利用する

先ほどのダウンロードページを再度開き、下にスクロールすると、htmlのひな形があるので、それを利用してベースとなるhtmlファイルを作成します。

bootstrap_05

元のひな形は英語用となっていたりするので、少し手を加えつつ、以下の様に変更。

リニューアル前のHTMLに近づけるために色々と制約はあったので、body直下の id="container" と、bootstrap用のクラス名である class="container" と同名のIDとCLASSが混在していますが、仕方ないと諦めます(苦笑)

では、軽く解説。

  • 2行目:日本語仕様とするために、lang="ja" とする
  • 8行目:jqueryの読み込み。Bootstrapを利用するには必須
  • 11行目:Bootstrap用cssの読み込み
  • 12行目:Bootstrap用jsの読み込み
  • 24行目:紛らわしいが、body直下の <div id="container"> は元からある id 名
  • 26行目:class="container" は、bootstrap用のclass名。ブラウザの横幅を変更時の処理に関わってくるので必須
  • 30行目:bootstrap用class名でコンテンツを括る
  • 31行目:これもbootstrap用のタグ。「グリッドシステム」を利用の際は必要になるので記述
  • 40行目:footerにも container クラスを付与

ベースは以上。

氏名フォーム

では次に「氏名」フォームを作成。
ブラウザの横幅が変わった時に一緒に

最終的には以下のようになりました。

では、解説。

ソースを画像にして、色を付けてみましたが、指定すべき class 名は「form-group」「form-inline」「form-control」の3つ。

  • 緑の「form-group」でフォームをひと塊にラップ。
  • オレンジの「form-inline」で、フォームを横並びに配置します。
  • 青の「form-control」で、input などに対し bootstrap の処理(横幅が変わったり、角が丸まったり、アクティブ時に枠色が変わるなど)を受けさせることができるようになります。

bootstrap_07

出来上がりはこんな感じ。

bootstrap_08

ブラウザの横幅を変えると、コンテンツの横幅もかわり、スマホサイズになるとフォームも縦並びになります。

bootstrap_09

スマホサイズ

Screenshot_2014-08-20-15-46-34

基本は以上。
あとのフォームはこれの繰り返しです。

デモ

デモはこちらから

ボタン

次にボタン。
button に class を指定することで、色やサイズを指定できます。

まずは色。

a要素、button要素の class に対して「btn btn-***」(***はプロパティ名)を指定することで、ボタンのスタイルが変更されます。

bootstrap_11

プロパティ概要
default白地に黒文字
primary青地に白文字
success緑地に白文字
info水色地に白文字
warningオレンジ色地に白文字
danger赤色地に白文字
link白地に青文字

次に色。

a要素、button要素の class に対して「btn btn-***」(***はプロパティ名)を指定することで、ボタンのサイズが変更されます。

bootstrap_12

プロパティ概要
lg大きいボタン
sm小さいボタン
xsより小さいボタン

画像

最後に画像について。

ブラウザのサイズが変わると自動的に画像を拡大・縮小させたい場合、img 要素の class に「img-responsive」を指定すると、ブラウザのサイズに応じて自動的に拡大・縮小します。

以上を組み合わせて、フォームを作成します。
最終的にこんな具合になりました。

bootstrap_13

デモ

デモはこちらから

駆け足でしたが、Bootstrapの基本的な使い方と、フォーム作成の方法でした。
テーブル、グリッドシステムについてはまた別途、ポストしたいと思います。

追記

スマホで見た場合ですが、項目のラベルがうまく縦に並んでくれなかったので、CSS の @media を使って、ブラウザの横幅のピクセルサイズに応じて変化するよう、以下を加えました。

-Bootstrap, HTML,CSS
-, , ,