CSS カラー: CSS における色のさまざまな定義の紹介
テキストの色、背景の色、グラデーション、影、境界線など、色は CSS で広く使用されています...すべてに色を定義する方法が必要ですが、それぞれの色の定義方法には独自の長所と短所があります。この記事では、CSS における色のさまざまな定義について説明します。
color 属性はテキストの色を定義するのに非常に簡単です。さらに重要なのは、色の定義にさまざまな種類の色単位を使用できることです。 (推奨コース: css ビデオ チュートリアル )
色の名前
CSS には、最も基本的な色から 140 以上の色の名前が用意されています。色はカラフルとも言えます。
body{ color: black;}
a{ color: orange;}上の例は特定の色名を使用して定義されていますが、色名は覚えにくいため、非常に特定の色が必要な場合、その色名は使いにくい可能性があります。見てみましょう。色を定義するその他の方法
RGB
コンピューター モニター、テレビ、携帯電話はすべて、RGB カラー モデルを使用して色を表示します。基本的に、すべての色は赤、緑、青の組み合わせによって定義されます。赤、緑、青には 256 の可能な値があります。コンピュータは 0 (ゼロ) からカウントを開始するため、最大値は 255 です。
色は赤、緑、青の組み合わせの結果であると考えると、これら 3 つの色にはそれぞれ 256 個の可能な値があるため、256 * 256 * 256 = 16,777,216 色を使用できます。
RGB モデルは色が物理的にレンダリングされる方法に直接関係しているため、CSS のカラー単位になりました。
たとえば、赤を 219 赤、78 緑、68 青として定義できます:
a{ color: rgb(219, 78, 68);}黒は赤、緑、青ではありません:
body{ color: rgb(0, 0, 0);}スペクトルの反対側では、白は赤、緑、青のそれぞれの全量です。
body{ color: rgb(255, 255, 255);}RGBA
rgba の色の単位は rgb であり、これがアルファです。追加 色の透明度を定義する値 (0 ～ 1 の範囲、10 進数値):
body{ color: rgba(0, 0, 0, 0.8);}わずかに透明な黒。
色の透明度の目的は背景とブレンドすることなので、状況に応じて若干異なって見えます。特に背景色に便利です。
HSL と HSLA
HSL は色を定義するもう 1 つの方法です。色相環のようなものだと考えてください。
色を赤、緑、青として組み合わせる代わりに、次のように定義できます。
色相値の範囲は 0 ～ 360 で、特定の色に限定されます。
彩度は 0% から 100% の範囲のパーセンテージで、色をどの程度暗くするか、または明るくするかを定義します。
明るさは、色をどの程度明るくするかを定義する 0% から 100% の範囲のパーセンテージです。
同様に、HSL では次のように定義できます:
a{ color: hsl(4, 68%, 56%);}4 は赤を意味します 68% は赤が非常に目立つことを意味します 56% は黒と白の間であることを意味します
## hsl カラー単位は、期待される結果が明確であるため、rgb よりも理解しやすいです。基本的に 3 つの別々の手順で色を定義し、それぞれの値を使用して必要な色をレンダリングできます。黄色の色合いが必要な場合は、hsl(50、68%、56%) のような値から始めて、彩度と明るさの値を変更して、探している特定の色合いを見つけることができます。 hsl は人間にとってより読みやすいのに対し、rgb はコンピュータにより読みやすいと思います。 hsla は hsl と同じですが、透明度のアルファ値を定義する機能が追加されているだけです:body{ color: hsla(4, 68%, 56%, 0.5);}透明な赤。
Hex
CSS の色は、#db4e44 などの 16 進値で定義することもできます。 16 進値とは何かを理解するために、2 進数と 10 進数がどのように機能するかを見てみましょう。| 0 | 1 |
10 進数 |
||||||||||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #16 進数 | 0|||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
3 つの個別のフィールドを貼り付けるよりも、1 つのフィールドを貼り付ける方が簡単です。 以上がCSS カラー: CSS における色のさまざまな定義の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
一般的なCSSブラウザの矛盾とは何ですか？
Jul 26, 2025 am 07:04 AM
さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。
CSSを使用して応答性のある画像を作成する方法は？
Jul 15, 2025 am 01:10 AM
CSSを使用してレスポンシブ画像を作成するには、主に次の方法で達成できます。1。最大幅を使用してください：100％と高さ：自動化して、割合を維持しながら画像がコンテナ幅に適応できるようにします。 2。HTMLのSRCSETおよびサイズの属性を使用して、異なる画面に適合した画像ソースをインテリジェントにロードします。 3.オブジェクトフィットとオブジェクトポジションを使用して、画像のトリミングとフォーカスディスプレイを制御します。一緒に、これらの方法により、画像がさまざまなデバイスで明確かつ美しく表示されるようになります。
「不透明度」プロパティを説明してください
Jul 15, 2025 am 01:23 AM
不透明度は、0（完全に透明）から1（完全に不透明）の範囲の値を持つ、要素の全体的な透明性を制御するCSSの属性です。 1.イメージホバーフェード効果によく使用され、不透明な遷移を設定することでインタラクティブエクスペリエンスを強化します。 2。テキストの読みやすさを改善するための背景マスクレイヤーを作成します。 3.障害状態のコントロールボタンまたはアイコンの視覚的フィードバック。指定された色部分のみに影響するRGBAとは異なり、すべての子供要素に影響を与えることに注意してください。スムーズなアニメーションは移行とともに実現できますが、頻繁に使用するとパフォーマンスに影響を与える可能性があります。 Will-ChangeまたはTransformと組み合わせて使用することをお勧めします。不透明度を合理的に適用すると、ページの階層と対話性が向上しますが、ユーザーとの干渉を避ける必要があります。
アクセントカラーのプロパティとは何ですか？
Jul 26, 2025 am 09:25 AM
Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します
`：has（）` pseudo-class（parent selector）を説明する
Jul 15, 2025 am 12:32 AM
：has has（）pseudo-classincsSallowStargetingAparentelementBasedOnitsChildElements.itworksbyusingthesyntaxparent：has has has has（child-selector）toapplystylescample、forexample、div：appliestytylestoadianmage.multelectorectorscomma
ブラウザのデフォルトのスタイルシートはレンダリングにどのように影響しますか？
Jul 19, 2025 am 02:08 AM
ブラウザのデフォルトスタイルは、マージン、フィル、フォント、フォーム要素スタイルを自動的に適用することにより、基本的な読みやすさを確保しますが、一貫性のないクロスブラウザーレイアウトを引き起こす可能性があります。 1.デフォルトのマージンと充填は、タイトル、段落、リストの間隔など、レイアウトフローを変更します。 2.デフォルトのフォント設定は、16pxフォントサイズやTimesNewromanフォントなど、読みやすさに影響します。 3.フォーム要素は異なるブラウザで非常に異なるため、外観をリセットする必要があります。 4.強いEMやEMなどの一部のタグには、デフォルトの強調スタイルがあり、明示的に上書きする必要があります。回避策には、remormize.css、リセットスタイル、またはグローバルにクリアなマージンと塗りつぶしの使用が含まれ、一貫性のためにフォントとフォームスタイルをカスタマイズします。
段落の最初の文字または最初の行をスタイリングする方法は？
Jul 19, 2025 am 02:58 AM
視覚的魅力を強化するために段落の始まりを美化するために、一般的な慣行は、CSSの擬似要素を使用するか、ドキュメントを手動でスタイリングすることです。 Web開発では、P :: First-Letterを使用して、拡大、太字、変色などの最初の文字スタイルを設定できますが、ブロックレベルの要素にのみ適していることに注意してください。最初の行全体を強調表示したい場合は、P :: First-Lineを使用してスタイルを追加します。 Wordなどのドキュメントソフトウェアでは、最初の文字形式を手動で調整したり、スタイルテンプレートを作成したりすることができます。Indesignには、公開やデザインに適した「ファーストシンク」機能が組み込まれています。適用するときは、読み取りに影響を与える複雑なスタイルを避け、互換性とフォーマットの一貫性を確保するなど、詳細に注意を払う必要があります。
選択をスタイリングする方法ハイライト（ `:: selection`）？
Jul 16, 2025 am 12:50 AM
CSSの::選択擬似要素を使用して、ページの美学と統一性を改善するためにWebページテキストを選択したときにハイライトスタイルをカスタマイズします。 1.基本設定：:: ::選択の背景と色を定義します。 P ::選択などの特定の要素も制限できます。 2。互換性処理：Safariおよびモバイルブラウザーと互換性がある-WebKit -Prefixを追加すると、FirefoxとEdgeの標準が十分にサポートされています。 3.読みやすさに注意してください：過度の色のコントラストや派手なほど避け、全体的な設計と調整する必要があります。たとえば、視覚的な快適さを改善するために、暗いモードのソフトブルーベースを選択します。合理的な使用は、インターフェイスのテクスチャを強化し、詳細を無視することができます
