CSSçžå¯Ÿè²æ§æã®åŒ·åãªåçè²æäœãæ¢æ±ãã«ã©ãŒã¢ãã«ã®å€æãããŒãäœæããŠã§ããããžã§ã¯ãã®ã¢ã¯ã»ã·ããªãã£åäžæ¹æ³ãåŠã³ãŸãã
CSSçžå¯Ÿè²æ§æïŒåçãã¶ã€ã³ã®ããã®ã«ã©ãŒã¢ãã«å€æ
CSSçžå¯Ÿè²æ§æã¯ããŠã§ãéçºã«ãããåçãªè²å¶åŸ¡ãæ°ããªã¬ãã«ã«åŒãäžããŸãããã®åŒ·åãªæ©èœã«ãããããŸããŸãªã«ã©ãŒã¢ãã«å ã§åã ã®ã³ã³ããŒãã³ãã«æ°åŠçãªæäœãè¡ãããšã§ãæ¢åã®è²ã倿Žã§ããŸããããã«ãããããŒãã®äœæãã«ã©ãŒã¹ããŒã ã®èª¿æŽãã¢ã¯ã»ã·ããªãã£ã®åäžããããé«ã粟床ãšå¹çã§ç°¡åã«è¡ããããã«ãªããŸãããã®èšäºã§ã¯ãCSSçžå¯Ÿè²æ§æã®æ§æãã«ã©ãŒã¢ãã«ã®å€æãå®çšäŸããã¹ããã©ã¯ãã£ã¹ãç¶²çŸ ããçè§£ãšå®è£ ã®ããã®å æ¬çãªã¬ã€ããæäŸããŸãã
CSSçžå¯Ÿè²æ§æã®çè§£
çžå¯Ÿè²æ§æã¯ãæ¢åã®è²ããæ°ããè²ãå°ãåºãããã®æšæºåãããæ¹æ³ãå°å ¥ããŸããåŸæ¥ãCSSã§è²ã倿Žããã«ã¯æåã§ã®èšç®ãããªããã»ããµé¢æ°ãå¿ èŠã§ãããã¯é¢åã§ä¿å®ãå°é£ãªå ŽåããããŸãããçžå¯Ÿè²æ§æã¯ãCSSå ã§çŽæ¥ãæ°åŒã䜿çšããŠè²ã®ã³ã³ããŒãã³ããæäœã§ããããã«ããããšã§ããã®ããã»ã¹ãç°¡çŽ åããŸãããã®æ©èœã¯ãã¢ãããã£ããªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãã¬ã¹ãã³ã·ããã¶ã€ã³ãã¢ã¯ã»ã·ãã«ãªã«ã©ãŒã¹ããŒã ãäœæããäžã§éåžžã«éèŠã§ãã
åºæ¬æ§æ
æ§æã¯ã以äžã®äžè¬çãªæ§é ã«åŸããŸãïŒ
color( [color-space]? [base-color] calc(
[component] [operator] [value]) )
- color-space (ãªãã·ã§ã³): çµæã®è²ã®ã«ã©ãŒã¹ããŒã¹ãæå®ããŸããäžè¬çãªãªãã·ã§ã³ã«ã¯
srgbãhslãhwbãlabãlchãoklchããããŸããçç¥ããå Žåãbase-colorã®ã«ã©ãŒã¹ããŒã¹ã䜿çšãããŸãã - base-color: 倿Žãããå
ã®è²ã§ããååä»ãã®è²ïŒäŸïŒ
redïŒã16鲿°å€ïŒäŸïŒ#ff0000ïŒãrgb()ãrgba()颿°ããã®ä»ã®æå¹ãªCSSã®è²è¡šçŸã䜿çšã§ããŸãã - calc(): æ°åŠçèšç®ãå®è¡ããCSS颿°ã§ããåã ã®è²ã³ã³ããŒãã³ãã倿Žããããã«äœ¿çšãããŸãã
- component: ã«ã©ãŒã¢ãã«ã®ç¹å®ã®ã³ã³ããŒãã³ããæããŸããäŸãã°ã
r(èµ€)ãg(ç·)ãb(é)ãh(è²çž)ãs(圩床)ãl(èŒåºŠ)ãa(ã¢ã«ãã¡)ãL(LAB/LCH/OKLCHã«ãããèŒåºŠ)ãc(ã¯ãã)ãH(LAB/LCH/OKLCHã«ãããè²çž)ãªã©ã§ãã - operator: å®è¡ããæ°åŠçæäœã§ããäžè¬çãªæŒç®åã«ã¯
+(å ç®)ã-(æžç®)ã*(ä¹ç®)ã/(é€ç®)ããããŸãã - value: ã³ã³ããŒãã³ãã«é©çšããå€ã§ããæ°å€ãããŒã»ã³ããŒãžããŸãã¯CSS倿°ã䜿çšã§ããŸãã
ã«ã©ãŒã¹ããŒã¹ãšã«ã©ãŒã¢ãã«
ã«ã©ãŒã¹ããŒã¹ãçè§£ããããšã¯ã广çãªè²æäœã®ããã«äžå¯æ¬ ã§ããç°ãªãã«ã©ãŒã¹ããŒã¹ã¯ç°ãªãæ¹æ³ã§è²ã衚çŸããããããã«å©ç¹ãšçšéããããŸãã以äžã¯äžè¬çãªã«ã©ãŒã¹ããŒã¹ã®æŠèŠã§ãïŒ
- sRGB: ãŠã§ãã®æšæºã«ã©ãŒã¹ããŒã¹ã§ããèµ€ãç·ãéã®ã³ã³ããŒãã³ãã䜿çšããŠè²ã衚çŸããŸãã
- HSL: è²çž(Hue)ã圩床(Saturation)ãèŒåºŠ(Lightness)ãHSLã¯ã人éãç¥èŠããè²ã®ç¹æ§ã«ãã£ãŠè²ã調æŽã§ãããããããçŽæçã§ãã
- HWB: è²çž(Hue)ãçœè²åºŠ(Whiteness)ãé»è²åºŠ(Blackness)ãHWBã䜿ããããã«ã©ãŒã¹ããŒã¹ã§ããã£ã³ããã·ã§ãŒããäœæããã®ã«äŸ¿å©ã§ãã
- LAB: 人éã®èŠèŠãæš¡å£ããããã«èšèšããããç¥èŠçã«åäžãªã«ã©ãŒã¹ããŒã¹ã§ããLïŒèŒåºŠïŒãaïŒç·-赀軞ïŒãbïŒé-é»è»žïŒã§æ§æãããŸãã
- LCH: èŒåºŠ(Lightness)ãã¯ãã(Chroma)ãè²çž(Hue)ãLCHã¯LABãåç座æšã§è¡šçŸãããã®ã§ãè²ã®åŒ·åºŠïŒã¯ããïŒãšè²çžãæäœãããããªã£ãŠããŸãã
- OKLCH: æé©åãããLCHãLCHãšæ¯èŒããŠç¥èŠçãªåäžæ§ãåäžãããããšãç®çãšããŠãããããã«æ£ç¢ºãªè²æäœãæäŸããŸãã
CSSçžå¯Ÿè²æ§æã®å®çšäŸ
CSSçžå¯Ÿè²æ§æã®åã瀺ãããã«ãããã€ãã®å®çšäŸãèŠãŠãããŸãããã
äŸ1ïŒè²ãæããã
ãã®äŸã§ã¯ãHSLã®lïŒèŒåºŠïŒã³ã³ããŒãã³ãã䜿çšããŠè²ãæãããæ¹æ³ã瀺ããŸãã
:root {
--base-color: #6495ED; /* Cornflower Blue */
--darker-color: color(hsl var(--base-color) calc(l - 20%));
}
.element {
background-color: var(--darker-color);
}
ãã®äŸã§ã¯ã--darker-colorã¯--base-colorããæŽŸçããHSLã«ã©ãŒã¹ããŒã¹ã§ãã®èŒåºŠã³ã³ããŒãã³ããã20%ãåŒããŠããŸããããã«ãããããæãã³ãŒã³ãã©ã¯ãŒãã«ãŒã®ã·ã§ãŒããçæãããŸãã
äŸ2ïŒè²çžã調æŽãã
ãã®äŸã§ã¯ãHSLã®hïŒè²çžïŒã³ã³ããŒãã³ãã䜿çšããŠè²çžã調æŽããæ¹æ³ã瀺ããŸãã
:root {
--base-color: #FF69B4; /* Hot Pink */
--adjusted-hue-color: color(hsl var(--base-color) calc(h + 30deg));
}
.element {
background-color: var(--adjusted-hue-color);
}
ããã§ã¯ã--adjusted-hue-colorã¯--base-colorã®è²çžã«HSLã«ã©ãŒã¹ããŒã¹ã§30床ãå ããããšã«ãã£ãŠäœæãããŸããããã«ãããè²ã¯ããèµ€ã¿ããã£ããã³ã¯ã®è²çžã«ã·ããããŸãã
äŸ3ïŒãã£ã³ããäœæãã
ãã®äŸã§ã¯ãLCHã«ã©ãŒã¹ããŒã¹ã§èŒåºŠãäžããããšã§è²ã®ãã£ã³ããäœæããŸããLCHãOKLCHã¯ç¥èŠçã«åäžã§ããããããã£ã³ããã·ã§ãŒãã®äœæã«ã¯ãã°ãã°ãã¡ãã奜ãŸããŸãã
:root {
--base-color: #008000; /* Green */
--tinted-color: color(lch var(--base-color) calc(L + 20%));
}
.element {
background-color: var(--tinted-color);
}
ãã®å Žåã--tinted-colorã¯LCHã«ã©ãŒã¹ããŒã¹ã§--base-colorã®èŒåºŠïŒLïŒã³ã³ããŒãã³ãã«20%ãå ããããšã§æŽŸçããããæããç·ã®ã·ã§ãŒãã«ãªããŸãã
äŸ4ïŒã·ã§ãŒããäœæãã
ãã£ã³ãã®äœæãšåæ§ã«ããã®äŸã§ã¯OKLCHã«ã©ãŒã¹ããŒã¹ã§èŒåºŠãäžããããšã§ã·ã§ãŒããäœæããŸãã
:root {
--base-color: #800080; /* Purple */
--shaded-color: color(oklch var(--base-color) calc(L - 20%));
}
.element {
background-color: var(--shaded-color);
}
ããã§ã¯ã--shaded-colorã¯OKLCHã«ã©ãŒã¹ããŒã¹ã§--base-colorã®èŒåºŠïŒLïŒã³ã³ããŒãã³ããã20%ãåŒãããšã«ãã£ãŠäœæãããããæã玫ã®ã·ã§ãŒãã«ãªããŸãã
äŸ5ïŒåçãªããŒãåãæ¿ã
çžå¯Ÿè²æ§æã¯ãåçãªããŒããäœæããããã«äœ¿çšã§ããŸããåºæ¬è²ãå®çŸ©ããããããä»ã®è²ã掟çãããããšã§ãã©ã€ãããŒããšããŒã¯ããŒãããŸãã¯ä»ã®ã«ã©ãŒã¹ããŒã ã«ç°¡åã«åãæ¿ããããšãã§ããŸãã
:root {
--base-background-color: #f0f0f0; /* Light Gray */
--base-text-color: #333;
/* Light Theme */
--background-color: var(--base-background-color);
--text-color: var(--base-text-color);
--link-color: #007bff;
/* Dark Theme (using relative color syntax) */
--dark-background-color: color(srgb var(--base-background-color) calc(r - 0.7) calc(g - 0.7) calc(b - 0.7));
--dark-text-color: color(srgb var(--base-text-color) calc(r + 0.7) calc(g + 0.7) calc(b + 0.7));
--dark-link-color: color(hsl var(--link-color) calc(l + 30%));
}
[data-theme="dark"] {
--background-color: var(--dark-background-color);
--text-color: var(--dark-text-color);
--link-color: var(--dark-link-color);
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
ãã®äŸã§ã¯ãããŒã¯ããŒãã®è²ã¯çžå¯Ÿè²æ§æã䜿çšããŠã©ã€ãããŒãã®è²ããæŽŸçããŠããŸããèæ¯è²ãšããã¹ãè²ã¯RGBã³ã³ããŒãã³ãã倿Žããããšã§èª¿æŽããããªã³ã¯è²ã®èŒåºŠã¯HSLã«ã©ãŒã¹ããŒã¹ã§å¢å ãããŠããŸããããŒãã®åãæ¿ãã«ã¯data-theme屿§ã䜿çšãããŸãã
äŸ6ïŒã¢ã¯ã»ã·ããªãã£ã®åäž
çžå¯Ÿè²æ§æã¯ãã¢ã¯ã»ã·ããªãã£ã®ããã«ååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ããããã«ã䜿çšã§ããŸããè²ã®èŒåºŠãèšç®ããç®çã®ã³ã³ãã©ã¹ãæ¯ã«åºã¥ããŠèª¿æŽããããšã§ãèŠèŠé害ã®ãããŠãŒã¶ãŒã«ãèªã¿ãããã«ã©ãŒã¹ããŒã ãäœæã§ããŸãã
:root {
--base-background-color: #fff; /* White */
--base-text-color: #000; /* Black */
/* Ensure sufficient contrast */
--luminance-threshold: 0.5; /* Example threshold */
--background-luminance: luma(var(--base-background-color));
--text-luminance: luma(var(--base-text-color));
--adjusted-text-color: color(srgb var(--base-text-color) if( abs(var(--background-luminance) - var(--text-luminance)) < var(--luminance-threshold), calc(r + 0.5) calc(g + 0.5) calc(b + 0.5), r g b ) );
}
body {
background-color: var(--base-background-color);
color: var(--adjusted-text-color);
}
泚æïŒäžèšã®luma()颿°ã¯ä»®èª¬çãªãã®ã§ããCSSã§çŽæ¥èŒåºŠãèšç®ããããšã¯ãŸã ãµããŒããããŠããŸãããéåžžã¯JavaScriptãCSSããªããã»ããµã䜿çšããŠèŒåºŠãèšç®ããCSS倿°ãä»ããŠé©åãªè²ã®èª¿æŽãé©çšããŸãããã®äŸã¯ãå°æ¥ã®luma()颿°ãšçžå¯Ÿè²æ§æãçµã¿åãããŠã¢ã¯ã»ã·ããªãã£ãåäžããã*æŠå¿µ*ã瀺ããŠããŸããçŸæç¹ã§ã¯ãWCAGã³ã³ãã©ã¹ããã§ãã«ãŒã®ãããªããŒã«ã䜿çšããæåãŸãã¯ããªããã»ããµã§èª¿æŽããŠãã ãããå®éã«ã¯ããã®ãããªè€éãªããžãã¯ã¯ã--adjusted-text-colorã®å€ãèšç®ããããã«ããªããã»ããµãå¿
èŠã«ãªãããšãå€ãã§ãã
äŸ7ïŒOKLCHã«åºã¥ããã«ã©ãŒãã¬ããã®äœæ
ã«ã©ãŒãã¬ããã®çæã«OKLCHã䜿çšãããšãç¥èŠçã«åäžãªã¢ãããŒããå¯èœã«ãªãã調åã®ãšããã«ã©ãŒã¹ããŒã ãç°¡åã«äœæã§ããŸãã
:root {
--base-color: oklch(60% 0.2 240); /* Base color in OKLCH */
--color-1: var(--base-color);
--color-2: color(oklch var(--base-color) calc(H + 30)); /* Adjust Hue */
--color-3: color(oklch var(--base-color) calc(H + 60)); /* Adjust Hue */
--color-4: color(oklch var(--base-color) calc(L - 10%)); /* Adjust Lightness */
--color-5: color(oklch var(--base-color) calc(C * 0.8)); /* Adjust Chroma */
}
.element-1 { background-color: color(var(--color-1)); }
.element-2 { background-color: color(var(--color-2)); }
.element-3 { background-color: color(var(--color-3)); }
.element-4 { background-color: color(var(--color-4)); }
.element-5 { background-color: color(var(--color-5)); }
ãã®äŸã§ã¯ãOKLCHã§å®çŸ©ãããåäžã®åºæ¬è²ã«åºã¥ããŠ5è²ã®ãã¬ãããäœæããŸããè²ã¯ãè²çžïŒHïŒãèŒåºŠïŒLïŒãã¯ããïŒCïŒã®åã³ã³ããŒãã³ãã調æŽããããšã§æŽŸçããŸããOKLCHã䜿çšããããšã§ããããã®èª¿æŽãç¥èŠçã«äžè²«ããè²ã®ããªãšãŒã·ã§ã³ã«ãªãããšãä¿èšŒãããŸãã
ã«ã©ãŒã¢ãã«ã®å€æ
CSSçžå¯Ÿè²æ§æã®çã®åã¯ãã«ã©ãŒã¢ãã«ã®å€æãå®è¡ã§ããèœåã«ãããŸããcolor()颿°ã§ç°ãªãã«ã©ãŒã¹ããŒã¹ãæå®ããããšã«ãããããã¢ãã«ããå¥ã®ã¢ãã«ã«è²ã倿ãããã®ã³ã³ããŒãã³ãã倿Žã§ããŸããããã«ãããè²æäœã®å¯èœæ§ã倧ããåºãããŸãã
äŸïŒsRGBããHSLãžã®å€æ
:root {
--base-color: #00ff00; /* Green in sRGB */
--adjusted-color: color(hsl var(--base-color) calc(s * 0.5));
}
.element {
background-color: var(--adjusted-color);
}
ãã®äŸã§ã¯ã--base-colorïŒsRGBã§å®çŸ©ïŒãHSLã«å€æãããåŸããã®åœ©åºŠïŒsïŒã50%æžå°ããŸããçµæã®è²ã¯ãèŠçŽ ã®èæ¯è²ãšããŠäœ¿çšãããŸãã
äŸïŒHSLããLCHãžã®å€æ
:root {
--base-color: hsl(240, 100%, 50%); /* Blue in HSL */
--adjusted-color: color(lch var(--base-color) calc(L + 10%));
}
.element {
background-color: var(--adjusted-color);
}
ããã§ã¯ã--base-colorïŒHSLã§å®çŸ©ïŒãLCHã«å€æããããã®èŒåºŠïŒLïŒã10%å¢å ããŸããLCHã¯HSLãsRGBã§åã«èŒåºŠã調æŽãããããç¥èŠçã«åäžãªçµæãæäŸãããããããã¯ãã£ã³ããäœæããã®ã«è¯ãæ¹æ³ã§ãã
CSSçžå¯Ÿè²æ§æã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
- é©åãªã«ã©ãŒã¹ããŒã¹ãéžæãã: ããŒãºã«æãé©ããã«ã©ãŒã¹ããŒã¹ãéžæããŠãã ãããHSLã¯è²çžãšåœ©åºŠã®èª¿æŽã«çŽæçã§ãããLABãšLCHã¯ç¥èŠçã«åäžãªãã£ã³ããã·ã§ãŒããäœæããã®ã«ããé©ããŠããŸãããã©ãŠã¶ã®ãµããŒããååã§ããã°ãOKLCHããã°ãã°æšå¥šãããéžæè¢ã§ãã
- CSS倿°ã䜿çšãã: åºæ¬è²ãCSS倿°ãšããŠå®çŸ©ããããããä»ã®è²ã掟çãããŸããããã«ãããã«ã©ãŒã¹ããŒã ã®ç®¡çãšæŽæ°ã容æã«ãªããŸãã
- ã¢ã¯ã»ã·ããªãã£ããã¹ããã: ããã¹ããšèæ¯è²ã®éã«ååãªã³ã³ãã©ã¹ããããããšã確èªããããã«ãåžžã«ã«ã©ãŒã¹ããŒã ã®ã¢ã¯ã»ã·ããªãã£ããã¹ãããŠãã ããã
- ãã©ãŠã¶ã®ãµããŒããèæ ®ãã: æ¬çªç°å¢ã§çžå¯Ÿè²æ§æã䜿çšããåã«ããã©ãŠã¶ã®äºææ§ã確èªããŠãã ããã2024幎åŸåã®æç¹ã§ã¯ãäž»èŠãªã¢ãã³ãã©ãŠã¶ã§ã®ãµããŒãã¯æŠãè¯å¥œã§ããããCan I Useããªã©ã®ããŒã«ã§åžžã«ç¢ºèªããŠãã ããã
- å¯èœãªå Žåã¯OKLCHã䜿çšãã: OKLCHã¯ãsRGBãHSLãªã©ã®åŸæ¥ã®ã«ã©ãŒã¹ããŒã¹ãããåªããç¥èŠçåäžæ§ãæäŸããè²ãæäœããéã«èŠèŠçã«äžè²«ããçµæããããããŸãã
- å¶éãçè§£ãã: è€éãªèšç®ãåçãªèŒåºŠèª¿æŽã¯ãçŸåšã®CSSã®å¶éã®ãããå®å šãªæ©èœãå®çŸããããã«ããªããã»ããµãJavaScriptãå¿ èŠã«ãªãããšããããããŸãã
CSSçžå¯Ÿè²æ§æã䜿çšããã¡ãªãã
- åçãªããŒãèšå®: æå°éã®ã³ãŒã倿Žã§ãç°ãªãã«ã©ãŒããŒããç°¡åã«äœæããåãæ¿ããããšãã§ããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®åäž: èŠèŠé害ã®ãããŠãŒã¶ãŒã®ããã«ååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ã§ããŸãã
- ç°¡çŽ åãããè²ç®¡ç: è²ã®å®çŸ©ãäžå åããããããä»ã®è²ã掟çãããããšã§ãã«ã©ãŒã¹ããŒã ã®ç¶æãšæŽæ°ã容æã«ãªããŸãã
- æè»æ§ã®åäž: ããæè»ã§è¡šçŸåè±ããªæ¹æ³ã§è²ãæäœã§ãããŠããŒã¯ã§èŠèŠçã«é åçãªãã¶ã€ã³ãäœæã§ããŸãã
- ç¥èŠçåäžæ§: LABãLCHãOKLCHãªã©ã®ã«ã©ãŒã¹ããŒã¹ã䜿çšããããšã§ãè²æäœã«ç¥èŠçã«åäžãªã¢ãããŒããæäŸããè²ã®èª¿æŽãèŠèŠçã«äžè²«ããŠããããšãä¿èšŒããŸãã
çµè«
CSSçžå¯Ÿè²æ§æã¯ããŠã§ãéçºã«ãããåçãªè²æäœã®ããã®åŒ·åãªããŒã«ã§ãããã®æ§æãã«ã©ãŒã¹ããŒã¹ãå®çšçãªå¿çšãçè§£ããããšã§ããããžã§ã¯ãã§ããŒããäœæããã¢ã¯ã»ã·ããªãã£ãåäžãããè²ç®¡çãç°¡çŽ åããããšãã§ããŸãããã©ãŠã¶ã®ãµããŒããåäžãç¶ããã«ã€ããŠãçžå¯Ÿè²æ§æã¯çŸä»£ã®ãŠã§ãéçºè ã®ããŒã«ãããã«äžå¯æ¬ ãªäžéšãšãªãã§ãããããã®æè¡ãåãå ¥ããããšã§ãäžçäžã®ãŠãŒã¶ãŒã®ããã«ããé©å¿æ§ãé«ããã¢ã¯ã»ã·ãã«ã§ãèŠèŠçã«é åçãªãŠã§ãäœéšãåµé ããããšãã§ããŸãã