Sass入門ガイド

16進数+不透明度をRGBA形式に変換

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
rgba()を使うと、16進数の色の値と不透明度を指定して、RGBA形式に変換することができます。ここでは、rgba()の使い方について紹介します。
講師:
03:28

字幕

RGBA 関数を使うと16 進数の色の値と不透明度を指定してRGBA 形式に変換することができます。このレッスンでは RGBA 関数の使い方について紹介します。画面では IDE でSass ファイルと CSS ファイルを並べて表示しています。画面左側の Sass ファイルを編集するとIDE の機能を使って自動的に保存、コンパイルが行われ画面右側のCSS ファイルに反映される様に設定しています。RGBA 関数はCSS 6 から使える様になった色の値を指定する形式です。例えば、この背景色のプロパティに対して指定している様にrbga と書いた後に括弧で4 つの数字をカンマ区切りで指定してRGBA 形式の色の値を指定します。例えば、ここでは1 つ目の引数に r、赤の値2 つ目に g、グリーン3 つ目に b、ブルーの色の値をそれぞれ256 段階で指定します。256 段階とは0 から 255 の数値です。そして最後に不透明度を 0 から 1 の値で指定します。こうすることで不透明度を持ったRGB の値を指定できるのです。Sass には、この様なCSS3 における RGBA 関数とは別の使い方ができる全く同じ名前の関数が存在します。 Sass ファイルの中ではこの Sass 独自の RGBA 関数を使うこともできます。試してみましょう。先ほどの宣言の下に同じ様に色の値を指定している文字色のプロパティがあります。この色の値をSass 独自の RGBA 関数を使って不透明度を追加してみましょう。Sass 独自の RGBA 関数では16 進数で RGB の色を指定することができます。これは既に書いてある16 進数の値を使って不透明度だけを追加してみましょう。先ず、同じ様にrgba と入力し括弧で数値を括ります。その後 16 進数の値は、そのままにカンマで区切って 2 つ目の引数に不透明度を加えます。ここでは 0.4 を入力してみましょう。出力された CSS を確認してみるとCSS 6 の RGBA 関数に書き換わっていることが分かります。この 236240241 という値はSass 側で指定した16 進数がRGBA 関数に変換されて出力されたものです。また最後の不透明度の数についてはSassで指定した通りの数値がそのまま出力されています。この様に Sass 独自のRGBA 関数を使うことで16 進数の色の値と不透明度を指定してCSS 6 本来のRGBA 形式に変換することができます。 このレッスンでは RGBA 関数の使い方について学びました。

Sass入門ガイド

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

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

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

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

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