Opacity
要素の透明度を制御し、オーバーレイや状態変化の視覚的な階層を表現します。
Opacity Scale
0%から100%までの完全な不透明度スケール
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
50%
55%
60%
65%
70%
75%
80%
85%
90%
95%
100%
Interactive Demo
スライダーで不透明度を調整して効果を確認
50%
0%50%100%
Opacity vs Color Alpha
opacityプロパティとカラーのアルファ値の違い
opacity: 0.5親要素 (50%)
子要素も50%に
✗ 子要素にも影響する
color-mix()親要素 (50%)
子要素は100%
✓ 背景のみ透明
Text Readability
不透明度がテキストの読みやすさに与える影響
100%
デザインシステムは、一貫性のあるユーザー体験を提供します。
可読80%
デザインシステムは、一貫性のあるユーザー体験を提供します。
可読60%
デザインシステムは、一貫性のあるユーザー体験を提供します。
可読40%
デザインシステムは、一貫性のあるユーザー体験を提供します。
非推奨20%
デザインシステムは、一貫性のあるユーザー体験を提供します。
非推奨アクセシビリティのため、本文テキストは 60%以上 の不透明度を維持してください。
Animation Examples
不透明度を使ったフェードイン・フェードアウト効果
Box
transition-opacity duration-slow