100DaysOfCode / Day :5
#100DaysOfCode ５日目。
ﾑｽﾒ昼まで慣らし保育〜〜〜の間にｶｶは病院ハシゴだよ。
15時から一緒にお昼寝して、薬取りに行って、17時にやっとこさスタート…
「freecodecamp」の「CSS 色指定の学習: カラーマーカーのセットを作成する」を進める。
カラーモデルには主に 2 つの種類があります。電子機器内で使用される加法 RGB (赤、緑、青) モデルと、印刷で使用される減法 CMYK (シアン、マゼンタ、黄、黒) モデルです。
このプロジェクトでは、RGB モデルを扱います。 つまり、色は黒から始まり、異なる量の赤、緑、青が加えられることによって変化します。 これを簡単に確認する方法が CSS の rgb 関数です。
関数とは、入力を受け取って特定の処理を実行するコードのまとまりです。 CSS の rgb 関数は、赤、緑、青の値 (引数) を受け取り、1 つの色を作成します:
rgb(red, green, blue);
赤、緑、青の各値は 0 から 255 の数値です。 0 はその色が 0% であり、黒であることを意味します。 255 はその色が 100% であることを意味します。
今まで何も考えずRGB（RGBA）を使ってたけど関数なんだな、アレ。
確かに形的に関数だよね。
言葉で説明する（される）事って無かったから、ちょっと意外でした。
加法 RGB カラーモデルにおける原色とは、混合された時に純粋な白を作る色のことです。 純粋な白を作るには、それぞれの色が最大強度である必要があります。
色を混ぜ合わせる前に、緑のマーカーを純粋な緑に戻しましょう。 .two CSS ルール内の rgb 関数について、緑を最大値の 255 に戻してください。
CSSでは色を「red」「green」「blue」で指定できるけど、
同じ色をRGBで指定する場合は以下の数値になる。
red -> rgb(255, 0, 0)
green -> rgb(0, 255, 0 0, 127, 0)（緑の255は明るすぎる）
blue -> rgb(0, 0, 255)
二次色とは原色を混合して得られる色のことです。
イエロー -> rgb(255, 255, 0)
シアン -> rgb(0, 255, 255)
マゼンダ -> rgb(255, 0, 255)
三次色は、原色を隣接する二次色の 1 つと混合することで得られます。
オレンジ -> rgb(255, 127, 0)
スプリンググリーン (黄緑) -> rgb(0, 255, 127)
バイオレット -> rgb(127, 0, 255)
シャルトルーズグリーン (緑 + 黄、黄色がかった緑色) -> rgb(127, 255, 0)
アジュール (青 + シアン、明るい青) -> rgb(0, 127, 255)
ローズ (赤 + マゼンタ、薔薇色) -> rgb(255, 0, 127)
カラーホイールとは、同じような色 (色相) が互いに近くに、異なる色は離れて配置された円のことです。 例えば、純粋な赤はローズとオレンジの色相の間に位置します。
カラーホイール上で互いに反対の位置にある 2 つの色は補色と呼ばれています。 2 つの補色を混ぜ合わせると、灰色ができます。 しかしそれらを並べて配置すると、視覚的なコントラストが強くなり明るく見えます。
赤とシアンの色が隣り合わせにあると、とても明るく見えることに注目してください。 このコントラストはウェブサイト上で過度に使用すると目障りになることがあり、また、補色の背景色の上ではテキストが読みづらくなることがあります。
1 つの色を主要な色として使い、その補色をページの特定のコンテンツに注意を向けさせるためのアクセントとして使うのが良い方法とされています。
自然に中央の赤色が目を引くことに気がつきましたか？ サイトをデザインする際に、この効果を利用して重要な見出し、ボタン、あるいはリンクに注意を引き付けることができます。
補色の他にも重要な色の組み合わせがありますが、それらはもう少し後で学びます。
「freecodecamp」ってそんな事も学べるんかい！ってびっくり。
「Progate」のイメージだったから（失礼）
CSS で要素に色を適用する方法として、16 進数 (hexadecimal、ヘキサ) の値がよく使われます。 16 進数と聞くとわかりにくいですが、実のところ RGB 値の別の形式に過ぎません。
16 進数の色の値は # 記号から始まり、0-9 および A-F から 6 つの文字を取ります。 最初の二文字のペアが赤を、2 つ目のペアは緑を、3 つ目のペアは青を表します。 たとえば #4B5320 のように記述します。
16進数の色指定もRGBと理論的には一緒。
0 から 9 までの十進法 (10 進数) の値については馴染みがあると思います。 16 進法 (16 進数) の値は、0 から 9 の後に、A から F が続きます。
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
16 進数カラーの場合、00 がその色の 0% で、FF が 100% です。 つまり #00FF00 は赤が 0%、緑が 100%、青が 0% と解釈でき、rgb(0, 255, 0) と同じです。
HSL カラーモデル、または色相 (hue)、彩度 (saturation)、および明度 (lightness) とは、色を表現するもう一つの方法です。
CSS の hsl 関数は 3 つの値を受け付けます: 0 から 360 までの数値の色相、0 から 100 パーセントの彩度、0 から 100 パーセントの明度です。
カラーホイールを想像すると、赤の色相は 0 度、緑は 120 度、青は 240 度に位置します。
彩度とは色の強度で、0% のグレーから 100% の純粋な色までを表します。 You must add the percent sign % to the saturation and lightness values.
明度は色の明るさで、0% の完全な黒から 100% の完全な白までを表し、50% で中間色となります。
青 -> hsl(240, 100%, 50%)
hsl…使った事無かったかもしれない…
グラデーションとは、ある色を別の色へ変化させることです。 CSS の linear-gradient 関数を使用して、線に沿った変化の方向と使用する色を制御できます。
ひとつ忘れてはならないことがあります。linear-gradient 関数は実際は image 要素を作り出すため、画像を値として受け付ける background プロパティと通常はペアで使われます。
linear-gradient 関数は非常に柔軟性があります。このチュートリアルで使用する基本的な構文はこちらです:
linear-gradient(gradientDirection, color1, color2, ...);
gradientDirection は変化に使用する線の方向です。 color1 と color2 は色の引数で、変化の中で使用される色です。 色にはカラーキーワード、16 進数、rgb、または hsl を含め、どの形式でも使用できます。
色経由点 (color-stops) を利用すると、グラデーション軸に沿って色がどう配置されるかを微調整できます。 色経由点は、linear-gradient 関数内で色指定に続けて px などの長さの単位、またはパーセンテージで指定します。
定期のポストし忘れ。1/19（金）の分。
この記事が気に入ったらサポートをしてみませんか？