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

brandとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルコードをひとつひとつ見ていきましょう。brandとはサイトタイトルを入れる場所です。画像の挿入も可能です。
講師:
04:56

字幕

このレッスンでは Bootstrap のナビバーを変更してみたいと思います。こちらの文章を差し替えたり不要なものを削除したりあとは、このロゴの部分画像に差し替えることも可能です。こちらのコードはアセットの中に入っていますのでそちらを開いて、この様な状況になっていることを確認して下さい。アセットはこのような構成になっています。css、fonts、js は Bootstrap 側から配信されているものです。images はこちらのレッスン用に作ったものでindex.htmlこれが私たちが編集するものですね。エディタで開くとこの様になっています。では早速、変更を加えてみましょう。まずは、ここの左側の Brandこれを画像に変更したいですね。まずページをスクロールしていきます。色んなコードがあって迷ってしまうかもしれませんがゆっくり見ていきましょう。この nav と入ってますね。この下の所を見ていくとここに Brand という文字が入っています。見つけ辛い場合は、お使いのエディタでBrand などと検索するとすぐに見つけられまよ。ここの文字を変更すればサイト名を変えられます。保存をして、こちらSafari でも更新してみます。 この様に変わりました。縮めたとしてもレスポンシブはちゃんと動いていますね。エディタに戻ってここに画像を入れてみましょう。まず、先程入力したこの文字を削除して画像を入れる HTML を書きます。img src そしてimages/brand.png です。brand.png というのはアセットの中にimages として入っています。これを使います。保存をして、ブラウザ側も更新しますね。更新に関して、多くのものは Command+RWindows だと Ctrl+R で更新ができるはずです。今後はショートカットキーを使っていきます。この様に画像を入れることができました。スマートフォンのように縮めてみても大丈夫そうですね。ただ、あくまでもこれはこのウィンドウサイズ。スマートフォンと全く同じものではありません。もしかしたら、ほんの少しだけずれてしまってるかもしれません。やはり実機で確認するのが一番ですのでこういったページを iPhone 側で表示して一緒に見れるようにしておくと良いですね。戻しました。あとは文章を変えていったり不要なものを削除しましょう。エディタを開いて、見ていきます。先程変えた部分がここの画像の部分ですね。 隣、ここの Link というのが今ちょっと黒くなっている所です。ここを「トップページ」その隣を「自己紹介」とでもしましょうか。これで保存してブラウザ側も更新してみます。ショートカットキーでリロードしました。入りましたね。ここに右側にメニューがあるのは良いですね。ここの部分は使わないので削除してしまいましょう。エディタに戻ってli class="dropdown" と書いてある所ここが不要ですのでこの li から終了の所まで見つけて削除していきましょう。ここですね、削除しました。保存をしてみます。ブラウザに戻って更新。これで非表示にすることができました。この様にトップページを作っていけば大丈夫です。このレッスンではサンプルコードのHTML を編集してこの Brand の所に画像を入れる方法そしてメニューの文章を変えるところをやりました。

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

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

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

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

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

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