コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
アルファチャネルつきカラー
このレッスンでは、 アルファチャネルつきのカラーについて ご説明をします。 関数「rgb」それから「hsl」には、 「RGBA」と、それから「HSLA」 のモードがあります。 何が違うかと言うと、 最後に「A」がついてるんですね。 これが「アルファ」です。 関数そのものは「rgb」「hsl」 と変わらないんですけれども、 引数、パラメータの4番目に 「アルファ」の指定ができます。 どちらも同じように 「0から1までの比率」 ということになります。 「0」が完全な透明です。 そして「1」が完全な不透明ということで、 その間の数字を指定して アルファチャネルの設定をすると いうことですね。 このHTMLドキュメントの CSS規則なのですけれども、 宣言に hsl や rgb が使われているんですが、 アルファは使っていません。 そこでこの h1、h3 のこのカラー、 0 0 255 ですからブルーですね。 これにアルファを設定しましょう。 分かりやすく 0.5 くらいにしましょう。 そして、この背景色ですけれども、 background-color ですね。 こちらも分かりやすいようにということで、 色相を変えます。 色相を 300 とすると、 マゼンタということになります。 これで確認してみましょう。 h3、色が薄くなりましたね。 ただ「色が薄くなった」ということですと、 「白が混じった」というふうに 考えることもできるんですけれども、 こちらのh1のほうは、 背景のマゼンタが透けてますので 色が違ってますね。 これでアルファチャネルの 設定ができたということが分かります。 この背景色のほうも アルファかけてみましょう。 では、この background-color ですね。 こちらも4番目の引数 アルファチャネルに 0.5 としてみます。 そして、その結果が 分かるようにということで、 body のほうにも背景色をつけましょう。 background-color で こちらは、では、 差が分かるように yellow と いうふうにします。 保存して確かめましょう。 マゼンタにアルファがかかって 背景の黄色がちょっと透けてますので、 オレンジっぽい色になりましたね。 このレッスンでは、 カラーにアルファチャネルを 設定してみました。 アルファチャネルの設定は、…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。