【初心者向け】BOOTSTRAPの使い方

【初心者向け】BOOTSTRAPの使い方

「BOOTSTRAPって、聞いたことあるけど何かわからない」
「BOOTSTRAPって、どうやって使うのかわからない」

そんな方に向けて、記事を書いています。

はじめまして。現役エンジニアのkazと申します。
Javaのプロジェクトでは、よくBOOTSTRAPが使用されます。
今回は、BOOTSTRAPの基礎的な知識について解説していきます。

BOOTSTRAPとは

wikipediaでは、下記のように記載されています。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

ウィキペディア

簡単に言うと、CSSのテンプレートです。

基本的なデザインがそろっており、テーマが決まっています。
BOOTSTRAPを使用することによって、サイトの見た目に力を入れないプログラマでも、デザイン的なサイトを作成することができます。

レスポンシブ対応について

BOOTSTRAPを使用する一番の要因は、レスポンシブ対応ができることです。

レスポンシブ対応を簡潔に言うと、スマホ画面でもきれいに見えるということです。

最近は、レスポンシブ対応を行っていないサイトなんてありません。
昔は、ガラケー用のサイトとかPC用のサイトを分けて、構築していました。

同じサイトでPCの大きな画面でもスマホの小さな画面でも、自動で表示が変わることをレスポンシブ対応といいます。

BOOTSTRAPの使い方について

Q:じゃあ、BOOTSTRAPって、どうやって使うの?
A:ダウンロードします。あとは、CSSと同じです。

簡単に書きましたが、正直にいうと使い方なんて、ほぼありません。

ネット上で好きなテーマのBOOTSTRAPをダウンロードして、ソース上でimportするだけです。
ただ、BOOTSTRAPは、基本的なルールがあります。

BOOTSTRAPのルールについて

ルール①:containerクラスで囲むこと

BOOTSTRAPでは、基本的にcontainerクラスで囲みます。
※レスポンシブ対応を行うために囲む必要があります。

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

ルール②:一行ごとにrowクラスで囲むこと

BOOTSTRAPでは、一行ごとにrowクラスで囲みます。
※レスポンシブ対応を行うために囲む必要があります。

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

ルール③:一行を12と考えること

BOOTSTRAPでは、一行を12と考えます。

下記のように、一行の合計が12となるようにサイズを合わせていきます。
12を超えてしまうと改行されてしまいます。

<div class="container">

  <div class="row">
    <div class="col-xs-12">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-4">
    </div>
    <div class="col-xs-4">
    </div>
    <div class="col-xs-4">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-3">
    </div>
    <div class="col-xs-3">
    </div>
    <div class="col-xs-6">
    </div>
  </div>

</div>
container、row、collomn

私は、今回紹介したような内容を下記の本で勉強しましたので、
もっと深く知りたいという方は、よかったら読んでみてください。