超初心者のBootstrap

Bootstrapとは

元々Twitter社が開発したフロントエンドのフレームワークで、基本的に無料で利用でき、わざわざ自分でCSSを定義しなくても見栄えの良い入力フォームやテーブル（表）のエレメントを作ることができる。

使い方は、Bootstrapをダウンロードまたは読み込みしておき、各HTML要素にBootstrapで予約されているclass名を指定する。
「これはform要素」「これはlist要素」といったカスタマイズされた指定だけでなく、単にmargin指定やsizing指定も予約されたclass名の指定で実現できるので、いちいちHTML要素に固有のclass名をつけてCSSファイルも用意して定義して・・・という手間がいらない。
そういう面では可読性も増す。

とはいえ色々出来すぎるので、とりあえずちょっと簡単なアプリ作りたいだけなんだよねというときにも使うであろう3つの要素を挙げてみた。公式のドキュメントも日本語が用意されていて非常にわかりやすいのだが。

container要素

関連のあるまとまりをこれに入れておけば整列された見栄えになる。　

<div class="container">
 <div class="row">
  <div class="col">
  </div>
 </div>
</div>

container=箱　　row=行 col=列なので、
縦に並べたいものをrowを分けて、横に並べたいものを同じrow要素の中にcolで分ける・・・くらいわかっておけば何とかなる。

注意したいのが、col要素の指定の仕方について。
「col-6」「col-12」といった列の大きさを指定できるオプションがあり、これは1行(1個のrow要素)を12で割ったうちの6個分の大きさだよとか12個分の大きさだよという意味になっている。つまり後ろの数字の合計が12までしか入りきらないので、「col-4」なら3つまで置けるが「col-6」は2つまでしか置けないし、さらにもう1つ置こうとすると勝手に改行されてしまう。

form要素

ユーザー登録や記事投稿などの入力フォームを作れる。

<form>
  <div class="container">
    <div class="row">
     <div class="col">
      <label for="email" class="form-label">email</lavel>
      <br />
      <input type="email" class="form-control">
     </div>
    <div class="row">
     <div class="col">
      <label for="password" class="form-label">password</lavel>
      <br />
      <input type="password" class="form-control">
       <div class="form-text">
         半角英数字6文字以上で入力してください。
       </div>
     </div>
    </div>
    <div class="row">
     <div class="col">
      <label for="password_confirmation" class="form-label">password_confirmation</lavel>
      <br />
      <input type="password" class="form-control">
     </div>
　　　　　　　　　　<div class="row">
     　<div class="col">
　　　　　　　　　　　　<button type="submit" class="btn>Submit</button>
　　　　　　　　　　　</div>
     </div>   
    </div> 
  </div>
 </form>

form-lavel=ラベル要素 form-controll=インプット要素 form-text=インプット要素の注釈テキストを組み合わせて作る。
そしてもう一つ、送信ボタンはbtnクラスを指定して作る。ボタンの大きさや色も変えたければ指定するクラスである程度は自由に変えられる。

railsのヘルパーとも組み合わせできる。

<%= form_with model: @user, url: user_registration_path, local: true do |f| %>
  <div class="container">
    <div class="row">
     <div class="col">
      <%= f.label :email, class:"form-label" %><br />
      <%= f.email_field :email, class:"form-control"%>
     </div>
    <div class="row">
     <div class="col">
       <%= f.label :password, class:"form-label" %><br />
       <%= f.password_field :password, class:"form-control"%>
       <div class="form-text">
         半角英数字6文字以上で入力してください。
       </div>
     </div>
    </div>
    <div class="row">
     <div class="col">
       <%= f.label :password_confirmation, class:"form-label" %><br />
       <%= f.password_field :password_confirmation, class:"form-control" %>
     </div>
    </div>
    <div class="row">
     　<div class="col">
　　　　　　　　　　　　<%= f.submit "Submit", class:"btn>
　　　　　　　　　　　</div>
     </div>
  </div>
 <% end %>

card要素

枠線で区切られた1つの段落を表示する。記事とかツイートといった投稿を表示する際に便利。

<div class="card" style="width: 16rem;">
  <img class="card-img-top" src="URL">
  <div class="card-body">
    <h5 class="card-title">
      タイトル
    </h5>
    <h5 class='card_text'>
    　　　　ツイート
    </h5>
  </div>
</div>

「card」で全体をまとめ、「card-body」にコンテンツを記載していく。card全体の大きさはstyleオプションで指定する。
※ちなみにbodyがあるように「card-header」「card-footer」もある

「card-title」「card-text」はその名の通りタイトルとテキストなので、例えば投稿された記事のタイトルと要約を表示するときなどによく使う。

また「card-img-top」はカードの上の方に画像を表示してくれる。これも画像付き投稿などの表示によく使う。

終わりに

container,form,cardを組み合わせることでユーザーに各種登録・投稿をさせる→その結果を表示する、くらいの簡単なビューファイルは作れる。
他にも凝ろうと思えばいくらでも凝れる、機能盛りだくさんのbootstrapなので、まだ使ったことがないよという人はぜひ試して欲しい。