色と背景
ボタンを特定の青にしたいとします。デザインファイルから色を見つけて、#1b2130をスタイルシートに貼り付けると機能しますが、これらの文字が何を意味するのか、また色を少し明るくするにはどうするのかが分かりません。CSSの色は、その下にあるいくつかのシステムを学ぶまで、暗号化されたコードの山に見えます。色を読むことができ、背景に色を塗ることができれば、ページのビジュアルキャラクターのほとんどはあなたの手の中にあります。
色を指定する
CSSでは、同じ色を複数の方法で書くことができます。最も簡単なのは**キーワード**です。ブラウザが既に知っている平易な英語の名前です。
.tag {
color: rebeccapurple; /* コードを使わない名前付きの色 */
}これらの名前は約140個あり、簡単な作業には便利ですが、実際のデザインにとっては圧倒的に不足しています。他の方法では、どんな色でも記述することができます。16進数コードは#に続く6文字で、rgb()は赤、緑、青を量で混ぜます。どれも正確な色を指しており、キーワードは一般的なものへのショートカットです。
.tag {
color: #1b2130; /* 同じ暗い紺を16進数コードで書いたもの */
}
rebeccapurpleのようなキーワード、#1b2130のような16進数コード、またはrgb()で書くことができます。キーワードはすぐに使用できますが、約140個しかないため、ほとんどの実際の作業ではコードを使用します。この段階ではまだ16進数コードを目で読もうとしないでください。正確な値をコピーすることは完全に正常です。 透明度
時々、透光性のある色が必要な場合があります。背後にあるものが少し見えるようにです。これは**透明度**であり、アルファと呼ばれる4番目の値を追加します。0は完全に透明で、1は完全に不透明です。
.overlay {
background-color: rgb(27 33 48 / 0.5); /* 紺色ですが、半分透明 */
}終わりの/ 0.5は「半分の不透明度」を意味します。opacityと呼ばれるプロパティもあり、テキストを含むグローバル要素全体をフェードします。
.faded {
opacity: 0.5; /* 要素全体をフェード、1つの色ではなく */
}その違いは重要です。アルファは1つの色のみに影響しますが、opacityは要素のすべてをフェードさせます。
0は不可視で、1は不透明で、/ 0.5のようなものは中間です。そのアルファは1つの色のみに触れます。別のopacityプロパティは、テキストを含めて全体の要素をフェードするため、背景をより柔らかくしたいだけの場合はアルファを選びます。 背景色と画像
background-colorプロパティは、要素の背後の領域を埋め、その枠線に到達します。名前を付けることができるどの色でも使用できます。
.hero {
background-color: hsl(219 28% 15%); /* コンテンツの背後に固体の紺 */
}background-imageで要素の背後に画像を配置し、url(...)でファイルをポイントすることもできます。
.hero {
background-image: url("mountains.jpg");
background-size: cover; /* 画像をスケールして領域全体を埋める */
}background-size: coverは画像をスケールしてボックスを完全に埋め、オーバーフローをクロップします。ほとんどの場合、これが必要な設定です。空白のギャップはありません。
background-colorは要素の背後のスペースを埋め、background-image: url(...)は代わりに画像をそこに置きます。background-size: coverで画像を組み合わせて、ボックス全体を埋めて間隙を残さないようにしてください。その組み合わせは、初期段階で到達したいものの大部分をカバーしています。 グラデーション
**グラデーション**は1つの色から別の色への滑らかなブレンドです。CSSはそれを画像の一種として扱うため、background-colorではなくbackground-imageに入ります。
.banner {
background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}これは最初の色を上から2番目の色を下にブレンドします。2つ以上の色をリストでき、方向を変更できます。
.banner {
background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
/* 上下ではなく左から右にブレンド */
}画像ファイルは不要です。ブラウザはブレンドを描画します。
background-imageに入ります。linear-gradient()は直線でブレンドし、デフォルトではトップから下へ、または方向を変更するためにto rightを追加します。ファイルは不要。ブラウザがブレンド自体を描画します。 適応して読みやすい色
1つの有用なキーワードはcurrentColorです。要素のテキスト色を表すため、枠線やアイコンはテキストに自動的に一致できます。
.chip {
color: hsl(219 28% 15%);
border: 2px solid currentColor; /* 枠線がテキスト色と一致します */
}後でテキスト色を変更すると、枠線は独自の変更なしに従う必要があります。
もう1つ念頭に置いておくべきこと：テキストがその背景から目立つことを確認してください。暗いテキストの暗い背景は読みにくく、薄いグレーの白はめまいがします。テキストと背景の明るさに明確な違いがあることを目指してください。
currentColorは要素のテキスト色をコピーするキーワードであり、枠線がテキストと一致し、後で変更した場合に従うことができます。その先、テキストを読みやすく保ちます。背後にあるものよりも明らかに明るいまたは暗いことを確認してください。低対比がページが読みにくい最も一般的な理由です。