åçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã§CSSã®æªæ¥ãæ¢æ±ããŸãããããã®é«åºŠãªãã¯ããã¯ããã°ããŒãã«ãã¶ã€ã³ã·ã¹ãã ã®ã¹ã¿ã€ã«åªå é äœã«é©åœãããããæ¹æ³ãåŠã³ãŸãã
é«åºŠãªCSSã«ã¹ã±ãŒãã¬ã€ã€ãŒè£éïŒåçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã®è©³çް
ãŠã§ãéçºã®çµ¶ãéãªãé²åã®äžã§ãCSSã¯ãã®æŽç·Žãããé²åã§ç§ãã¡ãé©ããç¶ããŠããŸããFlexboxãGridãããã«ã¹ã¿ã ããããã£ãã³ã³ããã¯ãšãªãŸã§ãã¹ã¿ã€ãªã³ã°ã®èšèªã¯ãè€éã§ã¬ã¹ãã³ã·ãã§ä¿å®å¯èœãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã®åŒ·åãªããŒã«ã«ãªããŸãããCSSã¢ãŒããã¯ãã£ã«ãããæãéèŠãªæè¿ã®é²æ©ã®1ã€ã¯ãã«ã¹ã±ãŒãã¬ã€ã€ãŒã®å°å ¥ã§ãããéçºè ã«CSSã«ã¹ã±ãŒãã«å¯ŸããåäŸã®ãªãå¶åŸ¡ãæäŸããŸãããããããã®åããã£ãŠããã¬ã€ã€ãŒã¯éçã«å®çŸ©ãããŠããŸãããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãã³ã³ããŒãã³ãã®ç¶æ ããŸãã¯ç°å¢ã³ã³ããã¹ãã«å¿ããŠãã¬ã€ã€ãŒã®åªå 床ãåçã«æäœã§ãããšãããã©ãã§ããããïŒæªæ¥ãžããããïŒé«åºŠãªCSSã«ã¹ã±ãŒãã¬ã€ã€ãŒè£éãšåçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã
ãã®èšäºã§ã¯ãCSSã¢ãŒããã¯ãã£ã«ãããæ¬¡ã®è«ççãªã¹ãããã衚ããå°æ¥ãèŠæ®ããæŠå¿µçãªæ©èœãæ¢æ±ããŸããåçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ããšã¯äœãããªããããã°ããŒãã«ãã¶ã€ã³ã·ã¹ãã ã«ãšã£ãŠã²ãŒã ãã§ã³ãžã£ãŒãªã®ãããããŠãããè€éãªWebã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ã«å¯Ÿããç§ãã¡ã®ã¢ãããŒããã©ã®ããã«åæ§ç¯ããã®ããæãäžããŸãããã®æ©èœã¯ãŸã ãã©ãŠã¶ã§ã¯å©çšã§ããŸãããããã®å¯èœæ§ãçè§£ããããšã§ãCSSã®ãããã€ãããã¯ã§åŒ·åãªæªæ¥ã«åããããšãã§ããŸãã
åºç€ã®çè§£ïŒä»æ¥ã®ã«ã¹ã±ãŒãã¬ã€ã€ãŒã®éçãªæ§è³ª
ãã€ãããã¯ãªæªæ¥ãçè§£ããåã«ããŸãéçãªçŸåšãç¿åŸããå¿ èŠããããŸããCSSã«ã¹ã±ãŒãã¬ã€ã€ãŒïŒ@layerïŒã¯ãCSSã«ãããé·å¹Žã®åé¡ãã€ãŸãç¹ç°æ§ãšã«ã¹ã±ãŒãããã¯ãã¬ãã«ã§ç®¡çããããã«å°å ¥ãããŸãããäœå幎ãã®éãéçºè ã¯BEMïŒBlockãElementãModifierïŒãªã©ã®æ¹æ³è«ãè€éãªç¹ç°æ§ã®èšç®ã«é Œã£ãŠãã¹ã¿ã€ã«ãæ£ããé©çšãããããã«ããŠããŸãããã«ã¹ã±ãŒãã¬ã€ã€ãŒã¯ãç¹ç°æ§ã§ã¯ãªã宣èšã®é åºãåªå é äœã決å®ãããé åºä»ããããã¬ã€ã€ãŒã®ã¹ã¿ãã¯ãäœæããããšã§ããããç°¡çŽ åããŸãã
å€§èŠæš¡ãããžã§ã¯ãã®å žåçãªã¬ã€ã€ãŒã¹ã¿ãã¯ã¯æ¬¡ã®ããã«ãªããŸãã
/* ããã§ã®é åºãåªå é äœãå®çŸ©ããŸãããutilitiesãã¯ãcomponentsããããåªå ãããŸãã*/
@layer reset, base, theme, components, utilities;
ãã®èšå®ã§ã¯ãã³ã³ããŒãã³ãã«ãŒã«ã«é«ãã»ã¬ã¯ã¿ãŒã®ç¹ç°æ§ãããå Žåã§ããutilitiesã¬ã€ã€ãŒã®ã«ãŒã«ã¯åžžã«componentsã¬ã€ã€ãŒã®ã«ãŒã«ããªãŒããŒã©ã€ãããŸããäŸïŒ
/* base stylesheetå */
@layer components {
div.profile-card#main-card { /* é«ãç¹ç°æ§ */
background-color: blue;
}
}
/* utility stylesheetå */
@layer utilities {
.bg-red { /* äœãç¹ç°æ§ */
background-color: red;
}
}
<div class="profile-card bg-red" id="main-card">ã®ãããªHTMLãããå Žåãèæ¯ã¯èµ€ã«ãªããŸããutilitiesã¬ã€ã€ãŒã®äœçœ®ã¯ãã»ã¬ã¯ã¿ãŒã®è€éãã«é¢ä¿ãªãã究極ã®åãäžããŸãã
éçãªå¶é
ããã¯ãæç¢ºã§äºæž¬å¯èœãªã¹ã¿ã€ãªã³ã°ã¢ãŒããã¯ãã£ã確ç«ããã®ã«éåžžã«åŒ·åã§ãããã ãããã®äž»ãªå¶éã¯ããã®éçãªæ§è³ªã§ããã¬ã€ã€ãŒã®é åºã¯CSSãã¡ã€ã«ã®å é ã§äžåºŠå®çŸ©ããã倿Žã§ããŸãããããããã³ã³ããã¹ãã«åºã¥ããŠãã®åªå é äœã倿Žããå¿ èŠãããå Žåã¯ã©ãã§ããããïŒæ¬¡ã®ã·ããªãªãæ€èšããŠãã ããã
- ããŒãïŒãŠãŒã¶ãŒãéžæããããŒããç¹å®ã®ã³ã³ããŒãã³ãã®ããã©ã«ãã¹ã¿ã€ã«ããªãŒããŒã©ã€ãããå¿ èŠãããããç¹å®ã®ã³ã³ããŒãã³ãã®ã¿ã«é©çšãããå Žåã¯ã©ãã§ããããïŒ
- A/Bãã¹ãïŒæ¢åã®ã¹ã¿ã€ã«ããªãŒããŒã©ã€ãããäžé£ã®å®éšçãªã¹ã¿ã€ã«ïŒæ°ããã¬ã€ã€ãŒããïŒãã`!important`ãŸãã¯è€éãªãªãŒããŒã©ã€ãã¯ã©ã¹ã䜿çšããã«é©çšããã«ã¯ã©ãããã°ããã§ããããïŒ
- ãã€ã¯ãããã³ããšã³ãïŒè€æ°ã®ã¢ããªã±ãŒã·ã§ã³ã1ã€ã®ããŒãžã§æ§æãããŠããã·ã¹ãã ã§ã¯ãããã¢ããªã±ãŒã·ã§ã³ã®ã¹ã¿ã€ã«ãäžæçã«ã·ã§ã«ã¢ããªã±ãŒã·ã§ã³ã®ããŒããããåªå ãããå¿ èŠãããå Žåã¯ã©ãã§ããããïŒ
çŸåšããããã®åé¡ã解決ããã«ã¯ãJavaScripté§åã®ã¯ã©ã¹ã®åãæ¿ããã¹ã¿ã€ã«ã·ãŒãã®æäœããŸãã¯`!important`ã®äœ¿çšãå¿ èŠã§ãããããããã¹ãŠãä¿å®æ§ã®äœãã³ãŒãã«ã€ãªããå¯èœæ§ããããŸããããã¯ãåçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ããåããããšãç®æããŠããã®ã£ããã§ãã
åçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã®ç޹ä»
åçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã¯ãéçºè ãã«ã¹ã±ãŒãã¬ã€ã€ãŒã¹ã¿ãã¯å ã®CSSã«ãŒã«ã®åªå é äœãããã°ã©ã ã§ããã€æèã«å¿ããŠèª¿æŽã§ããããã«ããæŠå¿µçãªã¡ã«ããºã ã§ããããã§ã®ããŒã¯ãŒãã¯ãããã¬ã³ãããŸãã¯ãè£éãã§ãã2ã€ã®ã¬ã€ã€ãŒã®äœçœ®ã亀æããã ãã§ã¯ãããŸãããã«ãŒã«ãŸãã¯ã«ãŒã«ã®ã»ããã«ãå€ãã®å ŽåCSSã«ã¹ã¿ã ããããã£ã«ãã£ãŠé§åããããã¬ã€ã€ãŒã¹ã¿ãã¯å ã®ç°ãªããã€ã³ãéã§ãã®åªå é äœãã¹ã ãŒãºã«ç§»è¡ããæ©èœãäžããããšã§ãã
ãéåžžã®ç¶æ³äžã§ã¯ã'theme'ã¬ã€ã€ãŒã®ãã®ã«ãŒã«ã¯ãã®æšæºçãªåªå é äœãæã¡ãŸãããã ãã--high-contrast-modeã«ã¹ã¿ã ããããã£ãã¢ã¯ãã£ããªå Žåã¯ããã®åªå é äœãã¹ã ãŒãºã«äžããŠã'components'ã¬ã€ã€ãŒã®ããäžã«é 眮ããŸãããšèšãããšãã§ãããšæ³åããŠã¿ãŠãã ããã
ããã«ãããã«ã¹ã±ãŒãã«çŽæ¥æ°ããã¬ãã«ã®ãã€ãããºã ãå°å ¥ãããéçºè ã¯çŽç²ãªCSSã§è€éãªUIç¶æ ã管çã§ããããã«ãªããã¹ã¿ã€ã«ã·ãŒãããã宣èšçã§ãã¬ã¹ãã³ã·ãã§ã匷åã«ãªããŸãã
ã³ã¢æ§æãšããããã£ã®èª¬æïŒææ¡ïŒ
ãã®æŠå¿µãå®çŸããã«ã¯ãæ°ããCSSããããã£ãšé¢æ°ãå¿ èŠã§ããå¯èœãªæ§æãæ³åããŠã¿ãŸãããããã®ã·ã¹ãã ã®ã³ã¢ã¯ãæ°ããCSSããããã£ã§ãããlayer-priorityãšåŒã³ãŸãã
`layer-priority`ããããã£
layer-priorityããããã£ã¯ãã¬ã€ã€ãŒå ã®ã«ãŒã«å ã«é©çšãããŸãããã®ç®çã¯ãã¬ã€ã€ãŒã¹ã¿ãã¯å šäœã«å¯Ÿããã«ãŒã«ã®åªå é äœã*çžå¯Ÿç*ã«å®çŸ©ããããšã§ãã0ãã1ãŸã§ã®å€ãåãå ¥ããŸãã
- 0ïŒããã©ã«ãïŒïŒã«ãŒã«ã¯éåžžã©ããåäœãã宣èšãããã¬ã€ã€ãŒã®äœçœ®ãå°éããŸãã
- 1ïŒã«ãŒã«ã«ã¯ãã¬ã€ã€ãŒã¹ã¿ãã¯å ã§å¯èœãªéãæé«ã®åªå é äœãäžããããŸãããŸãã§ä»ã®ãã¹ãŠã®åŸã«å®çŸ©ãããã¬ã€ã€ãŒã«ãããã®ããã§ãã
- 0ãã1ã®éã®å€ïŒã«ãŒã«ã®åªå é äœã¯ãçŸåšã®äœçœ®ãšã¹ã¿ãã¯ã®æäžéšãšã®éã§è£éãããŸãã0.5ã®å€ã¯ããã®æå¹ãªåªå é äœããã®äžã®ã¬ã€ã€ãŒã®äžéã«é 眮ããå¯èœæ§ããããŸãã
次ã®ããã«ãªããŸãã
@layer base, theme, components;
@layer theme {
.card {
background-color: var(--theme-bg, lightgray);
/* ãã®ã«ãŒã«ã¯åªå 床ãé«ããããšãã§ããŸã */
layer-priority: var(--theme-boost, 0);
}
}
@layer components {
.special-promo .card {
background-color: gold;
}
}
ãã®äŸã§ã¯ãcomponentsã¬ã€ã€ãŒã®.special-promo .cardã«ãŒã«ã¯ãéåžžãthemeã¬ã€ã€ãŒã®.cardã«ãŒã«ããªãŒããŒã©ã€ãããŸãããã ããã«ã¹ã¿ã ããããã£--theme-boostã1ã«èšå®ããå ŽåïŒããããã€ã³ã©ã€ã³ã¹ã¿ã€ã«ãŸãã¯JavaScriptçµç±ïŒãthemeã¬ã€ã€ãŒã®.cardã®ã«ãŒã«ã¯ããã®åªå é äœãã¹ã¿ãã¯ã®æäžéšãŸã§è£éãããã³ã³ããŒãã³ãåºæã®ã¹ã¿ã€ã«ããªãŒããŒã©ã€ãããŸããããã«ãããããŒãã¯å¿ èŠã«å¿ããŠåŒ·åã«äž»åŒµã§ããŸãã
ã°ããŒãã«ãªéçºç°å¢ã§ã®å®çšçãªäœ¿çšäŸ
ãã®æ©èœã®çã®åã¯ãå€§èŠæš¡ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããåœéçãªããŒã ãçŽé¢ããè€éãªèª²é¡ã«é©çšããå Žåã«æããã«ãªããŸããããã€ãã®èª¬åŸåã®ãã䜿çšäŸã次ã«ç€ºããŸãã
1. ãã«ããã©ã³ãã·ã¹ãã åãã®ããŒããšãã©ã³ãã®ãã¬ã³ã
å€ãã®ã°ããŒãã«äŒæ¥ã¯ãããããç¬èªã®èŠèŠçã¢ã€ãã³ãã£ãã£ãæã€ãã©ã³ãã®ããŒããã©ãªãªã管çããŠããŸãããå€ãã®å Žåãåäžã®å ±æãã¶ã€ã³ã·ã¹ãã ã«åºã¥ããŠæ§ç¯ãããŠããŸããåçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã¯ããã®ã·ããªãªã«é©åœããããããŸãã
ã·ããªãªïŒã°ããŒãã«ãªãã¹ãã¿ãªãã£äŒæ¥ã¯ãã³ã¢ã®ãCorporateããã©ã³ããšã掻æ°ã«æºã¡ãè¥è åãã®ãLifestyleããµããã©ã³ããæã£ãŠããŸããã©ã¡ããåãã³ã³ããŒãã³ãã©ã€ãã©ãªã䜿çšããŠããŸãããããŒããç°ãªããŸãã
å®è£ ïŒ
ãŸããã¬ã€ã€ãŒãå®çŸ©ããŸãã
@layer base, corporate-theme, lifestyle-theme, components;
次ã«ãåããŒãå ã§layer-priorityã䜿çšããŸãã
@layer corporate-theme {
.button {
/* ... corporate styles ... */
layer-priority: var(--corporate-prominence, 0);
}
}
@layer lifestyle-theme {
.button {
/* ... lifestyle styles ... */
layer-priority: var(--lifestyle-prominence, 0);
}
}
ããã©ã«ãã§ã¯ãcomponentsã¬ã€ã€ãŒãåªå ãããŸãããã ããbodyã«ã«ã¹ã¿ã ããããã£ãèšå®ããããšã§ãããŒããã¢ã¯ãã£ãã«ã§ããŸãã100ïŒ ã©ã€ãã¹ã¿ã€ã«ãã©ã³ãã«ããå¿ èŠãããããŒãžã®å Žåã¯ã--lifestyle-prominence: 1;ãèšå®ããŸããããã«ãããã©ã€ãã¹ã¿ã€ã«ããŒãã®ãã¹ãŠã®ã«ãŒã«ãæäžäœã«ããŒã¹ãããããã©ã³ãã®äžè²«æ§ãä¿èšŒãããŸããå€ã0.5ã«èšå®ããŠãã©ã³ãããã¬ã³ãããUIãäœæããããšãã§ããŸããããã«ãããç¬èªã®å ±åãã©ã³ãã®ããžã¿ã«ãšã¯ã¹ããªãšã³ã¹ãå¯èœã«ãªããŸããããã¯ãã°ããŒãã«ããŒã±ãã£ã³ã°ãã£ã³ããŒã³ã«ãšã£ãŠéåžžã«åŒ·åãªããŒã«ã§ãã
2. CSSã§çŽæ¥A/Bãã¹ããšãã£ãŒãã£ãŒãã©ã°
åœéçãªeã³ããŒã¹ãã©ãããã©ãŒã ã¯ãããŸããŸãªå°åã§ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæé©åããããã«ãåžžã«A/Bãã¹ãã宿œããŠããŸãããããã®ãã¹ãã®ã¹ã¿ã€ãªã³ã°ã管çããã®ã¯é¢åãªå ŽåããããŸãã
ã·ããªãªïŒãªã³ã©ã€ã³å°å£²æ¥è ã¯ããšãŒãããåžå Žåãã«æ°ãããããã·ã³ãã«ãªãã§ãã¯ã¢ãŠããã¿ã³ã®ãã¶ã€ã³ããåç±³åžå Žåãã®æšæºãã¶ã€ã³ã«å¯ŸããŠãã¹ãããããšèããŠããŸãã
å®è£ ïŒ
å®éšçšã®ã¬ã€ã€ãŒãå®çŸ©ããŸãã
@layer components, experiment-a, experiment-b;
@layer components {
.checkout-button { background-color: blue; } /* ã³ã³ãããŒã«ããŒãžã§ã³ */
}
@layer experiment-b {
.checkout-button {
background-color: green;
layer-priority: var(--enable-experiment-b, 0);
}
}
ããã¯ãšã³ããŸãã¯ã¯ã©ã€ã¢ã³ãåŽã®ã¹ã¯ãªããã¯ããŠãŒã¶ãŒã®ã³ããŒãã«åºã¥ããŠã<html>ã¿ã°ã«åäžã®ã€ã³ã©ã€ã³ã¹ã¿ã€ã«ãæ¿å ¥ã§ããŸãïŒstyle="--enable-experiment-b: 1;"ãããã«ãããDOMå šäœã«ã¯ã©ã¹ã远å ããããè匱ãªç¹ç°æ§ã®ãªãŒããŒã©ã€ããäœæãããããããšãªããå®éšçãªã¹ã¿ã€ã«ãã¯ãªãŒã³ã«ã¢ã¯ãã£ãåããŸããå®éšãçµäºãããšãexperiment-bã¬ã€ã€ãŒã®ã³ãŒãããããŒã¹ã³ã³ããŒãã³ãã«åœ±é¿ãäžããããšãªãåé€ã§ããŸãã
3. ã³ã³ããã¯ãšãªã«ããã³ã³ããã¹ã察å¿UI
ã³ã³ããã¯ãšãªã䜿çšãããšãã³ã³ããŒãã³ãã¯å©çšå¯èœãªã¹ããŒã¹ã«é©å¿ã§ããŸããåçãªã¬ã€ã€ãŒã®åªå é äœãšçµã¿åããããšãã³ã³ããŒãã³ãã¯ã¬ã€ã¢ãŠãã ãã§ãªããåºæ¬çãªã¹ã¿ã€ãªã³ã°ã倿Žã§ããŸãã
ã·ããªãªïŒããã¥ãŒã¹ã«ãŒããã³ã³ããŒãã³ãã¯ãçããµã€ãããŒã«ããå Žåã¯ã·ã³ãã«ã§å®çšçã«èŠããå¿ èŠããããåºãã¡ã€ã³ã³ã³ãã³ããšãªã¢ã«ããå Žåã¯ãªããã§è©³çްã«èŠããå¿ èŠããããŸãã
å®è£ ïŒ
@layer component-base, component-rich-variant;
@layer component-base {
.news-card { /* åºæ¬ã¹ã¿ã€ã« */ }
}
@layer component-rich-variant {
.news-card {
/* 匷åãããã¹ã¿ã€ã«ïŒããã¯ã¹ã·ã£ããŠããªãããªãã©ã³ããªã©ã*/
layer-priority: var(--card-is-wide, 0);
}
}
ã³ã³ããã¯ãšãªã¯ã«ã¹ã¿ã ããããã£ãèšå®ããŸãã
.card-container {
container-type: inline-size;
--card-is-wide: 0;
}
@container (min-width: 600px) {
.card-container {
--card-is-wide: 1;
}
}
ããã§ãã³ã³ãããååã«åºãå Žåã--card-is-wide倿°ã1ã«ãªãããªããããªã¢ã³ãã¹ã¿ã€ã«ã®åªå é äœãäžãããããŒã¹ã¹ã¿ã€ã«ããªãŒããŒã©ã€ãããŸããããã«ãããCSSã ãã§å®å šã«ã«ãã»ã«åãããã³ã³ããã¹ã察å¿ã³ã³ããŒãã³ããäœæãããŸãã
4. ãŠãŒã¶ãŒäž»å°ã®ã¢ã¯ã»ã·ããªãã£ãšããŒãèšå®
ãŠãŒã¶ãŒãèªåã®ãšã¯ã¹ããªãšã³ã¹ãã«ã¹ã¿ãã€ãºã§ããããã«ããããšã¯ãã¢ã¯ã»ã·ããªãã£ãšå¿«é©ãã«ãšã£ãŠéåžžã«éèŠã§ããããã¯ãåçãªã¬ã€ã€ãŒå¶åŸ¡ã«æé©ãªãŠãŒã¹ã±ãŒã¹ã§ãã
ã·ããªãªïŒãŠãŒã¶ãŒã¯ãèšå®ããã«ããããã€ã³ã³ãã©ã¹ããã¢ãŒããŸãã¯ããã£ã¹ã¬ã¯ã·ã¢ãã¬ã³ããªãŒãã©ã³ããã¢ãŒããéžæã§ããŸãã
å®è£ ïŒ
@layer theme, components, accessibility;
@layer accessibility {
[data-mode="high-contrast"] * {
background-color: black !important; /* å€ãæ¹æ³ */
color: white !important;
}
/* æ°ãããããè¯ãæ¹æ³ */
.high-contrast-text {
color: yellow;
layer-priority: var(--high-contrast-enabled, 0);
}
.dyslexia-font {
font-family: 'OpenDyslexic', sans-serif;
layer-priority: var(--dyslexia-font-enabled, 0);
}
}
ãŠãŒã¶ãŒãèšå®ãåãæ¿ãããšãåçŽãªJavaScript颿°ã<body>ã«ã«ã¹ã¿ã ããããã£ãèšå®ããŸããããšãã°ãdocument.body.style.setProperty('--high-contrast-enabled', '1');ãªã©ã§ããããã«ããããã¹ãŠã®ãã€ã³ã³ãã©ã¹ãã«ãŒã«ã®åªå é äœãä»ã®ãã¹ãŠã®ãã®ãããé«ããªãã匷åãª!importantãã©ã°ãå¿ èŠãšããã«ç¢ºå®ã«é©çšãããŸãã
è£éãã©ã®ããã«æ©èœãããïŒæŠå¿µã¢ãã«ïŒ
ãã©ãŠã¶ããããã©ã®ããã«å®è£ ããããçè§£ããããã«ãã«ã¹ã±ãŒãããã©ã®CSS宣èšãåªå ããããã倿ããããã®äžé£ã®ãã§ãã¯ãã€ã³ããšèããããšãã§ããŸããäž»ãªãã§ãã¯ãã€ã³ãã¯æ¬¡ã®ãšããã§ãã
- ãªãªãžã³ãšéèŠåºŠïŒãã©ãŠã¶ã¹ã¿ã€ã«vs.ãªãŒãµãŒã¹ã¿ã€ã«vs.`!important`ãªã©ïŒ
- ã«ã¹ã±ãŒãã¬ã€ã€ãŒ
- ç¹ç°æ§
- ãœãŒã¹ã®é åº
åçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã¯ããã«ã¹ã±ãŒãã¬ã€ã€ãŒããã§ãã¯ãã€ã³ãå ã«ãµãã¹ããããå°å ¥ããŸãããã©ãŠã¶ã¯ãåã«ãŒã«ã®ãæçµåªå 床ãŠã§ã€ãããèšç®ããŸãããã®æ©èœããªãå Žåãåãã¬ã€ã€ãŒå ã®ãã¹ãŠã®ã«ãŒã«ã«ã¯åãã¬ã€ã€ãŒãŠã§ã€ãããããŸãã
layer-priorityã䜿çšãããšãèšç®ã倿ŽãããŸãã@layer L1, L2, L3;ã®ãããªã¹ã¿ãã¯ã®å Žåããã©ãŠã¶ã¯ããŒã¹ãŠã§ã€ããå²ãåœãŠãŸãïŒããšãã°ãL1=100ãL2=200ãL3=300ïŒãlayer-priority: 0.5;ã®L1ã®ã«ãŒã«ã¯ããã®ãŠã§ã€ããåèšç®ãããŸãããŠã§ã€ãã®åèšç¯å²ã¯100ãã300ã§ãã50ïŒ ã®è£éã§ã¯ãæ°ãããŠã§ã€ãã¯200ã«ãªããã¬ã€ã€ãŒL2ãšå®è³ªçã«åãåªå 床ã«ãªããŸãã
ããã¯ããã®åªå é äœã次ã®ããã«ãªãããšãæå³ããŸãã
[ããã©ã«ãã®L1ã«ãŒã«] < [L2ã«ãŒã«] = [0.5ã®L1ã«ãŒã«] < [L3ã«ãŒã«]
ãã®ãã现ããå¶åŸ¡ã«ãããã¬ã€ã€ãŒå šäœãäžŠã¹æ¿ããããããã¯ããã«ãã¥ã¢ã³ã¹ã®ããã¹ã¿ã€ã«ã®é©çšãå¯èœã«ãªããŸãã
ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
ãã®ãããªåçãªæ©èœã«é¢ããèªç¶ãªæžå¿µã¯ãããã©ãŒãã³ã¹ã§ããã«ã¹ã±ãŒãå šäœãåè©äŸ¡ããããšã¯ããã©ãŠã¶ãå®è¡ã§ããæãã³ã¹ãã®ãããæäœã®1ã€ã§ãããã ããææ°ã®ã¬ã³ããªã³ã°ãšã³ãžã³ã¯ããã«å¯ŸããŠé«åºŠã«æé©åãããŠããŸãã
- åèšç®ã®ããªã¬ãŒïŒè€æ°ã®èŠçŽ ã§äœ¿çšãããŠããä»ã®ã«ã¹ã¿ã ããããã£ã®å€æŽãšåæ§ã«ãlayer-priorityãé§åããã«ã¹ã¿ã ããããã£ã倿Žãããšãã¹ã¿ã€ã«ã®åèšç®ãããªã¬ãŒãããŸãã倿Žãããã¹ã¿ã€ã«ãã¬ã€ã¢ãŠãïŒããšãã°ã`width`ã`position`ïŒãŸãã¯å€èгã«åœ±é¿ãäžããªãéããå¿ ãããå®å šãªåæç»ãŸãã¯ãªãããŒãããªã¬ãŒãããããã§ã¯ãããŸããã
- ãšã³ãžã³ã®æé©åïŒãã©ãŠã¶ã¯ãåªå é äœã®ã·ããã®æœåšçãªåœ±é¿ãäºåã«èšç®ããã¬ã³ããªã³ã°ããªãŒå ã®åœ±é¿ãåããèŠçŽ ã®ã¿ãæŽæ°ããããšã§ããããæé©åã§ããŸãã
ããã©ãŒãã³ã¹ã®é«ãå®è£ ã®ããã®ãã¹ããã©ã¯ãã£ã¹
- åçãªãã©ã€ããŒã®å¶éïŒæ°åã®ã³ã³ããŒãã³ããç¬èªã®åªå é äœã管çããã®ã§ã¯ãªããå°æ°ã®é«ã¬ãã«ã®ã°ããŒãã«ã«ã¹ã¿ã ããããã£ïŒããšãã°ã``ãŸãã¯``èŠçŽ ïŒã䜿çšããŠãã¬ã€ã€ãŒã®åªå é äœãå¶åŸ¡ããŸãã
- é«é »åºŠã®å€æŽã®åé¿ïŒ`scroll`ãŸãã¯`mousemove`ã€ãã³ããªã©ã®é£ç¶çãªã¢ãã¡ãŒã·ã§ã³ã§ã¯ãªããç¶æ ã®å€æŽïŒããšãã°ãããŒãã®åãæ¿ããã¢ãŒãã«ã®ãªãŒãã³ãã³ã³ããã¯ãšãªãžã®å¿çïŒã«ãã®æ©èœã䜿çšããŸãã
- åçãªã³ã³ããã¹ãã®åé¢ïŒå¯èœãªéããã¹ã¿ã€ã«ã®åèšç®ã®ç¯å²ãå¶éããããã«ãåªå é äœã®ã·ãããé§åããã«ã¹ã¿ã ããããã£ãç¹å®ã®ã³ã³ããŒãã³ãããªãŒã«ã¹ã³ãŒãããŸãã
- `contain`ãšã®çµã¿åããïŒCSSã®`contain`ããããã£ã䜿çšããŠãã³ã³ããŒãã³ãã®ã¹ã¿ã€ãªã³ã°ãåé¢ãããŠããããšããã©ãŠã¶ã«äŒããè€éãªããŒãžã®ã¹ã¿ã€ã«ã®åèšç®ãå€§å¹ ã«é«éåã§ããŸãã
æªæ¥ïŒãããCSSã¢ãŒããã¯ãã£ã«ãšã£ãŠäœãæå³ããã®ã
åçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãã®ãããªæ©èœã®å°å ¥ã¯ãCSSã®æ§é åæ¹æ³ã«ãããéèŠãªãã©ãã€ã ã·ããã衚ããŸãã
- éçããç¶æ é§åãžïŒã¢ãŒããã¯ãã£ã¯ãåºå®ãããäºåå®çŸ©ãããã¬ã€ã€ãŒã¹ã¿ãã¯ãããã¹ã¿ã€ã«åªå é äœãã¢ããªã±ãŒã·ã§ã³ãšãŠãŒã¶ãŒã®ã³ã³ããã¹ãã«é©å¿ãããããæµåçãªç¶æ é§åã·ã¹ãã ã«ç§»è¡ããŸãã
- JavaScriptãžã®äŸå床ã®è»œæžïŒçŸåšã¹ã¿ã€ãªã³ã°ã®ç®çã§ã¯ã©ã¹ãåãæ¿ããããã ãã«ååšããJavaScriptã³ãŒãã®ããªãã®éïŒããšãã°ã`element.classList.add('is-active')`ïŒããçŽç²ãªCSSã¢ãããŒãã«çœ®ãæããããšãã§ããŸãã
- ããã¹ããŒããªãã¶ã€ã³ã·ã¹ãã ïŒãã¶ã€ã³ã·ã¹ãã ã¯ãèŠèŠçã«äžè²«æ§ãããã ãã§ãªããã³ã³ããã¹ãçã«ã€ã³ããªãžã§ã³ããªã³ã³ããŒãã³ããäœæããé çœ®å ŽæãšãŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³ãšã©ã®ããã«å¯Ÿè©±ãããã«åºã¥ããŠããã®éèŠåºŠãšã¹ã¿ã€ãªã³ã°ã調æŽã§ããŸãã
ãã©ãŠã¶ã®ãµããŒããšããªãã£ã«ã«é¢ããæ³šæ
ããã¯æŠå¿µçãªææ¡ã§ãããããçŸåšãã©ãŠã¶ã®ãµããŒãã¯ãããŸãããããã¯ãCSSã¯ãŒãã³ã°ã°ã«ãŒãã®ãããªæšæºåå£äœã«ãã£ãŠè°è«ãããå¯èœæ§ã®ããå°æ¥ã®æ¹åæ§ã瀺ããŠããŸãããã©ãŠã¶ã®ã³ã¢ã«ã¹ã±ãŒãã¡ã«ããºã ãšã®æ·±ãçµ±åã«ãããããã©ãŒãã³ã¹ã®é«ãããªãã£ã«ãäœæããããšã¯ãäžå¯èœã§ã¯ãªãã«ããŠããéåžžã«å°é£ã§ããçŸå®ãžã®éã¯ã仿§ãè°è«ãããã³ãã©ãŠã¶ãã³ããŒã«ãããã€ãã£ãå®è£ ã䌎ããŸãã
çµè«ïŒåçãªã«ã¹ã±ãŒããåãå ¥ãã
CSSã«ã¹ã±ãŒãã¬ã€ã€ãŒã¯ãã§ã«ãã¹ã¿ã€ã«ã·ãŒãã«ç§©åºãããããããã®åŒ·åãªããŒã«ãæäŸããŠãããŸãããæ¬¡ã®ããã³ãã£ã¢ã¯ããã®ç§©åºã«åçãªã³ã³ããã¹ãèªèã€ã³ããªãžã§ã³ã¹ãæ³šå ¥ããããšã§ããåçãªã¬ã€ã€ãŒåªå 床ãã¬ã³ãããŸãã¯åæ§ã®æŠå¿µã¯ãCSSããã¬ãŒã³ããŒã·ã§ã³ãèšè¿°ããããã®èšèªã§ããã ãã§ãªããUIç¶æ ã管çããããã®æŽç·Žãããã·ã¹ãã ã§ããæªæ¥ãžã®é åçãªäžç«¯ãæäŸããŸãã
ã¹ã¿ã€ãªã³ã°ã«ãŒã«ã®åªå é äœãè£éããã³ãã¬ã³ãã§ããããã«ããããšã§ãææ°ã®Webã¢ããªã±ãŒã·ã§ã³ã®è€éãã«å¯ŸåŠããããã«ããé©åã«è£ åããããããåŒŸåæ§ããããæè»æ§ããããä¿å®å¯èœãªã·ã¹ãã ãæ§ç¯ã§ããŸããã°ããŒãã«ããŒã ããã«ããã©ã³ãããã«ãå°åã®è£œåãæ§ç¯ããå Žåããã®ã¬ãã«ã®å¶åŸ¡ã«ãããã¯ãŒã¯ãããŒãç°¡çŽ åããããã¹ããå éããããŠãŒã¶ãŒäžå¿ã®èšèšã®æ°ããå¯èœæ§ãéãããŸããã«ã¹ã±ãŒãã¯åãªãã«ãŒã«ã®ãªã¹ãã§ã¯ãããŸãããããã¯çããŠããã·ã¹ãã ã§ããåçã«å®è¡ããããã®ããŒã«ãäžããããæãæ¥ãŸããã