CSS 色

CSS 色 (CSS Color) は、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱う CSS のモジュールです。 <color> を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。

リファレンス

プロパティ

データ型

ガイド

CSS を使った HTML 要素への色の適用
様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。

ツール

色選択ツール
このツールは独自の色を簡単に作成、調整、実験することができます。

仕様書

仕様書 状態 備考
CSS Color Module Level 4 草案  
CSS Color Module Level 3 勧告  
CSS Level 2 (Revision 1) 勧告  
CSS Level 1 勧告 初回定義

ブラウザーの対応

color プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
colorChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

color-adjust プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
color-adjustChrome 完全対応 49
代替名
完全対応 49
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Edge 完全対応 79
代替名
完全対応 79
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Firefox 完全対応 48IE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Safari 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
WebView Android 完全対応 49
代替名
完全対応 49
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Chrome Android 完全対応 49
代替名
完全対応 49
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Firefox Android 完全対応 48Opera Android 完全対応 36
代替名
完全対応 36
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Safari iOS 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。
Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-print-color-adjust を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
非標準の名前を使用しています。
非標準の名前を使用しています。

opacity プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
opacityChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
完全対応 1
未対応 1 — 3.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9Opera 完全対応 9Safari 完全対応 2
完全対応 2
未対応 1.1 — 2
接頭辞付き
接頭辞付き -khtml- のベンダー接頭辞が必要
WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Support for percentage opacity valuesChrome 完全対応 78Edge 完全対応 79Firefox 完全対応 70IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 78Chrome Android 完全対応 78Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 12.0

凡例

完全対応  
完全対応
未対応  
未対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報