Fire Engine

化学の修士号→消防士→ITエンジニア(2016年11月〜)

Bootstrapを使ってデザインの整ったフォームを作る

 今回は、Twitter社が開発したCSSフレームワークであるBootstrapについて紹介したいと思います。通常、CSSを書いていく場合は全てのスタイルを自分で作っていく必要があるのですが、このフレームワークにはよく使われるスタイルを予め定義してあるので、それをルールに沿って利用するだけで素早く整ったデザインを作成できます。

 Bootstrap公式サイト

Bootstrapを使う準備

 Bootstrapを使用するには、BootstrapとjQueryJavaScriptのライブラリ)を読み込む必要があります。読み込みの方法は下記の2パターンあります。

 ①ソースをダウンロードして、ローカルに配置して読み込む

 ②すでにホストされているファイルをインターネット経由で読み込む

今回は②の方法を用います。headタグに以下の内容を追加してください。

<head>
  <meta charset="utf-8">
  <!-- BootstrapのCSS読み込み -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- jQuery読み込み -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- BootstrapのJS読み込み -->
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

 この際に、BootstrapのJSより、jQueryを先に読み込むことまないとBootstrapのJavaScriptを使う動きが正常に動作しないので注意してください。

Bootstrapでフォームを作る

 今回は、Bootstrapを使って、簡単にデザインの整ったフォームを作ってみたいと思います。まずは以下ようなコードを書き、会員登録のフォームを作ります。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Bootstrap Demo</title>
  </head>
  <body>
    <h1>会員登録</h1>
    <form action="" method="post">
      <label>名前:<input type="text" name="login_name" /></label><br />
      <label>パスワード:<input type="password" name="password" /></label><br />
      <input type="submit" value="登録">
    </form>
  </body>
</html>

すると、見た目はこんな感じです。

f:id:hirotsuru314:20160413115142p:plain

 これにBootstrapを適用してみます。やり方は簡単です。以下のルールに従いコード書いてみてください。

使用ルール

・ formタグの中の要素にclass=”form-group”を入れて

・ inputタグにclass=”form-control”を付ける

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Bootstrap Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>会員登録</h1>
    <form action="" method="post">
      <div class="form-group">
        <label>名前:<input type="text" class="form-control" name="login_name" /></label><br />
      </div>
      <div class="form-group">
        <label>パスワード:<input type="password" class="form-control" name="password" /></label><br />
      </div>
        <input type="submit" value="登録">
   </form>
  </body>
</html>

そうすると、出来上がりはこんな感じです。

f:id:hirotsuru314:20160413170454p:plain

ちょっとそれらしくなってきましたね。さらにBootstrapを存分に駆使すると、

f:id:hirotsuru314:20160413115150p:plain

こんな感じです。参考までにコードを載せておきます。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Bootstrap Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="row">
       <div class="col-md-6 col-md-offset-3">
          <h1>会員登録</h1>
          <form action="" method="post" class="form-horizontal">
              
            <div class="form-group">
              <label for="input_name" class="col-md-2 control-label">名前:</label>
              <div class="col-md-10">
                <input type="text" class="form-control" id="login_name" placeholder="Name" /><br />
              </div>
            </div>
            
            <div class="form-group">
              <label for="input_password" class="col-md-2 control-label">パスワード:</label>
              <div class="col-md-10">
                <input type="password" class="form-control" id="input_password" placeholder="Password" /></label><br />
              </div>
            </div>
            
            <div class="form-group">
              <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary btn-block">登録</button>
              </div>
            </div>
         </form>      
      </div>
    </div>
  </body>
</html>

 このように、Bootstrapは手軽かつ高速に整ったデザインをつくるのに非常に優れています。デザインのセンスのない私にはもってこいのライブラリです。ただ、使ってる人も多いため、似たようなサイトになってしまうというデメリットもあります。実際にBootstrapをよく使う私はBootstrapを使ったサイトを見ると、「これは使ってるな」とすぐにわかります(笑)したがって、開発段階でプロトタイプをBootstrapで高速で作り、その後にデザインをカスタマイズしていくといったやり方も有効だと思います。

 Bootstrapはここで使った以外にもたくさん便利な機能が用意されています。特に私がよく利用するのは、グリッドシステム、Navbar、Button、Panelsなどです。日本語のリファレンスサイトもあり、かなり参考になります。しっかり学びたい方には下の書籍が一番オススメです。Bootstrap自体がそんなに使い方が難しくないので、下の本1冊でBootstrapはだいたいマスターできると思います。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!



こちらの記事もよければ読んでみてください。

hirotsuru.hatenablog.com