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

jumbotronを挿入

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Componetsからjumbotoronのコードを貼り付けて挿入します。
講師:
05:54

字幕

Web サイトを作るのであればこちらの見た目の様にしっかりと、メインイメージとなる場所を用意したいですよね。このレッスンでその方法を見ていきましょう。「レッスンページ」に行きます。今は、この様なかたちになっています。アセットオーダーなどをできるので一緒に開いてやってみましょう。Hello,world! とありますがこのヘッダーのナビ以外なんともシンプルなものですね。ここの Hello,world! の部分をこちらの様に、しっかりと枠を作ってみたいと思います。まずは Bootstrap の一番上の所からComponents をクリックします。右側に Jumbotron というのがあるのでこれをクリックしましょう。そうすると、左側に先ほど見たのと同じものが用意されています。これ、なんで Jumbotron と言うのでしょうか?何か、海外でそういった用語があるのかな?と思って、私も調べてみたのですがこれ実は、とある日本の大手家電メーカーの大きなモニターの名前だったんだそうです。昔の Bootstrap の 2.3 系はこちらの Jumbotron という名前ではなくHero Unit という名前でした。 それが、新しくバージョンが変わってJumbotron になったのですが少しセンスのある名前で非常に面白いですよね。さて、ちょっと脱線してしまいましたがJumbotron 早速入れてみましょう。非常に簡単です。こちら、下にコードが用意されているのでこれを選択して、コピーをしそのまんまテキストエディタに貼り付けるだけです。貼り付ける場所は、こちらの navこの nav が終わった、ここですね。h1 の Hello,world! が入っている所を削除してここに挿入します。インデントを合わせてこれで準備が OK です。保存(Save)を押して、開いてみましょう。この様に入りました。無事、きれいに入りましたね。全く同じですがここのテキストが入っていません。サンプルのコ―ドはここ。任意の文章を入れて下さいねと言う様にダッシュ(...)になっています。テキストエディタに戻って自分の好きな文章を入れてみましょう。ここをコピーしちゃっても簡単ですね。コピーしてテキストエディタに貼り付けをする。保存を押して更新をすれば、ちゃんと入りました。非常に便利です。ですが、ちょっと物足りなくありませんか?端から端までピッタリ表示されているのはいいのですがこの様に、真ん中に寄せてみたいですよね。 その時には、ひと手間を加える必要があります。まず Bootstrap 。このページの一番上からCSS をクリックします。そして、この右側のメニューのOverview の Containersこれをクリックしましょう。これはとっても簡単です。先ほどの Jumbotron の上や中でも大丈夫ですのでこの div class="container" というのを追加すると真ん中寄せになるんですね。Easily center a page's contents bywrapping its contents in a .container.とあります。英語が分からなくても大丈夫。まずはコピーして、テキストエディタにそれを貼り付けるだけです。一度貼り付けてインデントを合わせてJumbotron をこの中に入れてみましょう。ここに貼り付けます。インデントを合わせて見やすくしておきましょう。そうすると、ここdiv がここからはじまってJumbotron はここから。終わりの div と開始のタブが同じ位置にあるのでとても見やすくなります。これで保存します。そして 「レッスンページ」。今、簡単に真ん中になるというcontainer を入れたのでこれを更新するとこちらの画面の様に左右に余白が作られると想像しましょう。 「レッスンページ」を更新します。できました。そうです、真ん中に入れたい時はこの containerこちらですねこれを入れれば OK です。非常にシンプルです。他のものでも、この様に真ん中に置いて余白を調整したい場合はcontainer を入れましょう。スマートフォンの時の見た目もこの様に自動で余白が調整されしっかりと真ん中に配置されます。非常に使いやすいですね。次に、ここ、ボタンを見ていきましょう。先ほどのページを見るにボタンにはいくつかの種類があるようですね。折角なので、ボタンのデザインも変えていきたいと思います。これで Jumbotron を挿入し真ん中にすることができました。

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

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

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

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

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

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