2 flat logo on transparent 256
2018-02-07

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

201501130800

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

Bootstrapとは

twitter社が開発されたHTML CSSのフレームワークになります。これを利用することによって1つのデザインでMBとPCのレシポンシブデザイン対応ができます。

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

関連記事:Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapでレシポンシブデザインに対応するサンプルコード

Bootstrapはファイルをそのままダウンロードする以外に CDNからそのまま利用することが可能です。

下記をメモ帳などに貼り付け、html形式で保存し展開すると動作を確認できます。

※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>

Bootstrapサンプル画像

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

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

グリッドシステムの解説

基本構成

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

container

サンプルコードの

<div class="container">

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

row

<div class="row sample-bootstrap">

の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分割

対応するグリッド線

スマホ:col-xs-6 を指定

タブレット:col-sm-4 を指定

PC:col-md-3 を指定

こちらの要望は実際言葉では理解できないかもしれませんが、 例えばサンプルコードをメモ帳に貼り付け、 そのコードを開いて、Googleの検証で携帯やタブレットのデザインで閲覧してみると理解できると思います。

以上になります。

その他コピペで動くサンプル付き関連記事

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

前の記事
次の記事