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

バージョンについて

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
バージョンアップが多く、Bootstrapでも2.xと3.xでは互換性がありません。利用する際にはいくつかの注意が必要です。
講師:
06:07

字幕

Bootstrap を仕事で使う人には必ず知っておいて欲しいことが2つあります。それはどちらもバージョンに関するものです。1つは、この Bootstrap のバージョンそしてもう1つはこの今開いているブラウザー。このブラウザーのバージョンへの対応です。まずは前者について見ていきましょう。Bootstrap に限らず CSS フレームワークはバージョンアップというものが結構頻繁に行われます。そしてこの Bootstrap にもバージョンがいくつかあり今のバージョンはここにあるV3.11 なので 3 なのですがそれよりも古いバージョンで2.3.2 というバージョンがあったんです。見た目も違いますね。2.3.2 と 3.1.1 は同じ Bootstrap ではあるんですが互換性はありませんので注意して下さい。レスポンシブに対応する構造やCSS を利用するためのクラスなどが違います。例えば、ここここでは row と span4 span8とクラス名が付けられていますがBootstrap の 3.1.1 では全くこういった構造ではないです。ここのクラス名が違うというのが大きいですしレスポンシブデザインに関する指定方法もまた変わっています。 もしすでに Web サイトでBootstrap を使っているという場合など、アップデートがあったとしても2.3.2 であれば無理にこちら、新しい方3.1.1 に差し替えるということは行わない方がよいでしょう。また、ちょっとページを戻りますが、こちらBootstrap の 2.3.2 はここにあるように公式のサポートが近々なくなってしまうようなので新しい Web サイトを作る時も素直にこちらここですね。こちらのバージョンを使うようにしましょう。右側の Browser and device supportをクリックします。こちらでバージョンを確認していきましょう。Supported browsers という所でこちら、さまざまなデバイスに対してそれぞれのブラウザーがどのように対応しているのか等が見てとれます。そもそもこの様にブラウザーが用意されていないケースはN/A と用意されています。iOS の Firefoxこちら、Windows 以外のInternet Explorerアンドロイドの Safari というのは用意されてないので無いですね。Chrome は PC、モバイルデバイスともにちゃんと対応しているようですがアンドロイドの Firefox は対応していません。 Opera もそうですね、モバイルデバイスは対応しておらずWindows の Safari にも対応していないようです。お客様とブラウザーの話デバイスの話をする時にここをベースにしておくと良いでしょう。また、注意しなければいけないのがWindows の Internet Explorer です。この表を見ると対応している、とありますが下に Internet Explorer 8 and 9と書いてありますね。これを見ると、一部は対応していない等の注釈のようなものが書いてあります。実質 8 と 9 でこのような対応ですので7 以下に関しては対応してないと見た方がよいですね。Internet Explorer の 8 と 9 はBootstrap で対応はしていますがそもそもこのブラウザー自体がCSS3 そして HTML5 への対応がすべてではないんですね。一部使えないものがあるのでそういった意味で対応していない箇所などを書いてくれています。特に見ておきたいのがInternet Explorer 8 ですね。こちら、微妙にまだ要件としてクライアントから入れたいと言われることも多いのでなかなか外せないんですがこの border radiusCSS で角丸を設定するプロパティですとかbox shadow 影を設定するプロパティなどが対応していません。 あとは background size とかですね。新しいプロパティに対応していないものがあるのでそういったものはデザインでも非常に使う場合なるべく避けておいた方がよいでしょう。Internet Explorer の 8 の対応へは、こちらRespond.js というものを読み込むことで対応できています。これらがバージョンで注意しておくことです。1つはそもそもの Bootstrap 自体のバージョンですね。そしてもう1つはブラウザーのバージョンについての注意事項をお話ししました。余談ではありますが、こちらBootstrap の古いバージョンに関してはこの Getting started の右の所の Migrating from 2.x to 3.0というので移行方法等もこっそりちょっとあります。これも見ておくと良いでしょう。このレッスンでは Bootstrap のバージョンについて紹介しました。

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

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

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

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

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

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