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

Bootstrapとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
BootstrapはIE8以降にも対応しており、異なるブラウザでもキレイに表示させることができ、コーディングが不慣れでも各ブラウザに対応したWebサイトを作ることができます。
講師:
07:02

字幕

Bootstrap は既にデザイン済みのCSS ファイルが用意されておりHTML ファイルにそれを読み込むだけでレスポンシブを意識したWeb サイトが作れるCSS フレームワークというものです。CSS フレームワークというのはこの Bootstrap 以外にも幾つかありこちらの Foundation ですとかこの Skeleton というものが有名です。CSS フレームワークというのは既にデザインされた CSS や必要な JS ファイルなどが予め用意されているものでありこんな感じで纏められるほど沢山の数があります。幾つか又は1つだけでも利用方法を知っておくとコーディングが苦手でもレスポンシブな Web サイトですとかブラウザ毎の表示の違いなどをうまく吸収した Web サイトが作れるようになります。今回は一番ドキュメントの豊富なTwitter 社が提供しているBootstrap を利用する下準備を行いましょう。まずは Bootstrap の Web サイトにアクセスします。トップページを開くとDownload Bootstrap というのがありますのでこれをクリックします。すると Getting started のページに遷移しダウンロード画面が見えます。 今回は私達は特にカスタマイズなどを行わない簡単な方法をやっていきたいと思いますので一番左 Download Bootstrap をクリックします。このようにダウンロードする事ができました。中身を見てみましょう。CSS ファイルだけではなくフォントや JS のファイルなども幾つか用意されているようです。CSS の中には bootstrap-theme というものが3つとbootstrap.css というのがあります。同じような名前で少し違うものが幾つか種類がありますが私達が使うのは、特にこのmap や min などが付いていない普通の CSSbootstrap.css とbootstrap-theme.css のみです。この CSS を自分の書いた HTML で読み込むことで既にスタイルがあたったものを作ることができます。また、ダウンロードしなくても利用することが可能です。こちらのページにBootstrap CDN というのがあります。下にソースコードがありそれを見てみるとここは URL に非常に似ていますね。こちらは Bootstrap のサーバー上に既に置いてあり直リンクというものです。 http: を入力するだけで直接このサーバーの CSS にアクセスしてダウンロードすることなくCSS ファイルやこちらの JS ファイルが利用できるというものです。簡単に様子を見てみたいというだけならこちらでも問題ありませんがあくまでも別のサーバーに用意されているものですのでこれがダウンしてしまった時などは利用ができません。お客様と一緒に Web サイトを作る場合などにはこちらの利用ではなくダウンロードした方が良いですね。では、Bootstrap はどんなデザインができるのでしょうか。それを見てみましょう。左側のメニューに Examples とあります。これをクリックしてみるとこのように様々なものが用意されています。例えば、Bootstrap themeこのようなナビ、それとメインイメージが入りそうな大きいところあとは、ボタンサムネイル、メニュー様々なものが用意されていますね。これらを自由にコピー&ペーストして使うことでWeb サイトを作ることができ更にこれはレスポンシブに対応して各種ブラウザの差異も無い状況になっているものです。ではウィンドウを縮めてみますね。このメニューなどがどうなるか見てみましょう。 このようにメニューが格納されてクリックすると開閉するという風な動きになっています。これを自分で作るとなるとjQuery とかそのコードを書かなくちゃいけなくて(ちょっと大変だな)(書いたことがないけどできるかな)と不安に思ってしまうかもしれませんがBootstrap ではこのようなスクリプトは予め用意されているのでそれを使うことができます。非常に簡単ですね。また、それだけではなくトップページに戻り下の方にスクロールしていくと様々な Bootstrap で作られたサイトを見ることができます。こちらには色々な企業が Bootstrap を利用して作った Web サイトを掲載してあるんですね。見るのはすごく面白いです。下のボタン Explore the Expo をクリックしてみましょう。こんな Web サイトも作れるんだ、と想像力をかきたてられるようなものが様々あります。Bootstrap を使うとどうしても先程見たようなシンプルでみんな同じような見た目になるのかと心配される方もいるようですがこれは先程見たものと同じですか。違いますよね。カスタマイズを行うことでも十分に Bootstrap でも個性的な Web サイトを作れます。 導入に心配なケースはまず一番最初管理画面や自分のプライベートのWeb サイトなどを作ってみるなどして具合を把握しカスタマイズの勘所を掴むと良いですね。本レッスンではこの Bootstrap の最初の下準備ファイルのダウンロード方法やどんな Web サイトを作れるかなどを見ていきました。

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

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

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

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

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

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