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

lessでの便利な記述方法 3 - 四則演算

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
数字に対して計算させることができます。数字はもちろん、色コードに対しも可能です。
講師:
09:32

字幕

このようにBootstrap のサイトでいくつかカスタマイズしようとless ファイルを見ているとたまに、こんなようなものを見かけることはありませんか?jumbotron-padding / 2とあったりします。変数に対して何か操作を行っているようですね。less ファイルの便利なところはこの様に、値に対して計算ができるということなのです。非常に便利です。では、こちら Jumbotron のThis is a simple hero unit などというこの言葉、これの文字サイズを変更してみましょう。これは p でタグ付けられています。この部分ですね。丁度 font-size があります。では、分かりやすいように、一度、これを適当な数字にしてみましょう。20px とでもしておきます。ファイルを保存して、コンパイルをします。これで CSS に変換されました。ブラウザで更新をするとちょっとだけサイズが変わりましたね。これで準備は OK です。テキストエディタに戻ってここで演算をやってみます。上と同じように/ 2 としてみましょう。これは割り算です。では、これでファイルを保存してみましょう。ファイルを保存してコンパイルできたことを確認してブラウザで更新。 文字が小さくなりました。割り算なので 20px から 2 を割って10px になったんですね。あとは、すごく簡単なこちら折角だから大きくなったのが分かるように20px+20px で40px にしてみましょう。同様に保存をしてこれで OK ですね。では更新をします。文字がすごく大きくなりました。また、マイナス ...これで 10px ですね。同様に保存。そして更新。同じサイズになりました。丁度、先ほどやった2分の1にしたサイズと一緒です。あと、 ×(かける)はこの *(アスタリスク)です。これで 2 とすると2倍のサイズになるので、文字が大きくなります。ファイルを保存して、コンパイルされたことを確認して、更新をしましょう。大きくなりました。これで演算ができましたね。少し難しい例として色も変更することができます。Bootstrap の variables というless ファイルを開いてみます。こちらですね。一番上の、色を選考するところが変数で指定されているのが分かります。いろんな...例えば gray を基準としてgray-dark 、gray-darker 、 light 、 lighter となっていますね。 見てみるとここの色は 555 のようです。そこから、もっと明るくなったり暗くなったりしています。よく見ると lightenそして黒を示す 000% が入ってますね。こうすることで、色を少し明るくすることができるのです。逆に、ここを darken とすると、この % だけ色が黒くなっていきます。既に、ここが黒い場合というのはあまり意味がないですね。これ、非常に便利なのはこの @brand-primary とかそれで、ちょっと濃い色ちょっと薄い色というのを作りたい時があると思います。例えば Jumbotron のページでここですねbackground bg 。ここを lighten とかで明るくしたり暗くしたりしてみましょうか。まずは文字を間違えないようにしておきましょう。l-i-g-h- lightenそして()これで ; (セミコロン)も忘れずにそうしたら、ここにまず値今は変数を入れています。これを入れて、あとは明るくしたいだけ数字を入れていけばいいのですね。Jumbotoromjumbotron だとそのまんま暗いかもしれないので、555 くらいにしておきましょう。これでグレーになっています。 555 からさらに同じように13.5%これで、できました。文章を見比べてみても間違いないですね。less ファイルで注意したいのは、このような文章や変数、また書式が間違っているとうまくコンパイルされません。試しににやってみましょう。これ、余計なのが入っている状況ですもんね。うまくいかないと思います。Save をするとこのように Failed (失敗しました上手くいかないよ)とあります。プログラム言語ではありますのでこういった書式や変数などのミスのないようにしておきたいですね。改めて、ちゃんと文章を直してファイルを保存。コンパイルがうまくいきました。背景の色は 555 から少し明るくなっているはずです。更新をすると、このような色になりました。「開発」というのを用意します。Safari >「環境設定」から「詳細」で「メニューバーに開発メニューを表示」とできます。Chrome などでは結構できる機能なのでここで右クリックして要素の表示をしてください。Safari の場合はここの「スタイル」をクリックします。そうすると、今選んでいるこここの div class 所の背景を見ることができます。今 jumbotron は777 になっていますね。 実際に、ここを 555 と書き換えると本当はこの色なのに、先ほどの計算式によってこの色になっているということが分かります。このように色を変えることができます。では、他にも見てみましょう。なんで、この lighten とか darken で明るくすることが便利なのか?そういったところを見ていきたいと思います。例えば、 Web サイトでよく使う色などがあると思います。茶色をベースにとか緑をベースにとかそういった色を細かく定義していくのって大変ですよね。その色をベースにして、ちょっと薄い色とちょっと明るい色、ちょっと濃い色これらが欲しいというケースはよくあると思います。ただ単純な濃淡であればこの lighten 、 darken を使うことでわざわざ色コードをそれぞれに分けたり変数で管理しなくてもよくなるんですね。この1個の色さえあれば計算式で色を変えられるんです。非常に便利ですね。例えば、ここの色を入れて代入して、これでコンパイルができました。更新をしてみると、青くなります。青いサイトなので薄いのが欲しいという時にはこのように、 lighten で青の色を薄くすることができます。もう少しだけ薄くなどそういった調整ができるのも嬉しいところですよね。 また、こちらの黒い文字も同様です。ここも変えたい時はlighten と同じような書式でここを darken と入力し濃さを調節して、ファイルを保存。コンパイルできたことを確認して更新ボタンを押してみましょう。そうすると、ここの青より少し濃い色でできました。カラーバリエーションが非常に簡単になるんですね。1個メインとなるカラーを定義しておけば良いですしそこには、こうやって明るさと暗さこの2つを定義できる。こちらもそのように使われています。Bootstrap の variables ではgray として黒を全部指定しているのですがそれぞれの明るさによって複数の gray を使い分けています。そうすることで「222 を変えたいな」とやらなくても計算式でできるので必要なコードはこれだけ。色コードっていろいろ探すのは面倒ですがこの方法だったら結構、簡単ですよね。非常に便利です。このレッスンではBootstrap の less ファイルを見て四則演算をする方法を紹介しました。

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

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

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

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

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

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