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をファイルに追加します。
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
次に、<head>タグに移動し、<meta>タグを追加して、HTMLファイルの文字セットを定義し、次にページのタイトル<link>要素を定義します。
これらの追加は、次のコードブロックで強調表示されています。
<!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ファイルに追加します。
<!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の半分にします。
body {
font-family: sans-serif;
line-height: 1.5;
}
次に、margin、padding、width、およびmax-widthを使用してタイプセレクターを作成し、<article>要素のスタイルを追加します。 、box-sizing: border-boxとともに、<article>のボックスモデルを再定義します。 これにより、paddingの値がコンテナの全幅に追加されないようになります。
各プロパティの値について、次のコードブロックの強調表示されたセクションを追加します。
...
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;を追加して、テキストを中央に配置します。
...
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の値で丸めます。
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
}
最後に、footerセレクターブロックを作成し、2remの値を持つmargin-topプロパティを追加し、その後に0.875remのfont-sizeを追加します。
...
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キーワードを使用します。
...
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キーワードを追加します。
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
color: teal;
}
...
次に、補色の概念を続けて、hr要素に移動し、0.25rem solid tealのborderプロパティを追加します。 その後、キーワードdarkturquoiseを値としてbackground-colorプロパティを追加します。
...
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を使用します。
...
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値を継承します。次のコードブロックの強調表示されたセクションに示されているように：
...
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を使用します。
...
article {
...
background-color: #f0f0f0;
border: 0.25rem solid #ccc;
color: #444;
}
...
注：テキストコンテンツを操作するときは、background-colorとテキストcolorの値の間で良好な色のコントラストを維持することが重要です。 これにより、幅広い読者やWebサイトユーザーがテキストを読みやすくなります。 アクセシブルなカラーコントラスト比の重要性について詳しくは、このWebビデオシリーズのアクセシブルなカラーコントラストを使用したデザインをご覧ください。 また、 WebAIM が提供するこのコントラスト計算機は、包括的なオーディエンスがテキストを読みやすくするのに十分なコントラストを色が提供するかどうかをテストするための優れたツールです。
次に、h1の色の値を濃い赤に設定します。 styles.cssファイルのh1セレクターに移動し、colorプロパティを#900の値に更新します。これにより、赤のチャネルが約中点で、緑と青のチャンネルをオフのままにします。
...
h1 {
...
color: #900;
}
...
赤の値を続けて、hrの色のプロパティをh1要素に一致するように更新します。 borderプロパティの色を#bd0000に設定します。これは、色が#b00と#a00の間の値であるため、長い形式の16進コードが必要です。 次に、#f00を使用して、background-colorを完全な赤の値に設定します。 これは、redキーワードに相当する16進値です。
...
hr {
...
border: .25rem solid #bd0000;
background-color: #f00;
}
...
最後に、footerテキストをメインテキストの軽量バージョンとして続行するには、footerプロパティに移動し、colorプロパティを[の中間の灰色に変更します。 X172X]
