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

ウィンドウサイズごとの設定をする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォンやタブレットの時の並べ方も変更できます。colの後に続くsxなどがそれぞれに対応しています。
講師:
07:15

字幕

グリッドシステムでこの様に画像をたくさん並べたときスマートフォンでの見た目はどうなるのでしょうか。試しに縮めてみるとこのようにスマートフォンでもちゃんと3つずつ並んでいますね。ですが、このサイズだと少し小さすぎるようにも感じます。このように画面が小さいときスマートフォンやタブレット、PC などの時によってその並び順を変えたいということはありますよね。グリッドシステムを使ってその方法を見ていきましょう。このファイルはこのレッスンのアセットとしてダウンロードすることができます。開くとこの様な画面になっていますので一緒に見てみましょう。テキストエディターを開きます。この様なコードになっています。では、早速この画像の並び順を変更してみたいと思います。ポイントはここ、これがちょうど1つの画像になっています。例えば、このダミー画像の URL を2に変えて1個だけ変えてみますね。丁度この部分です。これがこのひとまとめ。ここの数字をそれぞれ変えることでスマートフォンやタブレット、PC にも適用させることができます。気になっていた方もいると思うんですがこれ同じようなクラスが1、2、3、4個も並んでいますよね。 これはどういう意味なのでしょうか。この xs はどうやらサイズの用です。xs-4 、sm、md、lgエクストラスモール、スモール、ミディアム、ラージという意味ですね。これが画面のこの幅に対応しています。例えば、この一番狭いxs のときここの並び順を変えたいときはこの col-xsここの数字を一気に変えれば大丈夫です。ここを、2つ並びにしたいときは合計が 12 になるようにする必要があるので、6 にします。これで1度保存してみましょう。1つだけ大きくなって途中でカラム落ちするはずですね。更新ボタンを押します。思った通りになりました。では、他の画像たちも同様にやってみましょう。このようにひとつひとつにコピーをしていきます。これで全部ですね。ファイルを保存して更新してみましょう。皆これと同じ大きさになるので2個ずつこう並んでいくはずですね。更新ボタンを押します。無事2個ずつ並べることができました。ここの数字を変えたので他のウィンドウでも大きくなっているんでしょうか。でも、xs 用に作ったのだから他の並び順は変わらないはずですね。では、見てみましょう。このようにウィンドウサイズ、このサイズとここまでここぐらいからは変わっていきますね。 ここまでが xs のサイズです。具体的なサイズはこの Bootstrap 一番上のページからCSS >Grid system を見ることで分かります。このように Grid options というテーブルがありますね。Extra small devices phones私たちが xs で制御しているものは768 px より小さいものです。ですので、ここも 768 px より小さくなるまでは適用されません。それより小さくなるとこのようにサイズが横並びになりました。もう、お分かりですね。ここにあるこの col-xs、sm などはそういった画面幅に対応しているのです。では、少し色々な並び方をしてみましょう。スマートフォン時はこのサイズでcol-smタブレットの時のサイズは大きくできるのでここは、4個のままだけれどもPC サイズになった時はここを大きくしたいのでいっぱい並ぶようにしちゃいましょう。col 3 と指定します。ここの md が 3 ですね。この様にコピーしておきます。一括で置き換えてしまっても大丈夫です。これで全部ですね。ファイルを保存して更新してみます。こっちは変わりませんがこのように 768 px 以下の時はこれそして、今タブレットのサイズになりましたね。 表で見ると、768 より大きくて992 より小さいサイズです。その時は col-sm-4 なので4つのボックスで分けてみます。4割る3で 12 ですのでここは3つですね。次、それより大きいサイズ、992 px より大きいウィンドウの時はここ col-md-3 が適用されますのでここが4つ並びになります。なりましたね。そして、また一番大きいサイズ、1200 px 以上にするとここのコードでは、タブレットと同じように4の数字が入っているのでまた元に戻るのです。この様にすることで様々なウィンドウ幅の時にどのようなサイズで並べるか等を自由に選ぶことができます。これが使えるとスマートフォンサイトやPC サイトを作る時に非常に表現の幅が広がりますね。ぜひ覚えておきましょう。このレッスンでは、グリッドシステムでデバイスのサイズごとに画像の並び幅を変える方法を紹介しました。

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

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

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

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

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

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