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

lessでの便利な記述方法 2 - 変数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
良く使う数字を一括で変更するとき、まれに関係のない数字まで置き換えてしまい表示がおかしくなってしまうことがあります。そんなときに変数を使うと非常に安心です。
講師:
05:39

字幕

Bootstrap の Less ファイルを開くとこの様に @ から始まるものが幾つかこの値の所に入っているのを見かけますよね。これは変数というものです。プログラムを少しやったことがあればわかると思いますがまずは簡単に紹介してみましょう。皆さんこの様に同じ色を何回も変えたりしますね。そしてこの色が変更になった時手作業で別の色に差し替えたり一括検索などで差し替えたりすることもあると思います。ただよく使う色とかよく指定されがちな色の場合こうやって一括検索すると意図しない所まで変わってしまって手作業でやり直さなきゃとか1個だけ忘れてたということありませんか?そういうときに便利なのがこの変数というやつです。普通の CSS はこの様に書きますがLess の場合Less の場合はもっとシンプルに書くことができます。まずここをコピーして下にLess の場合の記述を見てみましょう。Less の場合は変数というのを定義してその中によく使うこういったものを入れておくことでヒューマンエラーを防げます。@ と始めることが変数の書き方です。ここに black とかユニークにするためにcolor- 等も使います。とします。 Space を空けてそこにこの様に値をいれれば OK です。最後のこちらセミコロンも忘れないで下さい。こうすることでcolor-black という箱の中に000 という色が入りました。この右側は特に色だけではなく他の数値も入れることができます。font-size として12px というのも入ります。後はこの様に定義した所残しておいて@color-black というのをこうやって変えたい所に入れるだけです。カラーだから効果は変えたいけれどbackground-color は、それとは違う意味で使ってるから変えたくないという時に、この様に変数を定義しておけばここを変えるだけでここの色が black だったりまた別の色もっと薄い色だったりという風に使うことができます。非常に便利ですね。Bootstrap のこういったjumbotron のファイル等もそういったもので作られています。ここに color そして @jumbotron-color とあります。こういった Bootstrap の@ のある変数はファイルの中のこの Valiablesというのに入っています。ここを見てみるとColors とあってgray-darker としてgray の中にいろんなものが入ってますね。 あとはbrand-primary として色が入っています。先程の jumbotron の方をみてみましょう。ここの jumbotron-color は何色になっているのでしょうか。検索するといっぱいあっても探しやすいですね。jumbotron-color はinherit となっています。ということは、これは他の所で指定されたものに倣うよ、ということですね。また background はこの様に jumbotron-bg となっています。jumbotorn-bg は @gray-lighterまたここに変数が来てますね。変数の中に変数を入れることも可能です。ではこの @gray-lighter どこにあるのかと探してみるとこの一番上ここにありました。@gray-lighterそして色が指定されています。なんだか難しそうですけどここの右側を見ると16 進数で言うと eee の時と同じ色になっていることがわかります。この様に Bootstrap では様々な値を管理しやすいように変数化されておりその変数の内容は、ここvariablesこの Bootstrap の less のファイルの中にあります。 この variables の中でほとんどが管理されています。なのでちょっと色変えたいなとか余白変えたいな、という時はまず変えたい所の less ファイルを開きそうして variables からその変数を参照すると良いでしょう。Bootstrap はこういった構造的なファイルの管理CSS で Less のスタイルの管理としても凄く参考になるリファレンスです。この様に変数を定義すればいいんだとかそういった Less の書き方をもっと綺麗にしたい場合にも参考になるので是非見ておきましょう。このレッスンでは変数の使い方そして Bootstrap ではどのように変数が管理されているかを紹介しました。

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

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

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

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

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

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