2 flat logo on transparent 256
2018-02-07

Bootstrapで始めるレスポンシブデザイン

201501130800

プログラミングをしていると、フロントエンドのデザインや設定で悩む事があると思います。
Bootstrapはフロントエンドのフレームワークで、CSSが予め設定されているため、簡単にデザイン性の高いレシポンシブデザインに対応する事ができます。

Bootstrapとは

twitter社が開発されたHTML CSSのフレームワークになります。
特徴的なのがグリッドシステムと呼ばれる物で、画面を横12分割にし、このグリッド配下に要素を設定すると
PCにでは12分割で表示し MBでは6対6などで分割することによってレシポンシブなデザインを実現できます。
言葉で伝えると難しいですが、下記にサンプル画像とコードを記載します。

Bootstrapサンプル画像

画面を縮小する前のサンプル
Bootstrapサンプル

画面を縮小した後のサンプル
Bootstrapサンプル

Bootstrapサンプルコードと解説

Bootstrapはファイルをそのままダウンロードする以外に
CDNからそのまま利用することが可能です。
下記サンプルコードをコピーして確認できます。

※jqueryのCDNをBootstrapのCDNの上部に設定する必要があります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>テスト</title>
<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style type="text/css"><!--
.sample-bootstrap > div {
    border: 2px solid gray;
  background: white;
}
</style>

</style>
</head>

<body>
<div class="container">
    <div class="row sample-bootstrap">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-4">4</div>
        <div class="col-xs-4">4</div>
        <div class="col-xs-4">4</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-6">6</div>
        <div class="col-xs-6">6</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-12">12</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-2">2</div>
        <div class="col-xs-10">10</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-3">3</div>
        <div class="col-xs-9">9</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-4">4</div>
        <div class="col-xs-8">8</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-5">5</div>
        <div class="col-xs-7">7</div>
    </div>
    <div class="row sample-bootstrap">
        <div class="col-xs-3">3</div>
        <div class="col-xs-6">6</div>
        <div class="col-xs-3">3</div>
    </div>

  <div class="row sample-bootstrap">
    <div class="col-xs-6 col-sm-4 col-md-3">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3">6</div>
    </div>
</div>
</body>
</html>

グリッドシステムの解説

基本構成

クラスの構成はcontainer > row >colになります。

container

サンプルコードのは配下の要素の全体の大きさを指定します。
このcontainerで横幅を12分割にするため、containerを要素の最上位に設定しなければグリッド化されません。

row

のrowを指定する事によって
グリッド化したいブロックを作成します。

col

colで横幅を指定します。

col-xs-3やcol-xs-5と記載されている部分が、横幅12列の内何列を利用するかを指定することになります。
その為col-xs-12とすれば、12列全て利用しcol-xs-4、col-xs-8と設定すれば、画面左側が4列、右側が8列利用する形となります。

さらにスマホ タブレット PCで分割する横幅を変更死体となった場合下記の様に対応できます。

スマホでは、グリッドを2分割
タブレットでは、3分割
PCでは4分割

スマホ
xs サイズで2分割
12÷2 = 6 → col-xs-6 を指定

タブレット
sm サイズで3分割
12÷3 = 4 → col-sm-4 を指定
PC

md サイズ以上で4分割
12÷4 = 3 → col-md-3 を指定

前の記事
次の記事