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

サイドバーを作る

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メニューを横並びに配置してみましょう。横並びにするのにはいくつかのポイントがあります。ここではそのポイントをいくつか紹介します。
講師:
08:19

字幕

Bootstrap でグリッドシステムを利用して横並びにするのには少しコツが要ります。このように左側にサイドバーを作ってみてその方法を見ていきましょう。アセットをダウンロードしてこのようなページを開いてください。一緒にやっていきましょう。エディターでこのページを開くとこのようになっています。nav の下に container そしてjumbotron が入っている状況です。これをグリッドシステムを使って横並びにしたいと思います。Bootstrap のページの一番上から「CSS」をクリックし右側の Grid system をクリックします。ここにグリッドシステムの色々なことが書かれています。英語が分からなくても大丈夫です。コードをコピーしていけばいいだけです。これが使いやすそうです。丁度右側にサイドバー左側にこのようにメインコンテンツがあります。これを逆にすればこのようなページが作れそうです。ではこのコードをコピーしましょう。col-md-8、md-4 これですね。これをコピーしてエディターを開いて貼り付けていきます。場所はこの container の中にしてください。ペーストができました。 container の中に配置するとこのようにちゃんと両端に余白があり真ん中寄せになるので非常にきれいに見えるのです。貼り付けて準備ができましたね。ここにコンテンツが入っていきます。そしてここもですね。今このままだとこちらの見た目になるので左側が大きくなっています。逆にしたい場合は非常に簡単です。この数値を入れ替えればいいだけです。これで合計12のボックスが2つできたということになります。ではまず右側ここにあった jumbotronまずこれをカットして不要な行を削除し見やすくした上でこの col-md-8 と書いてあるdiv の中に貼り付けます。インデントを揃えておきましょう。これで右側ができました。保存して見てみましょう。ブラウザをクリックして更新をします。このように jumbotron が右側に寄り「ここ」というサイドバーが入る予定の位置が空きましたね。あとはここに何かメニューを入れてみましょう。Bootstrap の一番上から「Components」をクリックしてNavs、ここの Pills というものをしていきましょう。ここのコードを丸ごとコピーしてエディターに戻りcol-md-4 この部分に貼り付ければ OK です。 インデントを揃えておいてファイルを保存します。更新ボタンを押すとここにメニューが入るようになります。更新。これで横並びができました。非常にシンプルですね。col-md-4 という風にするとこっち側が4個分のボックスになるのです。ちょっと大き過ぎるかもしれないですね。もっと狭めてみる為に半分にしてみます。保存。そして更新をしてみます。そうするとこっち側が空いてしまってあまりきれいじゃないですね。これは今 8 と 2 で10 しかないのであと2個分のボックスがここに空いてしまっているのです。エディターに戻りこの下の col-md-8 を 10 にして丁度 12 になるように確認したらファイルを保存して更新してみてください。ちゃんと端まで行きました。ただ、左の所がカラム落ちしちゃって勿体無いですね。ここの pills にこの stacked というのを追加してみましょう。nav-stacked をコピーしてエディターに戻りnav-pilled の後ろにスペースを空けてクラスを貼り付けます。保存をしてまたこのブラウザに戻ってきました。もう一度更新してみましょう。これできれいになりましたね。左側にメニューが用意されて右側が広いメインコンテンツになりました。 こちら、例えばこのメニューを2つ用意することも可能です。これで md に2個増えましたね。このままの状況で保存をしてブラウザでどうなるかを見てみましょう。更新をします。カラム落ちしてしまいました。これは何故だと思いますか。エディターに戻って見てみましょう。このクラスの col の数字がポイントです。2、2、10合計で14になってしまっています。グリッドシステムは12のボックスで作られているのでそれを超えるとこのようにカラム落ちしてしまうのです。ですので、ここを82個減らして保存をします。もう一度ブラウザを更新してみるとこのようにすることができました。数字を変えるだけでその幅などそして個数も幾らでも増やせるので非常に便利ですね。例えば、この jumbotron が入ってる所を4に減らしてしまってその2個分をこのようにメニューをコピーしてjumbotron の後ろ側に2つ追加してみます。これでファイルを保存します。後ろに2つ追加したのでこの同じものが右側にも追加されjumbotron 自体が真ん中に小さく表示されるようになる筈です。更新ボタンを押してみましょう。できましたね。このように、グリッドシステムさえ数をちゃんと守っていれば好きなように横に色々付け足して並べることができます。 色々な決まり事が多くて迷ってしまうかもしれないですがポイントはこの rowそしてここの数です。2、2、42、2全部で12個になっていればこのように横並びになりますし例えば、これを全部2個を1にして12個並べるということも可能です。ここを削除してこの nav だけにしてみましょう。そして1,2,3,4,5,6,7,8,9,10,11, 12 個これで保存をするとこちらも12個分ダダダダーと入りました。非常に分かりやすいですね。12個にさえなれば大丈夫ということが分かりました。このレッスンではグリッドシステムの並べ方について紹介しました。

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

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

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

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

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

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