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

背景を設定してみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jumbotronの背景に画像を入れてみましょう。lessはcssと同じようにかけるので難しくありません。
講師:
04:56

字幕

Bootstrap で用意されているComponents のそのスタイルを変えてみましょう。一番簡単そうなこの jumbotronこの背景の色を変更してみたいと思います。このレッスンのアセットにこの様なファイルがありこれをクリックするとこの様なファイル構成になっています。今回使うのはこの less の中のjumbotron.less ですこれですね。これをテキストエディターで開きます。これで Less ファイルが開きました。そして背景を変えるためにはどこをいじれば良いのでしょうか。基本的には CSS と似ているのでプロパティが分かれば調べられますね。background-colorここです。ここに @... というよくわからないものがあるので一旦削除して好きな色を入れていきましょう。例えば red これを保存します。更新してみると何も変わりませんね。Less ファイルはそのまま保存しただけではブラウザーに反映させることはできません。CSS に変換してあげる必要があります。例えばこの preprosというようなアプリケーションがそれです。この様に Less ファイルをCompile としてあげる必要があります。 書き出し先を間違えないように気を付けましょう。ここに書き出しをします。こちらも同様に間違いがないように確認しておきます。これで大丈夫そうですね。よく間違えがちなのがこの HTML ファイルこれですね。ここのパスと、ここで書き出したパスが合っていないのでいくら更新しても変更されないなんてこともありますのでLess ファイルを使う時はまずHTML ファイルのパスがちゃんと合っているかそしてこの書き出し先が合っているかを確認しましょう。それができれば準備は OK です。Compile ボタンを押してCompilation Successful というのが出てきたら変換が完了した証拠です。ブラウザーに戻って更新を押してみましょう。赤くなりましたね。ほとんど CSS と変わらなかったと思います。手順としてはまず Less ファイルを開きそこのプロパティを書き換えた後こういったアプリケーションなどでLess ファイルを CSS に変換しておくという手順になります。これでは物足りなかったですか?ではもう少し。画像に差し替えてみましょうか。こちらのダミーイメージを用意してくれる Web サービスから適当にリンクをこの様にコピーしておきます。 そしてエディターに戻りこの jumbotron.lessここの background-color をbackground とでもして url引用符を入れてこの様にします。サイズはなんでも大丈夫です。大きめにしたい時はこっちの左側 400 の所ここが幅なので 960こっちは高さなので 300とでもしておきましょう。ファイルを保存します。これで自動的にこの様に変換してくれます。そうしましたらブラウザーで更新するとこの様に写真が入りました。Less ファイルを開いて編集して保存をする。そしてこういった Compile ツールLess の Compilerでこの様に Compile する。このアプリケーションの場合はここの Auto Compile が入っているとこの Less ファイルがなにかしら変更があった時自動的に CSS ファイルを書き出してくれます。操作方法は非常にシンプルですね。このレッスンではBootstrap の既存のパーツをカスタマイズするべくLess ファイルの編集そして Compile の方法を学びました。

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

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

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

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

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

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