著者は、 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ファイルの文字セットを定義し、次にページのタイトル[ X146X]タグは、モバイルデバイスがページをレンダリングする方法を定義し、最後に、後で作成するCSSファイルをロードする<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]