Sass入門ガイド

明度を変更

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
lighten()/darken()を使うと、色の明度をパーセンテージで指定して変更することができます。ここでは、lighten()/darken()の使い方について紹介します。
講師:
03:48

字幕

lighten 関数darken 関数を使うと色の明度をパーセント値で指定して変換することができます。このレッスンではlighten 関数、darken 関数の使い方について紹介します。画面では IDE でSass ファイルと CSS を並べて表示しています。Sass ファイルの内容を編集するとIDE の機能を使って自動的に保存、コンパイルが行われ右に表示されている CSS に反映される様になっています。ここでは既に書かれている色の値この色の値に対してlighten 関数darken 関数を使って色の明るさを調整してみましょう。先ず lighten 関数です。lighten 関数は指定した色の値に対して明度を 0 から 100 パーセントのパーセント値で指定する関数です。実際に書いてみましょう。lighten 関数を使うには色の値の前にlighten と記述し括弧で色の値を括ります。この色の値が 1 つめの引数です。そしてカンマで区切って2 つ目の引数に明度のパーセント値を入力します。ここでは元々の色よりも40% 明るい色を作りたいため40% と入力しましょう。出力された CSS を見るとこの元々の色の値から40% 明度を増加させた値が自動的にコンパイルされ出力されています。 この関数はある色の値が決まっている時にその色よりも少し明るい色例えばロールオーバーした時にその色の明度を少し上げるといったそういう処理の時のために便利です。続いて逆に明度を下げるdarken 関数にして紹介します。また、これはlighten 関数、darken 関数共に言えることですがこの 1 つ目の引数で指定する色の値は16 進数ではなくても例えば RGBA 関数等他の形式の色の形でも構いません。では darken 関数を指定してみましょう。darken 関数を入力し括弧で色の値を括ります。先ほど説明した様に1 つ目の引数は 16 進数ではなくRGB 関数を使った色の値を指定します。そして 2 つ目の引数に明度をどの程度下げるのかというパーセント値を入力します。ここでは 80%明度を下げてみます。出力された CSS を見ると元々指定したRGB 関数で指定された色の値の明度が 80% 下がった値がCSS にコンパイルされ出力されています。この様に lighten 関数darken 関数を使うとある色の値から明度が上がったり下がったりした色の値を抽出することができます。尚、lighten 関数では100% にパーセント値を設定すると真っ白darken 関数ではパーセント値を 100% に指定すると真っ黒になります。 このレッスンでは色の明度をパーセント値で指定して変更することができるlighten 関数darken 関数の使い方について学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

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

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

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

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