コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
hsl()関数を使う
このレッスンでは HSL関数を使って色を定めてみます。 HSLという関数は 色を「色相」「彩度」「輝度」 あるいは「明度」と思うんですけれども、 この3つの数値で定めます。 関数はこういった形になるわけで、 順番に「色相」「彩度」「輝度」 を指定します。 「色相」というのは英語で「hue」 この頭文字を取って「h」ですね。 「カラーホイール周りの角度」を 「0から360」度までの間で決めます。 色相については「ウィキペディア」に ページがあるんですけれども、 その中の「色相環」 これがその「色相環」で 角度0から360までで この色合いを決めるということが 分かりますね。 パラメータ、引数とも言いますけれども、 2つ目は彩度です。 英語では「saturation」で、 これが2つ目の「s」になるわけですね。 0ですと「グレースケール」になります。 そして完全な「フルカラー」が 100ということで パーセンテージで指定します。 単位「パーセント」が必要です。 それから「輝度」または「明度」 英語では「lightness」 これは3つ目の「l」ですね。 「黒から白までの明るさ」になります。 0ですと黒になります。 100ですと白になります。 ということは普通の状態というのは 「50％」ですのでお気をつけください。 こちらは「100」が普通なので、 ついこちらも100に したくなるんですけれども、 100にすると真っ白になってしまいます。 このHTMLドキュメントのCSS宣言では カラーを rgb で決めてあります。 もちろん rgb を使っていいんですけれども これをhslに変えてみましょう。 まずはこの文字の色ですね。 h1 と h3 の color が rgb で 0 0 255 ということですから ブルーということなんですが、 これをhslにしましょう。 hsl で色相は240度になります。 240 と。 そして鮮やかさは 100パーセントがフルカラーですから 100％ とします。 そして先ほど注意したとおり、 これは100にしてはいけませんが 100にしてみましょう。 100％ パーセンテージが必要です。 こうすると真っ白になってしまいます。 h1は背景色があるので 白抜きになって分かりますけれども h3は何だか分からないですね。 ということで、 この輝度は…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。