Sass入門ガイド

彩度を変更

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

ぜひご覧ください。

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

字幕

saturate 関数desaturate 関数を使うと色の彩度をパーセント値で指定して変更することができます。このレッスンではsaturate 関数desaturate 関数の使い方について紹介します。画面では IDE でSass ファイルとCSS ファイルを並べて表示しています。Sass ファイルの内容を編集するとIDE の機能を使って自動的に保存コンパイルが行われ画面右側の CSS ファイルに反映される様になっています。ここでは既に書かれているスタイルの中の色の値をsaturate 関数desaturate 関数を使って彩度のコントロールを行ってみましょう。では先ず 1 つ目の色の値に対して彩度を上げてみましょう。saturate 関数を使うには色の値の前にsaturate と入力し色の値を括弧で括ります。そして 2 つ目の引数に彩度をどの程度上げるかという値を0 から 100 のパーセント値で指定します。ここでは 50%彩度を上げてみたいと思いますので50% と入力します。出力された CSS を見てみると色の値が出力されていますね。元々の、この16a085という色の値から彩度を 50% 上げた色がこの CSS に出力されている値です。 この様に saturate 関数desaturate 関数を使うとPhotoshop 等の色を操作できるツールを使わなくてもSass のコード上だけで色を制御することができます。続いて彩度を下げるdesaturate 関数も使ってみましょう。saturate 関数もdesaturate 関数もいずれも 1 つ目の色の値には16 進数形式やRGB 形式様々な色の値が使えます。それでは実際に書いていきましょう。同じ様に desaturate と入力し色の値を括弧で括ります。そして、こちらも同じ様に2 つ目の引数をパーセント値で指定します。ここでは、どの程度彩度を下げるかという値を0 から 100 のパーセント値で指定します。30% 彩度を下げてみましょう。CSS を見ると元々の RGB 形式で指定した色の値から彩度を 30% 下げたその値が 16 進数になって出力されています。このレッスンでは色の彩度をパーセント値で指定して変更することができるsaturate 関数desaturate 関数の使い方について学びました。

Sass入門ガイド

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

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

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

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

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