CSSで色の値を使用する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
色は、ウェブサイトを作成する際のデザインと開発の便利な部分です。 それは気分を設定し、美学を伝えるのに役立ちます。 色は、読者がコンテンツをすばやくスキャンして識別するのにも役立ちます。
CSSでは、色を生成する方法は4つあり、それぞれに独自の強みがあります。 このチュートリアルでは、カラーキーワード、16進カラー値、rgb()カラーフォーマット、最後にhsl()カラーフォーマットの使用方法を説明します。 同じHTMLセットで4つのアプローチすべてを使用して、各カラーフォーマットが同じコンテンツでどのように機能するかを体験します。 チュートリアル全体を通して、color、border、およびbackground-colorプロパティを使用して、これらのカラー形式をHTMLに適用します。
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- ローカルマシンに
index.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。
サンプルHTMLとCSSの設定
このセクションでは、チュートリアル全体で作成するすべての視覚スタイルのHTMLベースを設定します。 また、styles.cssファイルを作成し、コンテンツのレイアウトを設定するスタイルを追加します。
テキストエディタでindex.htmlを開くことから始めます。 次に、次のHTMLをファイルに追加します。
index.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
次に、<head>タグに移動し、<meta>タグを追加して、HTMLファイルの文字セットを定義し、次にページのタイトル[ X146X]タグは、モバイルデバイスがページをレンダリングする方法を定義し、最後に、後で作成するCSSファイルをロードする<link>要素を定義します。
これらの追加は、次のコードブロックで強調表示されています。
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Colors With CSS</title>
<meta name="viewport" content="width=device-width" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
<head>コンテンツを追加したら、次に<body>要素に移動します。ここで、カラーに関するウィキペディアの記事からコンテンツが追加されます。 このコードブロックの強調表示されたセクションを、テキストエディタのindex.htmlファイルに追加します。
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Colors With CSS</title>
<meta name="viewport" content="width=device-width" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<article>
<header>
<h1>About Color</h1>
</header>
<p>Color is the characteristic of visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of photoreceptor cells by electromagnetic radiation. Color categories and physical specifications of color are associated with objects through the wavelengths of the light that is reflected from them and their intensities. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc.</p>
<hr />
<p>By defining a color space, colors can be identified numerically by coordinates, which in 1931 were also named in global agreement with internationally agreed color names like mentioned above (red, orange, etc.) by the International Commission on Illumination. The RGB color space for instance is a color space corresponding to human trichromacy and to the three cone cell types that respond to three bands of light: long wavelengths, peaking near 564–580 nm (red); medium-wavelength, peaking near 534–545 nm (green); and short-wavelength light, near 420–440 nm (blue). There may also be more than three color dimensions in other color spaces, such as in the CMYK color model, wherein one of the dimensions relates to a color's colorfulness.</p>
<footer>
Adapted from Wikipedia’s article on <a href="https://en.wikipedia.org/wiki/Color">Color</a>
</footer>
</article>
</body>
</html>
内容は<article>タグ内にあり、ランドマークと呼ばれる指定された領域を定義します。これは、注目しているデザインの一部です。 この要素は、独自の<header>および<footer>タグを持つことができます。 <header>には、コンテンツタイトルが付いた<h1>タグが含まれ、<footer>要素には、ソースを引用するためのコンテンツが含まれます。 プライマリコンテンツの2つの<p>タグの間には、<hr />タグがあります。これは、水平方向のルールラインを作成する自動終了タグです。 コンテンツの一部として、水平方向のルールを使用して、コンテンツを分割したり、コンテンツのシフトを示したりすることができます。
これで、index.htmlに必要な作業は完了です。 変更内容をファイルに保存し、Webブラウザでindex.htmlを開きます。 Webページは次の画像のように表示されます。
次に、このチュートリアルに必要な基本スタイルの作業を開始します。 styles.cssというファイルを作成し、テキストエディタで開きます。
まず、bodyタイプセレクターを作成し、font-famiy: sans-serifを追加して、ブラウザーのデフォルトのサンセリフフォントを使用します。 次に、line-height: 1.5を追加して、テキスト間のデフォルトの行間隔をfont-sizeの半分にします。
styles.css
body {
font-family: sans-serif;
line-height: 1.5;
}
次に、margin、padding、width、およびmax-widthを使用してタイプセレクターを作成し、<article>要素のスタイルを追加します。 、box-sizing: border-boxとともに、<article>のボックスモデルを再定義します。 これにより、paddingの値がコンテナの全幅に追加されないようになります。
各プロパティの値について、次のコードブロックの強調表示されたセクションを追加します。
styles.css
...
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
}
まず、値が2rem autoのmarginは、articleコンテナーをページの中央に配置します。 2remのpaddingは、チュートリアルの後半でカラープロパティを追加するときに、コンテナの周囲に十分なスペースを提供します。 widthを使用すると、40remのmax-width値（640pxと同等）に達するまで、画面サイズの変更に応じてコンテナーの幅を流動的にすることができます。 。
次に、h1タイプセレクターを記述し、要素に2remのfont-sizeを指定します。 次に、0 0 1remのmarginを追加して、デフォルトのmargin-topを削除し、margin-bottomに新しい値を指定します。 最後に、セレクターブロックにtext-align: center;を追加して、テキストを中央に配置します。
styles.css
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
}
次に、いくつかの基本スタイルを<hr>要素に適用します。 ブラウザのデフォルトの<hr>要素は、高さ、全幅、および境界線のないボックスを作成します。 このコンテナは自己閉鎖型であり、コンテンツは含まれていませんが、多くのスタイルを受け入れることができます。
0.25remのheight値を指定することから始めます。 次に、2rem autoのmarginプロパティを追加して、<hr>の上下にスペースを作成し、要素を中央に配置します。 width: 90%;とmax-width: 18rem;を追加して、<hr>要素が常に記事コンテナーより小さくなり、18remより大きくならないようにします。 最後に、border-radiusプロパティを使用して、<hr>要素の端を0.5remの値で丸めます。
styles.css
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
}
最後に、footerセレクターブロックを作成し、2remの値を持つmargin-topプロパティを追加し、その後に0.875remのfont-sizeを追加します。
styles.css
...
footer {
margin-top: 2rem;
font-size: 0.875rem;
}
変更をstyles.cssに保存します。 次に、Webブラウザのindex.htmlに戻り、ページをリロードします。 これで、コンテンツの基本スタイルに色を適用する準備が整いました。 次の画像は、ブラウザでどのようにレンダリングされるかを示しています。
このセクションでは、index.htmlファイルでHTMLを設定し、styles.cssファイルで基本スタイルを作成します。 次のセクションでは、コンテンツに色を適用するために使用する色のキーワードを紹介します。
キーワード値で色を適用する
Web上の色から始めて、事前定義された色のキーワードを使用すると便利です。 このセクションでは、いくつかのcolorキーワードを使用して、HTMLのコンテンツに色を適用します。
時間の経過とともにリストに追加された100をはるかに超える色のキーワード値があります。 World Wide Web Consortium のWikiには、カラーキーワード値の完全なリストがあります。 色のキーワード値は、colorプロパティをmagentaに設定して、要素がミュートされたカラーパレットに対して目立つようにするなど、簡単なデザインをまとめたり、CSSの問題を特定してデバッグしたりする場合に役立ちます。 キーワードは、グレーを含むそれぞれの色合いと色合いのバリエーションですべての色相をカバーします。
articleタイプセレクターに移動し、background-color、border、およびcolorプロパティを追加することから始めます。 background-colorには、かすかな薄茶色のseashellキーワードを使用します。 borderの厚さを0.25rem、solidスタイルにし、色にはsandybrownキーワードを使用します。 最後に、colorプロパティには、maroonキーワードを使用します。
styles.css
...
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
background-color: seashell;
border: 0.25rem solid sandybrown;
color: maroon;
}
...
変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlページを更新します。 これで、ページに視覚的に定義されたarticle領域があり、背景色は明るい茶色で、境界線は少し暗い茶色になります。 テキストの内容は濃い赤になり、他の茶色の色との関連でより濃い茶色に見える場合があります。 次の画像は、ページがブラウザにどのように表示されるかを示しています。
次に、テキストエディタでstyles.cssに戻ります。 h1セレクターに移動し、colorプロパティを追加します。 茶色の補色を使用して、colorプロパティ値にtealキーワードを追加します。
styles.css
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
color: teal;
}
...
次に、補色の概念を続けて、hr要素に移動し、0.25rem solid tealのborderプロパティを追加します。 その後、キーワードdarkturquoiseを値としてbackground-colorプロパティを追加します。
styles.css
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
border: 0.25rem solid teal;
background-color: darkturquoise;
}
...
これらの変更をstyles.cssファイルに保存し、ブラウザでindex.htmlを更新します。 次の画像に示すように、2つの段落の間の<hr>要素には、太いtealの境界線があり、内側に明るい青緑色があります。
次に、テキストエディタに戻り、styles.cssファイルのfooterセレクタに移動します。 ここで、colorプロパティを追加し、値としてchocolateを使用します。
styles.css
...
footer {
margin-top: 2rem;
font-size: 0.875rem;
color: chocolate;
}
変更内容をテキストエディタでstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 ブラウザはchocolateをmaroonよりも明るい茶色の色相としてレンダリングしますが、saddlebrownの境界ではそれほど明るくはありません。
コードエディタに戻る前に、<footer>要素のリンクの色に注意してください。 リンクにアクセスしたことがない限り、リンクにはデフォルトのブラウザの色である青が使用されています。アクセスした場合は、色が紫になります。 colorには、inheritという特別な値があります。これは、特定の色を定義する代わりに、親コンテナーの色（この場合は<footer>）を使用します。
colorプロパティでinherit値を使用するには、テキストエディタでstyles.cssに戻り、footerセレクタの終了タグの後にfooter aの新しいコンビネーター。 次に、inheritの値を持つcolorプロパティを追加します。これにより、<a>はfooterに設定されたcolor値を継承します。次のコードブロックの強調表示されたセクションに示されているように：
styles.css
...
footer a {
color: inherit;
}
変更内容をstyles.cssファイルに保存し、Webブラウザでindex.htmlを更新します。 <a>は、他のfooterテキストと同じ色になり、テキストをリンクとして区別する下線が保持されます。 次の画像は、これがブラウザにどのように表示されるかを示しています。
注： inherit値は、border-colorやcolorなど、前景のcolor値を受け入れることができる色でのみ機能します。 background-colorやbox-shadowなどの他のプロパティは、currentColorと呼ばれる特別な値で定義されたcolor値にアクセスできます。 inheritと同じように機能しますが、inheritが有効な値ではない場合に使用します。
このセクションではcolorキーワードを使用して、コンテンツにさまざまなコントラストのいくつかの色を設定しました。 また、inherit値を使用して、値を明示的に定義せずにカラー値を再利用しました。 次のセクションでは、16進カラーコードシステムを使用してコンテンツの色を調整します。
16進数で色を適用する
16進数、つまり16進数の色の値は、Web上の要素に色を適用する最も一般的な方法です。 このセクションでは、16進色を使用して、コンテンツの視覚スタイルを再定義および調整します。
16進法とは何か、そしてそれがどのように機能するかを理解することが重要です。 16進数は、数値として 0-9 を使用し、10-15の範囲の値として文字afを使用する基数16の評価システムです。 ]。 16進値は、00として表される0から255 までの強度の各原色（赤、緑、青）を制御するために使用されます。 ffとして表されます。 16進値は、#の後に続き、カラータイプが16進カラーコードであることを示します。次に、各カラーチャネルに2桁の数字が続き、赤、緑、青の順になります。
16進数のカラーコードは、2つの方法で記述できます。 1つ目は長い形式で、より一般的で詳細で、各カラーチャネルに2桁ずつ、6桁の数字が含まれています。 この例は、#ffff00で作成された黄色です。 16進カラーコードを記述する2番目の方法は短い形式であり、ブラウザが各単一値の2倍として解釈する3桁のみで記述することができます。 短い形式では、#ff0で黄色を作成できます。 短い形式の16進色の値を使用すると、より高速ですが、排他的に使用する場合はパレットが制限されます。
16進カラーコードの使用を開始するには、テキストエディタでstyles.cssを開き、article要素セレクタに移動します。 background-colorプロパティ値には、非常に薄い灰色の#f0f0f0を使用します。 次に、borderプロパティの色の値として、中間の灰色である#cccの短い形式の16進コードを使用します。 最後に、メインテキストのcolorプロパティには、濃い灰色の短い形式の16進コード#444を使用します。
styles.css
...
article {
...
background-color: #f0f0f0;
border: 0.25rem solid #ccc;
color: #444;
}
...
注：テキストコンテンツを操作するときは、background-colorとテキストcolorの値の間で良好な色のコントラストを維持することが重要です。 これにより、幅広い読者やWebサイトユーザーがテキストを読みやすくなります。 アクセス可能なカラーコントラスト比の重要性について詳しくは、このWebビデオシリーズのアクセス可能なカラーコントラストを使用したデザインをご覧ください。 また、 WebAIM が提供するこのコントラスト計算機は、包括的なオーディエンスがテキストを読みやすくするのに十分なコントラストを色が提供するかどうかをテストするための優れたツールです。
次に、h1の色の値を濃い赤に設定します。 styles.cssファイルのh1セレクターに移動し、colorプロパティを#900の値に更新します。これにより、赤のチャネルが約中点で、緑と青のチャンネルをオフのままにします。
styles.css
...
h1 {
...
color: #900;
}
...
赤の値を続けて、hrの色のプロパティをh1要素に一致するように更新します。 borderプロパティの色を#bd0000に設定します。これは、色が#b00と#a00の間の値であるため、長い形式の16進コードが必要です。 次に、#f00を使用して、background-colorを完全な赤の値に設定します。 これは、redキーワードに相当する16進値です。
styles.css
...
hr {
...
border: .25rem solid #bd0000;
background-color: #f00;
}
...
最後に、footerテキストをメインテキストの軽量バージョンとして続行するには、footerプロパティに移動し、colorプロパティを[の中間の灰色に変更します。 X172X] ：
styles.css
...
footer {
...
color: #888;
}
...
変更をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新し、変更を確認します。 次の画像に示すように、articleコンテナは、赤の見出しとルールラインのバリエーションを持ついくつかの灰色で構成されています。
このセクションでは、いくつかの16進カラーコード値を使用して、styles.cssスタイルドキュメント全体の色を定義しました。 次のセクションでは、これらの16進値を、rgb()カラーコードを使用してより読みやすい数値に変換します。
rgb()で色を塗る
16進カラー値が限られた数の英数字値で定義されている場合、rgb()は、各原色チャネルに0〜255の範囲の数値のみを使用します。 これらに数値のみを使用すると、16進数よりもrgb()形式で作成された色をより迅速に理解できます。
16進形式およびrgb()形式の構造が示すように、色は括弧内に赤チャネル値、緑チャネル値、青チャネル値の順に表されます。 rgb()でフォーマットされた黒色はrgb(0, 0, 0)であり、白色はrgb(255, 255, 255)でフォーマットされています。 これは、完全な赤色がrgb(255, 0, 0)であり、完全な緑色がrgb(0, 255, 0)などであることも意味します。
16進値の代わりにrgb()値を使用するようにコードのリファクタリングを開始するには、このHEXからRGBへのコンバーターをDuckDuckGo検索エンジンに組み込んだなどのHEXからRGBへのコンバーターを使用すると便利です。 X215X]。 数学的アプローチを使用すると、各チャネルの16進値を使用して数値をデコードできます。 赤チャネルの16進コードがfeの場合、これは f が0〜15の16カウントの15回の反復を示し、 f [X160X ] 16×15、または240に等しい。 16進数のfeのeは、基数16のシーケンスの14と同じです。 これら2つの値を合計すると、rgb()値の赤チャンネルは254になります。
このチャートは、各16進値の値を識別して、rgb()に必要な数値に変換するのに役立ちます。 最初の行は、16進シーケンスの最初の文字の値であり、16進値に16を掛けたものです。 2行目は、16進シーケンスの2番目の文字の値であり、16進値に1を掛けた値です。
| 計算| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f ------ | ------ | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- |- ----|-----最初の16進数| x * 16 | 0 | 16 | 32 | 48 | 64 | 80 | 96 | 112 | 128 | 144 | 160 | 176 | 192 | 208 | 224 | 240秒の16進数| x * 1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
styles.cssファイルを開き、テキストエディタのarticleセレクタブロックに移動します。 background-colorプロパティを#f0f0f0の値で識別します。 変換ツールまたは前のグラフの数式を使用すると、シーケンスの f が2番目の位置にあり、に等しいため、これはrgb(240, 240, 240)になります。 240。 これら2つの値を合計すると、240になります。
styles.css
...
article {
...
background-color: rgb(240,240,240);
border: 0.25rem solid #ccc;
color: #444;
}
...
次に、borderとcolorの両方の値は短い形式で記述されているため、rgb()に変換するときに、これらを長い形式に拡張すると便利です。 #cccの短い形式は、長い形式では#ccccccになります。 これにより、（12 * 16）+ 12 の式が作成され、204になります。 その値を各チャンネルに適用すると、#cccはrgb(204, 204, 204)になります。 この新しい値を適用した後、次の強調表示されたセクションに示すように、同じアプローチを#444のcolor値に適用できます。これはrgb(68, 68, 68)になります。
styles.css
...
article {
...
background-color: rgb(240,240,240);
border: 0.25rem solid rgb(204, 204, 204);
color: rgb(68, 68, 68);
}
次に、h1およびhrカラープロパティに移動します。 これらの3つのプロパティすべてで、色は赤のチャネルのみを使用します。つまり、緑と青のチャネルではrgb()は0になります。
styles.css
...
h1 {
...
color: rgb(153, 0, 0);
}
hr {
...
border: 2px solid rgb(189, 0, 0);
background-color: rgb(255, 0, 0);
}
...
h1 colorプロパティの場合、#900の短縮形は#990000に展開され、チャートを使用すると99シーケンスは次のようになります。 （16 * 9）+ 9 として計算されます。これは、rgb(153, 0, 0)の結果の153に等しくなります。 hrプロパティの同じ式に従うと、borderの16進値のbdは189になります。 短縮形background-colorプロパティ値のfは、 ff に展開され、結果は255になります。これは色の最大値です。 rgb()と16進カラーフォーマットの両方で。
styles.cssファイルのテキストエディタで引き続き作業し、footerセレクタを識別して、colorプロパティで使用されているグレーを更新します。 値は#888の短縮形であるため、#888888に展開でき、グラフと数式を使用すると、最終的な値はrgb(136, 136, 136)になります。
styles.css
...
footer {
...
color: rgb(136, 136, 136);
}
...
変更内容をstyles.cssファイルに保存してから、index.htmlファイルをWebブラウザにリロードします。 これらのrgb()値は同等であるため、16進値を使用した前の手順との違いはありません。
16進形式とrgb()形式は同じ数値に相当しますが、rgb()形式は人間が読める形式であるため、前者の形式よりも優れています。 これにより、開発者は情報に基づいた変更をより迅速に行い、チャネルの強度を調整して色を生成できます。たとえば、赤を追加して色を暖かく感じさせることができます。
これを示すために、articleおよびfooterセレクターの各グレーカラーの赤チャンネルの値に5を追加します。 articleプロパティで、background-color赤チャンネルを245に、border赤チャンネルを209に、colorプロパティの赤チャネルを73に接続します。 次に、footerセレクターのcolorプロパティの赤チャンネルを141に変更します。 これらの変更は、次のコードブロックに示されています。
styles.css
...
article {
...
background-color: rgb(245,240,240);
border: 0.25rem solid rgb(209, 204, 204);
color: rgb(73, 68, 68);
}
...
footer {
...
color: rgb(141, 136, 136);
}
...
変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 灰色は緑や青よりも赤が多いため、暖色になります。 次の画像は、より涼しい灰色とより暖かい灰色の比較を示しています。
このセクションでは、rgb()カラー形式と、16進カラー値を数値に変換する方法について学習しました。これにより、操作が簡単になります。 また、rgb()カラーフォーマットの赤チャンネルにもう少し追加して、より暖かいさまざまな灰色を作成しました。 次のセクションでは、hsl()カラー形式を使用します。これは、色相、彩度、明度を表します。
hsl()で色を塗る
16進数とrgb()のカラー形式が原色の合計値と密接に関連している場合、hsl()はカラーホイールの彩度と明度レベルの色を使用し、最終的な色を生成します。
rgb()形式と同様に、hsl()形式は、コンマで区切られた順序で3つの値で構成されます。 最初の値はhueで、これはカラーホイールの次数マーカーです。 2番目の値はsaturationです。これはパーセンテージ値で、 100％はフルカラーを意味し、 0％はカラーなしを意味し、白、黒、またはシーケンスの最後の数値の値に応じて灰色になります。 明度は、 100％の白から 0％の黒までの範囲のパーセンテージ値です。
カラーサークルは0度（赤）から始まり、虹の周りをオレンジ、イエロー、グリーン、ブルー、パープルに回り、360度で完了すると赤に戻ります。 この次数の値はシーケンスの最初の値であり、数値のみで表すことも、角度単位のいずれかを使用して表すこともできます。 彩度と明度は両方ともパーセンテージ値であり、値が 0 であっても、パーセント記号が存在する必要があります。
hsl()形式を使用する最大の利点は、類似した値がある場合に、色がよりまとまりがあり、補完的である可能性があることです。 たとえば、単色の配色は、色相値と彩度のパーセンテージを決定し、他のすべての色を明度のバリエーションとして設定することで、すばやくまとめることができます。 同様に、同じような彩度レベルの色は、色相または明度レベルの違いにもかかわらず、よりよく一致しているように見えます。
16進数またはrgb()からhsl()形式の色への変換は、それほど簡単ではありません。 色変換ツールは、値を16進数からhsl()に変更するのに役立ちます。
hsl()カラー形式の操作を開始するには、テキストエディタでstyles.cssを開き、articleおよびfooterセレクターに移動します。 このチュートリアルの前半のグレー値に戻ると、色相と明度の値をそれぞれ0と0%に設定できます。 これらはグレースケールであるため、調整する必要があるのは明度の値だけです。
styles.css
...
article {
...
background-color: hsl(0, 0%, 94%);
border: 0.25rem solid hsl(0, 0%, 80%);
color: hsl(0, 0%, 27%);
}
...
footer {
...
color: hsl(0, 0%, 45%);
}
...
background-colorは非常に薄い灰色であるため、94%では100％に近くなります。 articleのborder値は少し暗いですが、それでも80%の明度値で明るい灰色です。 次に、articleのcolor値は、はるかに暗い27%になります。 最後に、footerテキストのcolorは、45%の明度値を使用して、引用参照テキストに明るいが読みやすい灰色を与えます。 明度の値のみを使用して、単色のグレーパレットをすばやくまとめます。
次に、h1およびhrセレクターブロックに移動します。 articleカラープロパティの場合と同様の設定が行われます。次の3つのプロパティでは、色相と彩度の値は変更されません。 色相値は0に設定され、彩度は100%に設定され、完全な彩度の赤になります。 明度は、これらの赤い値をもう一度区別します。
styles.css
...
h1 {
...
color: hsl(0, 100%, 25%);
}
hr {
...
border: 2px solid hsl(0, 100%, 35%);
background-color: hsl(0, 100%, 50%);
}
...
h1 colorは、25%の明度値を持つことにより、暗赤色になります。 hrは35%の明度値を持つ濃い赤borderになりますが、background-colorは50%。 値が50％から上がると、赤は白になるまでピンクになり、50％未満になると、赤は黒になるまでより栗色になります。
変更をstyles.cssに保存し、ブラウザに戻り、index.htmlを更新して、hsl()カラー形式で記述した場合のスタイルの表示を確認します。 次の画像は、これがどのように表示されるかを示しています。
ここで、テキストエディタに戻り、styles.cssファイルのarticleおよびfooterセレクターに移動します。 ここで、色相と彩度の値のみを調整しますが、明度の値はそのままにします。 2つのセレクターの4つのカラープロパティすべてで、色相値を200に設定します。 次に、articleセレクターのカラープロパティで、彩度の値を50%に設定します。 最後に、footercolorプロパティの飽和レベルを100%に設定します。 これらの色の値がどのように表示されるかについては、次のコードブロックの強調表示された部分を参照してください。
styles.css
...
article {
...
background-color: hsl(200, 50%, 94%);
border: 0.25rem solid hsl(200, 50%, 80%);
color: hsl(200, 50%, 27%);
}
...
footer {
...
color: hsl(200, 100%, 45%);
}
...
変更内容をstyles.cssファイルに保存し、Webブラウザにindex.htmlをリロードします。 次の画像のように、灰色は明度と彩度が変化するシアン色になりました。 articleの色は、50%の彩度によりミュートされますが、footerの色は、100%の彩度によりはるかに鮮やかになります。
hsl()カラーフォーマットを使用する最大の利点の1つは、補色パレットを作成することです。 補色は常にカラーサークルの反対側にあります。 赤の補色は緑です。 色相値の0度のマークに赤があり、その補数は180度のマークにあります。 色相値が200のarticleおよびfooterカラーの場合、 180 を引くと、の補完的な色相値が得られます。 20 、オレンジ色。
テキストエディタのstyles.cssファイルのh1およびhrセレクタに移動します。 各カラープロパティの色相値について、色相を0から20に変更して、色を赤からオレンジの補色に設定します。
styles.css
...
h1 {
...
color: hsl(20, 100%, 25%);
}
hr {
...
border: 2px solid hsl(20, 100%, 35%);
background-color: hsl(20, 100%, 50%);
}
...
変更内容をstyles.cssに保存し、Webブラウザーに戻ってindex.htmlを更新します。 色相の値にいくつかの変更を加えることで、快適なカラーパレットがまとめられました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、hsl()カラー形式を使用して、色相、彩度、明度の色彩理論の側面を使用して色を作成しました。 また、数式を使用して補色パレットを作成し、カラーサークルで反対の色を取得することもできました。
結論
このチュートリアルでは、CSSを使用してWebサイトの色を定義する4つの方法を使用しました。 キーワードの色の値を使用すると、CSS仕様で概説されている定義済みの色にすばやくアクセスできます。 16進色は、少数の文字で多くの情報を保持する最も一般的で広く使用されている形式です。 rgb()カラーフォーメーションは、16進値の値を、コンマ区切りリストの数値を使用して、より包括的な形式に変換します。 最後に、hsl()カラーフォーマットでは、カラーサークル、彩度、明度の色相を使用して、独特で補完的なカラーパレットを作成することにより、色彩理論の概念をWebサイトの開発に適用できます。 これらの4つの形式はすべて、1つのWebサイトで一緒に使用でき、それぞれが独自の強みを発揮します。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
