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

ナビバーを入れてみる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
まずはBootstrap公式サイトのドキュメントを一緒に見ながら簡単な導入を行っていきましょう。
講師:
07:04

字幕

Bootstrap の導入は非常に簡単です。このレッスンでその導入部分をやっていきましょう。まずはトップページからGetting started をクリックします。このままスクロールしていくとBasic template とありますね。英語が苦手でも大丈夫です。ここのコードをそのままコピーするだけです。コピーして、テキストエディターに貼り付けをします。これで貼り付けることができました。注意しておきたいのは、ここ lang今は英語になってますが、日本語で扱う場合は ja にしておきましょう。後はタイトルを編集しても良いですし注意しなくてはならないのは、ここですね。css/bootstrap.min.cssとあるのでそのパスを合わせておかないといけません。この様に Bootstrap のファイルをダウンロードしてある場合はダブルクリックからここにファイルを配置すれば OK です。エディターをファイルで保存をし場所を「デスクトップ」そしてこのディレクトリをクリックしてここに保存をします。ファイル名は使いやすいようにindex.html にしておきましょう。Save とすることでここの HTML ファイルからCSS のディレクトリにあるbootstrap.min.cssこれを読み込むようになっています。 ダウンロードはトップページからのボタンでもありますがこちら、一番左側のものをダウンロードしておけば OK です。では早速、この保存したファイルをブラウザーで確認してみましょう。新しくタブを立ち上げてドラッグして表示させてみます。今の所はまだこんなにシンプルなものですね。でも、これに色々な HTML や要素を追加していくとどんどんこちらの Web サイトのような見た目とか様々なものが作れるようになっていきます。Bootstrap には非常にありがたいことにコンポーネンツといってパーツ集が用意されています。一番上のメニューからComponents をクリックしてここにあるパーツを好きに使って組み合わせていきましょう。色々なものがありますね。例えばこういう見た目にしたいなと思った時はここの下のコードをコピーして貼り付ければ OK です。コピー&ペーストだけでもそれなりのものが作れるので非常に簡単ですね。この右側の所から Navs をクリックして下にスクロールしていきます。様々なものがありますね。今回はもう少し下の Navbar からこの見た目を使ってメニューを作ってみましょう。先程と同じようにコードをコピーしてお使いのテキストエディターに貼り付けていきます。 貼り付ける場所はbody のすぐ下が良いでしょう。ここですね、ペースト貼り付けることができました。このインデントがうまくいかない場合などは綺麗に調整しておいて下さい。保存をします。保存はショートカットキーでも大丈夫ですね。多くのソフトは Mac だとCommand+SWindows だとCtrl+S になっています。保存が完了したらもう一度ブラウザーに戻ってこちらを更新してみましょう。この様に先程見たこちらと同じ見た目のメニューが入りました。試しにスマートフォンの時の見た目を見てみましょう。ウィンドウを縮めるだけでも十分にその感じがわかります。ここ、メニューが格納されましたね。そして、クリックするとこの様に様々な要素が表示されました。ありがたいのが、こういったものはJavaScript を書かないといけなかったりするのにBootstrap だと最初からそういった JavaScript が読み込まれているので私たちが書かなくとも、こういった動作を実現できるというのが非常にありがたいですね。また、こちら拡げた時のドロップダウンもこの様に使えるのが凄くありがたいです。この調子でやっていきましょう。 Bootstrap のページ、Components に戻りこの色を黒にしたいなと思うとします。その時はこの様にスクロールしていくとここに Inverted navbarというのがあります。黒い見た目がかっこいいですね。ここを読んで見ると、このクラスを追加すれば良いようです。コードのサンプルもここにあるのでどのように追加するか非常にわかりやすいですね。こちらをコピーしてエディターを開き先程挿入したこの nav のコードここの default の所を削除してペースト。これで .navbar-inverseここに書いてあるクラスが挿入できました。保存してブラウザーで見てみましょう。更新ボタンをおします。黒くなりましたね。この様に Bootstrap では基本のコードをコピー&ペーストしそして希望の見た目がある場合こういったクラスをHTML の同じ場所に追加してやることで変更ができるんです。凄くシンプルですね、コピー&ペーストして、あとはここにある見た目を使いたい時はここのコードとか見ればいいだけクラスなんかは普通の文章でも、この様に赤くハイライトされているので非常にわかりやすいです。英語がわからない、なかなか使う機会がないという方でも安心してこちらを見て、そのままコピー&ペーストすることができますね。 このレッスンでは Bootstrap の簡単な読み込みから Navbar を挿入してその色を変える所までやりました。

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

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

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

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

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

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