BootstrapでスピーディーにレスポンシブWebデザイン

グリッドシステムとは

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グリッドシステムはウィンドウを12分割してボックスを並べています。親要素を12として、その中をどの割合で分割するかを設定します。
講師:
07:38

字幕

Bootstrap では様々なデバイスにレスポンシブ対応するために非常によく作り込まれたGrid System を用意しています。この様に、メニューを横並びにした Web サイトを自分で作ると構成が複雑になっていってマルチデバイスの対応をする時「あれ、どのようにしたらいいんだろう?」と上手くいかないケースが出て来ます。そこで Bootstrap のGrid System を使いましょう。唯一、少しコツがいる所ですがゆっくり解説していきます。まずは、どのようなものか見てみて下さいね。Bootstrap の Grid System はこの様に、画面いっぱいにボックスが並んでいます。ボックスの数は結構、多くて合計で 12 個となるようになっています。さらに、このボックス、ウィンドウを狭めたりするとこの様に、カラム落ちしていきます。これが基本的な性質です。ここから、注意してよく聞いて下さいね。この 12 個のボックスを上手く分けることでサイドバーやメインコンテンツと並べることができます。左側、このオレンジの部分ここをサイドバーにしたいと考えましょう。計 12 個のうち4個のボックスを使うと考えます。 このボックスは全部で 12 個です。それ以上多くても、少なくても表示が崩れてしまいます。ですので、右側のメインコンテンツになる部分ここは8とします。4+8 で、合計 12 ですね。この様に、絶対12 個になるようにして下さい。また、合計が 12 になるのであれば3個のボックス毎に分けたり1個のボックスを 12 個というふうに使うことができます。今回は、サイドバーとメインコンテンツを2つに分ける例を見ます。オレンジ色の部分がサイドバー、右側がメインコンテンツ。そういった場合は、この様にdiv にクラスを付けていきます。通常の様に、まず左側と右側でdiv を分けますよね?そこは全く一緒です。div class="sidebar"div class="maincontents" という様にしてしまって OK です。そこに、プラスでクラスを足していきます。col-4 、 col-8 という様にしていけば OK です。そして、Grid Systemここだけで済めば、まだシンプルなのですがもう1つ注意しなくてはいけないことがあります。この2つだけでは Grid System としてちゃんと認識しづらいのです。 ですので、この div 2つをさらに囲むもう1つの div が必要になります。今出てきた背景の色ですね。この様に囲んでいきます。ですので div が3つあるという風に見れますね。ちなみに、この背景の divこれは row という名前を使うように決められています。ちょっと混乱してきましたか?手順で見ていきましょう。まず一番最初 div を作り、そこに row という名前を付けます。次、サイドバーにしたい所にcol-4 と付けます。そして、メインコンテンツにcol-8 と付ける。そして、 4 と 8 合計 12 になるように作っていけば OK です。実際のコードはこの様なかたちになります。オレンジ色の所がサイドバー緑の所がメインコンテンツ一番外側の黄色が row ですね。何も考えず、おまじないだと思ってrow と打ってしまって構いません。その次の所col-xs-4 などと入力していきます。この xs 、 sm 、 md 、 lg と並んでいますね。これはスマートフォンのサイズとかPC のサイズなどデバイスのサイズを表しています。xs はスマートフォンsm はタブレットmd は PClg は PC の大きなものです。 こうすることで、スマートフォンサイズの時は縦位置に並べたいタブレットの時は2個並びにしたいPC の時は3個ずつ並べたいというのを細かく調整することができます。これに合わせて数字の 4 とか 8数字はそれぞれcol-x とかサイドバーに並んでいるものの数字が異なってしまっても大丈夫です。重要なのは、それの対になる横並びにしている他のボックスとxs 同士で足した時にちゃんと 12 になるか?算数ができれば大丈夫な話だと思います。4つ並べたい時は3 × 4 = 12 なので col-xs を 3そして、6つで並べたい時は?という風に考えていけば良いですね。まずは、このコードを覚えてみることからはじめましょう。このコードで横並び2つが作れるようになるとそのうち、3つで並べたりとかスマートフォンの制御というのもできるようになります。Grid System についてはこちら Bootstrap のCSS の右側の Grid System に詳細が書いてあります。この様に、表にまとめられています。スモールデバイスの時は xs など忘れてしまっても大丈夫なように書いてあるので見ておきたいですね。また、この様に並べ方にもいろいろ目で見て分かるようになっています。 2つを丁度並べたい時はこの様に6を2つ。3つ並びの時は4にすればいい。この様になっています。そして、こちら xs-12そして md-8 がとなっていますね。xs は12 、 md が 8 。これでスマートフォンの様に縮めてみるとここですね、この様になります。この xs 、スマートフォンの時は12 ということなので全部ピッタリ表示されるようになっています。そして xs-6 こちらは丁度、半分を使うようになっているんですね。合計が 12 を超えています。xs で見ると12 と 6 で 18 です。超えてしまうと、この様に下に流し込まれるようになります。戻ってみると、mdPC のサイズは 8 。そして、こちらは 4 になっているので丁度 12 、しっかり並んでいますね。この様なかたちでGrid System ができています。このレッスンでは Grid System のrow と col について紹介しました。

BootstrapでスピーディーにレスポンシブWebデザイン

Twitter社が提供するBootstrapは、よく使うテンプレートをまとめてCSSを読み込むだけですてきなスタイルを適用できるとても優れたフレームワークです。このコースではBootstrapについて解説しながら、その簡単な使い方やlessによる便利なスタイルのカスタマイズ方法について紹介します。

2時間22分 (21 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。