Bootstrap初心者がまず覚えるべきたった1つのこと。結論:グリッドシステム

プログラミング

前回記事でBootstrapの導入・使い方を説明しました。

【初心者向け】cssの効率良い勉強方法は?cssは書かなくても良いです
cssは覚えたけど、面倒くさい、、もっと楽にWebデザインをしたい、、こんな方に向けての記事です。前回の記事で、クラスにcssを適用する方法をご紹介しましたこれでWebサイトの好きな場所にcssを適...

本記事では、

  • Bootstrap学習でまず覚えるべき事
  • レスポンシブデザイン
  • 画面確認

この辺について触れていきます。

Bootstrap学習でまず覚えるべき事

結論から言うと、グリッドシステムの使い方を覚えましょう

グリッドシステムって何?

簡単に言うと、スマホやタブレットなどデバイスに応じて構造を変化させるための仕組みです。

グリッドシステムを使うとレスポンシブWebデザインでレイアウトを作成することができます。

レスポンシブWebデザインはデバイスに応じて構造を変化させるデザインのことです。
PCとスマホで画面の表示が違うサイトをみた事があると思います。

グリッドシステムの使い方

グリッドシステムの使い方は以下の通りです。

  • class=”container”か”container-fluid”の中に入れる
  • class=”row”の中に入れる
  • class=”col-{prefix}-{columns}”の形式にする
  • columns}は合計値は12になるように指定する

実際にサンプルコードをみていきましょう。index.htmlを以下のように書いてください。
ピンク部分が今回のキーとなる部分です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>
     <p>何も捨てることが出来ないものは、何も変えることが出来ない</p>

     <div style="background-color: blanchedalmond">イージー人生</div>
     <div class="container-fluid">
        <div class="row">
          <div class="col-sm-2" style="background-color:red;">Red</div>
          <div class="col-sm-8" style="background-color:blue;">Blue</div>
          <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
        </div>
      </div>
      <div style="background-color: blanchedalmond">イージー人生</div>

     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

ブラウザ表示すると、こんな感じ

赤2:青8:黄2の割合になっていますね。
“col-sm-2″の2の部分が横の割合を示しています。

今度はモバイル以下のブラウザサイズ(PCのブラウザで横幅を調整してもOK)で表示してみてください。

あっ、表示が勝手に変わった!

これこそがレスポンシブデザインです!
“col-sm-2″のsmの部分がタブレット以上のサイズを表しています。
以下の表に対応表を示します。

では、少し応用していきます。
以下のコードを書いてください。
変更点は、クラスに”col-xs-4″を追加しています。xsはモバイルサイズの時の動作ですね

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    
    <link rel="stylesheet" href="sample.css">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>
     <p>何も捨てることが出来ないものは、何も変えることが出来ない</p>

     <div style="background-color: blanchedalmond">イージー人生</div>
     <div class="container-fluid">
        <div class="row">
          <div class="col-sm-2 col-md-4" style="background-color:red;">Red</div>
          <div class="col-sm-8 col-md-4" style="background-color:blue;">Blue</div>
          <div class="col-sm-2 col-md-4" style="background-color:yellow;">Yellow</div>
        </div>
      </div>
      <div style="background-color: blanchedalmond">イージー人生</div>

     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

タブレット以上の表示はこうです。

そしてモバイルの時はこうなります。

赤4:青4:黄4から赤2:青8:黄2に変わりましたね。
このように複数デバイスの表示を指定することもできます!

これが使いこなせれば、デザインも捗りそう!!

Bootstrapをさらに使いこなす

今回は、グリッドシステムについて解説してきました。

正直これさえマスターすれば、配置に困ることもかなり少なくなってきます。

そして、デザインしやすくするには、paddingとmarginの指定ができれば良いですね。

簡単に言うと、余白設定です。次回記事で解説します。

Bootstrapの知識を体系的に極めたい方は以下の書籍がオススメです。自己投資なら是非。

コメント