コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
rgb()関数を使う
このレッスンではRGB関数を使った 色の指定のしかたについてご説明をします。 RGBカーソルというのは、 このように「rgb（）」 ということなんですが、 RGBの3色の数値を この「（）」の中に入れて カラーを決めます。 そうすると考え方としては 16進数と同じなんですが、 違いはですね、 この「rgb」の括弧の中ですね。 カンマ区切りで入れるんですけれども 16進数ではなくて 「0から255までの256階調の整数」です。 ですから、こちらの方が使いやすい という方もいるでしょう。 このHTMLドキュメントのスタイルシート、 CSS規則では カラーを使ってるんですけれども、 カラーは16進数 またはカラーネームを使っています。 これを全部RGBの関数に変えましょう。 まずひとつ試しましょうね。 blue というのがありますけれども、 blue は rgb でいうと 0。 r ですね、レッドです。 カンマのあと、数字くっつけても結構ですし 離してもかまいません。 まあ、スペース入れた方が私は 見やすいかなと思っているんですが。 グリーンも 0 ですよね。 そして最後の blue これがフルになりますので 255が最高です。 255 としましょう。 これを保存します。 同じブルーにしましたので 先ほど変わらなければ結構です。 h1とh3のカラーが 先ほどと同じブルーのままですね。 では要領が分かりましたので あと2つ、この h1 の 背景色 background-color と、 それから border のこの色ですね。 では背景色 background-color の この値は 0FF とありますけれども これは00FFFFと同じことですね。 シアンになります。 RGB関数に直すと rgb のレッドは 0。 シアンですから グリーンが 255 フルですね。 それからブルーもフルになると。 FFに相当します。 今度はここですね。 CC とあるんですが CC は204です。 ということで rgb の 0 の グリーンも 0 で 204 ということで保存しましょう。 このh1要素ですね。 背景色はシアンです。 それからボーダーの縁なんですけれども このカラーはちょっと暗めの ブルーになっています。 このレッスンではRGB関数を使った…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。