CSSã¢ã³ã«ãŒãµã€ãžã³ã°æè¡ãæ·±æãããèŠçŽ å¯žæ³ã¯ãšãªã掻çšããŠã¬ã¹ãã³ã·ãã§ã¢ãããã£ããªã¬ã€ã¢ãŠããå®çŸããŸããã³ã³ããã®ãµã€ãºã«åºã¥ãåçã«å€åããã³ã³ããŒãã³ãã®äœææ¹æ³ãåŠã³ãŸãããã
CSSã¢ã³ã«ãŒãµã€ãžã³ã°ïŒèŠçŽ å¯žæ³ã¯ãšãªã®ç¿åŸ
çµ¶ããé²åããWebéçºã®äžçã«ãããŠãçã«ã¬ã¹ãã³ã·ãã§ã¢ãããã£ããªã¬ã€ã¢ãŠããäœæããããšã¯ãäŸç¶ãšããŠéèŠãªèª²é¡ã§ããã¡ãã£ã¢ã¯ãšãªã¯é·ããç»é¢ãµã€ãºãžã®é©å¿ã®æšæºã§ããããã³ã³ããŒãã³ãã¬ãã«ã®ã¬ã¹ãã³ã·ãæ§ã«å¯Ÿå¿ããã«ã¯äžååã§ããããã§ãCSSã¢ã³ã«ãŒãµã€ãžã³ã°ããç¹ã«èŠçŽ å¯žæ³ã¯ãšãªãšçµã¿åãããããšã§ããããã现ãã匷åãªãœãªã¥ãŒã·ã§ã³ãæäŸããŸãã
ã¡ãã£ã¢ã¯ãšãªã®éçãçè§£ãã
ã¡ãã£ã¢ã¯ãšãªã¯ããã¥ãŒããŒãã®å¹ ãé«ãããã®ä»ã®ããã€ã¹ç¹æ§ã«åºã¥ããŠã¬ã€ã¢ãŠããé©å¿ãããã®ã«éåžžã«åªããŠããŸããããããããŒãžäžã®åã ã®ã³ã³ããŒãã³ãã®å®éã®ãµã€ãºãã³ã³ããã¹ããèªèããŸãããããã«ãããç»é¢å šäœã®ãµã€ãºã蚱容ç¯å²å ã§ãã£ãŠããã³ã³ããŒãã³ãããã®ã³ã³ããå ã§å€§ãããããå°ãããããããç¶æ³ãçºçããå¯èœæ§ããããŸãã
è€æ°ã®ã€ã³ã¿ã©ã¯ãã£ããªãŠã£ãžã§ãããå«ããµã€ãããŒã®ã·ããªãªãèããŠã¿ãŸããããã¡ãã£ã¢ã¯ãšãªã®ã¿ã䜿çšããå Žåãåé¡ããµã€ãããŒãšãã®äžã®ãŠã£ãžã§ããã«éå®ãããŠããã«ãããããããããŒãžå šäœã®ã¬ã€ã¢ãŠãã«åœ±é¿ãäžãããã¬ãŒã¯ãã€ã³ããå®çŸ©ããããåŸãªããããããŸãããCSSã¢ã³ã«ãŒãµã€ãžã³ã°ã«ãã£ãŠå®çŸãããèŠçŽ å¯žæ³ã¯ãšãªã䜿çšãããšããããã®ç¹å®ã®ã³ã³ããŒãã³ããã¿ãŒã²ããã«ãããã¥ãŒããŒãã®ãµã€ãºãšã¯ç¬ç«ããŠãã³ã³ããã®å¯žæ³ã«åºã¥ããŠã¹ã¿ã€ãªã³ã°ã調æŽã§ããŸãã
CSSã¢ã³ã«ãŒãµã€ãžã³ã°ã®ç޹ä»
CSSã¢ã³ã«ãŒãµã€ãžã³ã°ã¯ãèŠçŽ å¯žæ³ã¯ãšãªãŸãã¯ã³ã³ããã¯ãšãªãšããŠãç¥ããã芪ã³ã³ããã®å¯žæ³ã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ããã¡ã«ããºã ãæäŸããŸããããã«ãããçã«ã³ã³ããã¹ããèªèããåšå²ã®ç°å¢ã«ã·ãŒã ã¬ã¹ã«é©å¿ããã³ã³ããŒãã³ããäœæã§ããŸãã
å ¬åŒä»æ§ãšãã©ãŠã¶ã®ãµããŒãã¯ãŸã é²åã®éäžã§ããã仿¥ã§ã¯åæ§ã®æ©èœãå®çŸããããã«ããã€ãã®ãã¯ããã¯ãããªãã£ã«ãå©çšã§ããŸãããããã®ãã¯ããã¯ã¯ãå€ãã®å ŽåãCSS倿°ãšJavaScriptãæŽ»çšããŠã³ã³ããã®ãµã€ãºå€æŽãç£èŠããããã«åå¿ããããšãå«ã¿ãŸãã
ã¢ã³ã«ãŒãµã€ãžã³ã°ãå®è£ ãããã¯ããã¯
ã¢ã³ã«ãŒãµã€ãžã³ã°ãå®è£ ããã«ã¯ããã€ãã®æŠç¥ãååšããããããè€éããããã©ãŒãã³ã¹ããã©ãŠã¶ã®äºææ§ã®ç¹ã§ãã¬ãŒããªãããããŸããæãäžè¬çãªã¢ãããŒãã®ããã€ããã¿ãŠãããŸãããã
1. ResizeObserverã䜿çšããJavaScriptããŒã¹ã®ã¢ãããŒã
ResizeObserver APIã¯ãèŠçŽ ã®ãµã€ãºã®å€æŽãç£èŠããæ¹æ³ãæäŸããŸããResizeObserverãCSS倿°ãšçµã¿åãããŠäœ¿çšããããšã§ãã³ã³ããã®å¯žæ³ã«åºã¥ããŠã³ã³ããŒãã³ãã®ã¹ã¿ã€ãªã³ã°ãåçã«æŽæ°ã§ããŸãã
äŸïŒ
const container = document.querySelector('.container');
const element = document.querySelector('.element');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const width = entry.contentRect.width;
container.style.setProperty('--container-width', `${width}px`);
}
});
resizeObserver.observe(container);
CSSïŒ
.element {
width: 100%;
background-color: #eee;
padding: 1em;
font-size: 16px;
}
.element[style*="--container-width: 300px"] {
font-size: 14px;
}
.element[style*="--container-width: 200px"] {
font-size: 12px;
}
ãã®äŸã§ã¯ãJavaScriptã³ãŒãã.containerèŠçŽ ã®å¹
ãç£èŠããŸããå¹
ã倿Žããããã³ã«ã--container-widthãšããCSS倿°ãæŽæ°ããŸããæ¬¡ã«CSSã¯ã屿§ã»ã¬ã¯ã¿ã䜿çšããŠã--container-width倿°ã®å€ã«åºã¥ããŠ.elementã«ç°ãªããã©ã³ããµã€ãºãé©çšããŸãã
é·æïŒ
- æ¯èŒçç°¡åã«å®è£ ã§ããã
- ã»ãšãã©ã®ã¢ãã³ãã©ãŠã¶ã§åäœããã
çæïŒ
- JavaScriptãå¿ èŠã
- æ³šææ·±ãæé©åããªããšãããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ãããã
2. CSS HoudiniïŒå°æ¥çãªã¢ãããŒãïŒ
CSS Houdiniã¯ãCSSãšã³ãžã³ã®äžéšãå ¬éããäžé£ã®äœã¬ãã«APIãæäŸããéçºè ãã«ã¹ã¿ã æ©èœã§CSSãæ¡åŒµã§ããããã«ããŸãã ãŸã éçºäžã§ãããHoudiniã®Custom Properties and Values APIãLayout APIãPaint APIãšçµã¿åãããããšã§ãå°æ¥çã«ã¯èŠçŽ å¯žæ³ã¯ãšãªã«å¯ŸããŠãã髿§èœã§æšæºåãããã¢ãããŒããæäŸããããšæåŸ ãããŠããŸããã³ã³ããã®ãµã€ãºå€æŽã«åºã¥ããŠèªåçã«æŽæ°ãããå¿ èŠãªå Žåã«ã®ã¿ã¬ã€ã¢ãŠãã®ãªãããŒãããªã¬ãŒããã«ã¹ã¿ã ããããã£ãå®çŸ©ã§ããããšãæ³åããŠã¿ãŠãã ããã
ãã®ã¢ãããŒãã¯ãæçµçã«JavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³ã®å¿ èŠæ§ããªãããã¢ã³ã«ãŒãµã€ãžã³ã°ãå®è£ ããããã®ãããã€ãã£ãã§å¹ççãªæ¹æ³ãæäŸããã§ãããã
é·æïŒ
- ãã€ãã£ããªãã©ãŠã¶ãµããŒãïŒå®è£ ãããã°ïŒã
- JavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³ãããããã©ãŒãã³ã¹ãè¯ãå¯èœæ§ãããã
- çŸåšã®ãã¯ããã¯ãããæè»ã§æ¡åŒµæ§ãé«ãã
çæïŒ
- ãŸã ãã©ãŠã¶ã§åºããµããŒããããŠããªãã
- CSSãšã³ãžã³ã«é¢ããããæ·±ãçè§£ãå¿ èŠã
3. ããªãã£ã«ãšã©ã€ãã©ãª
ããã€ãã®JavaScriptã©ã€ãã©ãªãšããªãã£ã«ã¯ããã€ãã£ããªèŠçŽ å¯žæ³ã¯ãšãªã®åäœããšãã¥ã¬ãŒãããããšã§ãã³ã³ããã¯ãšãªæ©èœãæäŸããããšãç®æããŠããŸãããããã®ã©ã€ãã©ãªã¯ãå€ãã®å ŽåResizeObserverãšå·§åŠãªCSSãã¯ããã¯ã®çµã¿åããã䜿çšããŠãæãŸãã广ãå®çŸããŸãã
ãã®ãããªã©ã€ãã©ãªã®äŸã¯æ¬¡ã®ãšããã§ãïŒ
- EQCSSïŒå®å šãªèŠçŽ ã¯ãšãªæ§æã®æäŸãç®æãã
- CSS Element QueriesïŒå±æ§ã»ã¬ã¯ã¿ãšJavaScriptã䜿çšããŠèŠçŽ ãµã€ãºãç£èŠããã
é·æïŒ
- ãã€ãã£ãã§ãµããŒãããŠããªããã©ãŠã¶ã§ãã仿¥ããã³ã³ããã¯ãšãªã䜿çšã§ããã
çæïŒ
- ãããžã§ã¯ãã«äŸåé¢ä¿ã远å ããã
- ããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ãããã
- ãã€ãã£ããªã³ã³ããã¯ãšãªãå®å šã«ãšãã¥ã¬ãŒãã§ããªãå Žåãããã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
èŠçŽ å¯žæ³ã¯ãšãªã¯ãå¹ åºããŠãŒã¹ã±ãŒã¹ã«é©çšã§ããŸãã以äžã«ããã€ãã®äŸãæããŸãïŒ
1. ã«ãŒãã³ã³ããŒãã³ã
補åããµãŒãã¹ã«é¢ããæ å ±ã衚瀺ããã«ãŒãã³ã³ããŒãã³ããæ³åããŠã¿ãŠãã ãããã¢ã³ã«ãŒãµã€ãžã³ã°ã䜿çšãããšãå©çšå¯èœãªå¹ ã«åºã¥ããŠã«ãŒãã®ã¬ã€ã¢ãŠããšã¹ã¿ã€ãªã³ã°ã調æŽã§ããŸããäŸãã°ãå°ããªã³ã³ããã§ã¯ç»åãšããã¹ããåçŽã«ç©ã¿éãã倧ããªã³ã³ããã§ã¯ãããã䞊ã¹ãŠè¡šç€ºããããšãã§ããŸãã
äŸïŒãã¥ãŒã¹ãµã€ãã§ã¯ãã«ãŒãã衚瀺ãããå ŽæïŒäŸïŒããŒã ããŒãžã®å€§ããªããŒããŒã«ãŒããšãµã€ãããŒã®å°ããªã«ãŒãïŒã«åºã¥ããŠãèšäºã®ã«ãŒããã¶ã€ã³ãç°ãªãå ŽåããããŸãã
2. ããã²ãŒã·ã§ã³ã¡ãã¥ãŒ
ããã²ãŒã·ã§ã³ã¡ãã¥ãŒã¯ãå€ãã®å ŽåãããŸããŸãªç»é¢ãµã€ãºã«é©å¿ããå¿ èŠããããŸããã¢ã³ã«ãŒãµã€ãžã³ã°ã䜿çšãããšãå©çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠã¬ã€ã¢ãŠããåçã«å€æŽããã¡ãã¥ãŒãäœæã§ããŸããäŸãã°ãå¹ ã®çãã³ã³ããã§ã¯ã¡ãã¥ãŒããã³ããŒã¬ãŒã¢ã€ã³ã³ã«æãããã¿ãå¹ ã®åºãã³ã³ããã§ã¯ãã¹ãŠã®ã¡ãã¥ãŒé ç®ãæ°Žå¹³ã«è¡šç€ºããããšãã§ããŸãã
äŸïŒeã³ããŒã¹ãµã€ãã®ããã²ãŒã·ã§ã³ã¡ãã¥ãŒã¯ããã¹ã¯ãããã§ã¯ãã¹ãŠã®ååã«ããŽãªã衚瀺ããŸãããã¢ãã€ã«ããã€ã¹ã§ã¯ããããããŠã³ã¡ãã¥ãŒã«æããããŸããããšããããŸããã³ã³ããã¯ãšãªã䜿çšãããšããã®åäœããã¥ãŒããŒãå šäœã®ãµã€ãºã«é¢ä¿ãªããã³ã³ããŒãã³ãã¬ãã«ã§å¶åŸ¡ã§ããŸãã
3. ã€ã³ã¿ã©ã¯ãã£ããªãŠã£ãžã§ãã
ãã£ãŒããã°ã©ããå°å³ãªã©ã®ã€ã³ã¿ã©ã¯ãã£ããªãŠã£ãžã§ããã¯ããã®ãµã€ãºã«å¿ããŠç°ãªã詳现ã¬ãã«ãå¿ èŠã«ãªãããšããããããŸããã¢ã³ã«ãŒãµã€ãžã³ã°ã䜿çšãããšãã³ã³ããã®å¯žæ³ã«åºã¥ããŠãããã®ãŠã£ãžã§ããã®è€éãã調æŽã§ããŸããäŸãã°ãå°ããªã³ã³ããã§ã¯ãã©ãã«ãåé€ããããããŒã¿ãã€ã³ãã®æ°ãæžããããããŠãã£ãŒããç°¡çŽ åããããšãã§ããŸãã
äŸïŒè²¡åããŒã¿ã衚瀺ããããã·ã¥ããŒãã§ã¯ãå°ããªç»é¢ã§ã¯ç°¡ç¥åãããæãç·ã°ã©ãã衚瀺ãã倧ããªç»é¢ã§ã¯ãã詳现ãªããŒãœã¯è¶³ãã£ãŒãã衚瀺ãããããããŸããã
4. ããã¹ãéã®å€ãã³ã³ãã³ããããã¯
ããã¹ãã®èªã¿ãããã¯ããã®ã³ã³ããã®å¹ ã«å€§ãã圱é¿ãããŸããã¢ã³ã«ãŒãµã€ãžã³ã°ã䜿çšããŠãå©çšå¯èœãªå¹ ã«åºã¥ããŠããã¹ãã®ãã©ã³ããµã€ãºãè¡ã®é«ããæåééã調æŽã§ããŸããããã«ãããã³ã³ããã®ãµã€ãºã«é¢ä¿ãªããããã¹ããåžžã«èªã¿ãããç¶æ ã«ä¿ããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããŸãã
äŸïŒããã°èšäºã§ã¯ãèªè ã®ãŠã£ã³ããŠã®å¹ ã«åºã¥ããŠã¡ã€ã³ã³ã³ãã³ããšãªã¢ã®ãã©ã³ããµã€ãºãšè¡ã®é«ãã調æŽãããŠã£ã³ããŠããªãµã€ãºãããŠãæé©ãªèªã¿ãããã確ä¿ããããšããããŸãã
ã¢ã³ã«ãŒãµã€ãžã³ã°ã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
èŠçŽ å¯žæ³ã¯ãšãªã广çã«æŽ»çšããããã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- ã¢ãã€ã«ãã¡ãŒã¹ãã§å§ããïŒæåã«æå°ã®ã³ã³ãããµã€ãºçšã«ã³ã³ããŒãã³ããèšèšãããã®åŸããã倧ããªãµã€ãºã«åãããŠæ®µéçã«æ¡åŒµããŸãã
- CSS倿°ã䜿çšããïŒCSS倿°ã掻çšããŠã³ã³ããã®å¯žæ³ãä¿åããã³æŽæ°ããŸããããã«ãããã¹ã¿ã€ã«ã®ç®¡çãšä¿å®ã容æã«ãªããŸãã
- ããã©ãŒãã³ã¹ãæé©åããïŒJavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ã«æ³šæããŠãã ããããªãµã€ãºã€ãã³ãããããŠã³ã¹ãŸãã¯ã¹ãããã«ããŠãéå°ãªèšç®ãé¿ããŸãã
- 培åºçã«ãã¹ãããïŒããŸããŸãªããã€ã¹ãç»é¢ãµã€ãºã§ã³ã³ããŒãã³ãããã¹ãããæ£ããé©å¿ããããšã確èªããŸãã
- ã¢ã¯ã»ã·ããªãã£ãèæ ®ããïŒãµã€ãºãã¬ã€ã¢ãŠãã«é¢ä¿ãªããã³ã³ããŒãã³ããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããç¶ããããšãä¿èšŒããŸãã
- ã¢ãããŒããææžåããïŒä»ã®éçºè ãããªãã®ã³ãŒããçè§£ããä¿å®ã§ããããã«ãã¢ã³ã«ãŒãµã€ãžã³ã°æŠç¥ãæç¢ºã«ææžåããŸãã
ã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ã¢ã³ã«ãŒãµã€ãžã³ã°ãå®è£ ããéã«ã¯ã以äžã®èŠçŽ ãèæ ®ããããšãäžå¯æ¬ ã§ãïŒ
- èšèªãµããŒãïŒã³ã³ããŒãã³ããç°ãªãèšèªãããã¹ãã®æ¹åïŒäŸïŒå·Šããå³ãå³ããå·ŠïŒããµããŒãããŠããããšã確èªããŸãã
- å°åå·®ïŒãã¶ã€ã³ã®å¥œã¿ãæåçèŠç¯ã«ãããå°åå·®ãèªèããŸãã
- ã¢ã¯ã»ã·ããªãã£åºæºïŒWCAGïŒWeb Content Accessibility GuidelinesïŒãªã©ã®åœéçãªã¢ã¯ã»ã·ããªãã£åºæºãéµå®ããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒããŸããŸãªãããã¯ãŒã¯ç¶æ³ãããã€ã¹ã®èœåã«åãããŠã³ãŒããæé©åããŸãã
- ãã±ãŒã«ããŸããã§ãã¹ãããïŒããŸããŸãªãã±ãŒã«ã§ã³ã³ããŒãã³ãããã¹ããããµããŒããããŠãããã¹ãŠã®èšèªãšå°åã§æ£ãã衚瀺ãããããšã確èªããŸãã
äŸãã°ãäœæã衚瀺ããã«ãŒãã³ã³ããŒãã³ãã¯ããŠãŒã¶ãŒã®å Žæã«å¿ããŠç°ãªãäœæåœ¢åŒã«é©å¿ããå¿ èŠããããããããŸãããåæ§ã«ãæ¥ä»ããã«ãŒãŠã£ãžã§ããã¯ãç°ãªãæ¥ä»åœ¢åŒãã«ã¬ã³ããŒããµããŒãããå¿ èŠããããããããŸããã
ã¬ã¹ãã³ã·ããã¶ã€ã³ã®æªæ¥
CSSã¢ã³ã«ãŒãµã€ãžã³ã°ã¯ãã¬ã¹ãã³ã·ããã¶ã€ã³ã®é²åã«ãããéèŠãªäžæ©ã衚ããŠããŸããã³ã³ããŒãã³ãããã®ã³ã³ããã®å¯žæ³ã«é©å¿ã§ããããã«ããããšã§ãéçºè ã¯ããæè»ã§åå©çšå¯èœããããŠä¿å®ããããã³ãŒããäœæã§ããŸãã
ãã€ãã£ããªèŠçŽ å¯žæ³ã¯ãšãªã«å¯Ÿãããã©ãŠã¶ã®ãµããŒããåäžããã«ã€ããŠããã®åŒ·åãªãã¯ããã¯ã®ããã«é©æ°çã§åµé çãªäœ¿çšäŸãèŠãããããã«ãªãã§ããããã¬ã¹ãã³ã·ããã¶ã€ã³ã®æªæ¥ã¯ãããã€ã¹ãç»é¢ãµã€ãºã«é¢ä¿ãªããçã«ã³ã³ããã¹ããèªèããåšå²ã®ç°å¢ã«ã·ãŒã ã¬ã¹ã«é©å¿ããã³ã³ããŒãã³ããäœæããããšã«ãããŸãã
çµè«
èŠçŽ å¯žæ³ã¯ãšãªã«ãã£ãŠåŒ·åãããCSSã¢ã³ã«ãŒãµã€ãžã³ã°ã¯ãçã«ã¬ã¹ãã³ã·ãã§ã¢ãããã£ããªWebã³ã³ããŒãã³ããäœæããããã®åŒ·åãªã¢ãããŒããæäŸããŸããæšæºåãšãã€ãã£ããªãã©ãŠã¶ãµããŒãã¯ãŸã é²è¡äžã§ããã仿¥å©çšå¯èœãªãã¯ããã¯ãšããªãã£ã«ã¯ãåæ§ã®æ©èœãå®çŸããããã®å®è¡å¯èœãªãœãªã¥ãŒã·ã§ã³ãæäŸããŸããã¢ã³ã«ãŒãµã€ãžã³ã°ãåãå ¥ããããšã§ãã¬ã€ã¢ãŠãã«å¯Ÿããæ°ããã¬ãã«ã®å¶åŸ¡ãè§£ãæŸã¡ãåã³ã³ããŒãã³ãã®ç¹å®ã®ã³ã³ããã¹ãã«åããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåµåºã§ããŸãã
ã¢ã³ã«ãŒãµã€ãžã³ã°ã®æ ã«ä¹ãåºãéã«ã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãã¢ã¯ã»ã·ããªãã£ãããã©ãŒãã³ã¹ãåªå ããããšãå¿ããªãã§ãã ããããããã®èŠçŽ ãæ éã«èæ ®ããããšã§ãèŠãç®ãçŸããã ãã§ãªããäžçäžã®ãŠãŒã¶ãŒã«ãšã£ãŠæ©èœçã§ã¢ã¯ã»ã¹ããããWebã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã