CSSã³ã³ããã¯ãšãªã§é«åºŠãªã¬ã¹ãã³ã·ããã¶ã€ã³ãå®çŸïŒããªãã£ã«ã䜿ã£ãã¯ãã¹ãã©ãŠã¶å¯Ÿå¿ã®å®è£ æ¹æ³ãåŠã³ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«å¯Ÿå¿ãããã¶ã€ã³ãã
CSSã³ã³ããã¯ãšãªã¡ãã£ã¢æ©èœããªãã£ã«ïŒã¬ã¹ãã³ã·ããã¶ã€ã³ã®ããã®ã¯ãã¹ãã©ãŠã¶ãµããŒã
ãŠã§ãéçºã®äžçã¯çµ¶ããé²åããŠãããããã«äŒŽããããæŽç·Žãããé©å¿æ§ã®é«ããã¶ã€ã³ãœãªã¥ãŒã·ã§ã³ãæ±ããããŠããŸããè¿å¹Žæããšããµã€ãã£ã³ã°ãªéçºã®äžã€ããCSSã³ã³ããã¯ãšãªã®ç»å Žã§ãããããã®ã¯ãšãªã«ãããéçºè ã¯ãã¥ãŒããŒãã ãã§ãªãã*ã³ã³ãã*ã®ãµã€ãºã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ã§ããŸããããã¯ãçã«ã¬ã¹ãã³ã·ãã§ãã€ãããã¯ãªã¬ã€ã¢ãŠããäœæããããã®å šãæ°ããå¯èœæ§ã®é åãéããŸããããããã³ã³ããã¯ãšãªã®ãã©ãŠã¶ãµããŒãã¯ãŸã é²åã®éäžã«ãããŸããããã§ããªãã£ã«ãç»å Žããã¯ãã¹ãã©ãŠã¶ã®äºææ§ã確ä¿ããããã®æ©æž¡ã圹ãšãªããéçºè ã仿¥ã³ã³ããã¯ãšãªã®åãæŽ»çšã§ããããã«ããŸãã
CSSã³ã³ããã¯ãšãªãçè§£ãã
ããªãã£ã«ã«ã€ããŠæ·±ãæãäžããåã«ãCSSã³ã³ããã¯ãšãªã®çè§£ãæ·±ããŸãããããã¥ãŒããŒããµã€ãºïŒãã©ãŠã¶ãŠã£ã³ããŠïŒã«å¿çããåŸæ¥ã®ã¡ãã£ã¢ã¯ãšãªãšã¯ç°ãªããã³ã³ããã¯ãšãªã¯ç¹å®ã®ã³ã³ããèŠçŽ ã®ãµã€ãºã«å¿çããŸããããã¯ãå šäœã®ç»é¢ãµã€ãºã«é¢ä¿ãªãããã倧ããªã¬ã€ã¢ãŠãå ã§ãã®ã³ã³ãã³ããã³ã³ããã¹ãã«é©å¿ããã³ã³ããŒãã³ããäœæã§ãããããéåžžã«åŒ·åã§ãã芪ã³ã³ããã®å©çšå¯èœãªå¹ ã«åºã¥ããŠã¬ã€ã¢ãŠãã倿Žããã«ãŒãã³ã³ããŒãã³ããæ³åããŠã¿ãŠãã ãããã³ã³ãããåºããã°ãã«ãŒãã¯æ å ±ã䞊ã¹ãŠè¡šç€ºããçããã°ãæ å ±ã¯çžŠã«ç©ã¿éãªããããããŸããããã®çš®ã®ã¬ã¹ãã³ã·ãæ§ã¯ãæšæºçãªã¡ãã£ã¢ã¯ãšãªã ãã§ã¯å¹æçã«éæããããšãå°é£ããããã¯äžå¯èœã§ãã
ãã®æŠå¿µã説æããããã®ç°¡åãªäŸã以äžã«ç€ºããŸãïŒ
.container {
width: 100%;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column; /* Default layout */
border: 1px solid #ccc;
padding: 1rem;
margin-bottom: 1rem;
}
@container (min-width: 400px) {
.card {
flex-direction: row; /* Change layout when container is at least 400px wide */
}
}
ãã®äŸã§ã¯ã`card`èŠçŽ ã¯ãã®ã³ã³ããã®å¹ ã«åºã¥ããŠflex-directionïŒãããã£ãŠã¬ã€ã¢ãŠãïŒã倿ŽããŸããã³ã³ããã400pxããåºãå Žåã`card`èŠçŽ ã¯æšªäžåã«äžŠã³ãŸããã³ã³ãããããããçãå Žåã瞊ã«ç©ã¿éãªããŸãã
ã¯ãã¹ãã©ãŠã¶äºææ§ã®èª²é¡
ã³ã³ããã¯ãšãªã¯äž»èŠãªãã©ãŠã¶ã§ãµããŒããããŠããŸããããã®ãµããŒãã¬ãã«ã¯æ§ã ã§ãã2023幎10æ26æ¥çŸåšã仿§ã¯ãŸã éçºäžã§ãããäžéšã®ãã©ãŠã¶ã§ã¯éšåçã«ããå®è£ ãããŠããªãããè§£éãç°ãªãå ŽåããããŸããããã§ããªãã£ã«ãéèŠã«ãªããŸããããªãã£ã«ã¯ããã¹ãŠã®ãã©ãŠã¶ã§ãã€ãã£ãã«ãµããŒããããŠãããšã¯éããªãæ©èœãæäŸããJavaScriptã³ãŒãã®äžéšã§ããã³ã³ããã¯ãšãªã®æèã§ã¯ãããªãã£ã«ã¯ã³ã³ããã¯ãšãªã®åäœããšãã¥ã¬ãŒãããã³ã³ããã¯ãšãªããŒã¹ã®CSSãèšè¿°ããŠãå€ããã©ãŠã¶ããµããŒããäžå®å šãªãã©ãŠã¶ã§ãæ£ããåäœãããããšãã§ããŸãã
ã³ã³ããã¯ãšãªã«ããªãã£ã«ã䜿çšããçç±
- ããåºããªãŒãã£ãšã³ã¹ãžã®ãªãŒãïŒå€ããã©ãŠã¶ã䜿çšããŠãããŠãŒã¶ãŒã«ãå±ããããããåºç¯å²ã®ãã©ãŠã¶ã§ãã¶ã€ã³ãæ£ããã¬ã³ããªã³ã°ãããããšãä¿èšŒããŸãã
- å°æ¥ãžã®åãïŒãã©ãŠã¶ã®ãµããŒããæçããã«ã€ããŠããã³ã³ããã¯ãšãªããŒã¹ã®ãã¶ã€ã³ã®åºç€ãæäŸããŸãã
- äžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ïŒãã€ãã£ããµããŒãã®æç¡ã«ããããããç°ãªããã©ãŠã¶éã§äžè²«æ§ã®ããäºæž¬å¯èœãªãšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
- éçºã®ç°¡çŽ åïŒãã©ãŠã¶ã®äžæŽåãå¿é ããããšãªããææ°ã®ã³ã³ããã¯ãšãªæ§æã䜿çšã§ããŸãã
人æ°ã®CSSã³ã³ããã¯ãšãªããªãã£ã«
ãã©ãŠã¶ãµããŒãã®ã®ã£ãããåããããã«ãããã€ãã®åªããããªãã£ã«ãå©çšå¯èœã§ãã以äžã«æã人æ°ã®ããéžæè¢ãããã€ã玹ä»ããŸãïŒ
1. container-query-polyfill
ããã¯æãåºã䜿çšãããæŽ»çºã«ã¡ã³ããã³ã¹ãããŠããããªãã£ã«ã®äžã€ã§ããå ç¢ãªå®è£ ãæäŸããã³ã³ããã¯ãšãªã®å®å šãã€æ£ç¢ºãªãšãã¥ã¬ãŒã·ã§ã³ãç®æããŠããŸããéåžžãã³ã³ããèŠçŽ ã®ãµã€ãºã宿çã«ãã§ãã¯ããé©åãªã¹ã¿ã€ã«ãé©çšããããšã§æ©èœããŸãããã®ã¢ãããŒãã«ãããå€çš®å€æ§ãªCSSæ©èœãã¬ã€ã¢ãŠããšã®äºææ§ã確ä¿ãããŸãã
ã€ã³ã¹ããŒã« (npmçµç±):
npm install container-query-polyfill
äœ¿çšæ¹æ³:
ã€ã³ã¹ããŒã«åŸãéåžžã¯JavaScriptãã¡ã€ã«ã§ããªãã£ã«ãã€ã³ããŒãããŠåæåããŸãïŒ
import containerQuery from 'container-query-polyfill';
containerQuery();
2. cq-prolyfill
cq-prolyfillãè©äŸ¡ã®é«ãéžæè¢ã§ãããããJavaScriptã䜿çšããŠã³ã³ããèŠçŽ ã®ãµã€ãºãç£èŠãã察å¿ããã¹ã¿ã€ã«ãé©çšããŸãããã®ããã©ãŒãã³ã¹ãšæ£ç¢ºãã§ãã°ãã°è³è³ãããŠããŸãã
ã€ã³ã¹ããŒã« (npmçµç±):
npm install cq-prolyfill
äœ¿çšæ¹æ³:
import cqProlyfill from 'cq-prolyfill';
cqProlyfill();
3. ãã«ãããŒã«ã䜿çšããŠããªãã£ã«é©çšæžã¿ã®CSSãã¡ã€ã«ãçæãã
äžéšã®éçºè ã¯ããã«ãããŒã«ãCSSããªããã»ããµïŒSassãLessãªã©ïŒã䜿çšããŠãããªãã£ã«é©çšæžã¿ã®CSSãã¡ã€ã«ãèªåçã«çæããããšã奜ã¿ãŸãããããã®ããŒã«ã¯CSSãåæããã³ã³ããã¯ãšãªãèå¥ãããã©ãŠã¶éã§åäœããåçã®CSSãçæã§ããŸãããã®ã¢ãããŒãã¯ãããã©ãŒãã³ã¹ãåäžãããéçºã¯ãŒã¯ãããŒãç°¡çŽ åã§ãããããå€§èŠæš¡ãªãããžã§ã¯ãã§ãã°ãã°å¥œãŸããŸãã
ã³ã³ããã¯ãšãªããªãã£ã«ã®å®è£ ïŒã¹ããããã€ã¹ãããã¬ã€ã
ã³ã³ããã¯ãšãªããªãã£ã«ãå®è£ ããç°¡åãªäŸãèŠãŠãããŸãããããã®äŸã§ã¯`container-query-polyfill`ã䜿çšããŸããã€ã³ã¹ããŒã«ãšäœ¿çšæ³ã®è©³çްã¯éžæããããªãã£ã«ã«ãã£ãŠç°ãªãå Žåãããããããã®ç¹å®ã®ããªãã£ã«ã®ããã¥ã¡ã³ããåç §ããããšãå¿ããªãã§ãã ããã
- ã€ã³ã¹ããŒã«:
npmãŸãã¯ã奜ã¿ã®ããã±ãŒãžãããŒãžã£ã䜿çšããŠããªãã£ã«ãã€ã³ã¹ããŒã«ããŸãïŒäžèšã®äŸãåç §ïŒã
- ã€ã³ããŒããšåæå:
ã¡ã€ã³ã®JavaScriptãã¡ã€ã«ïŒäŸïŒ`app.js`ã`index.js`ïŒã§ãããªãã£ã«ãã€ã³ããŒãããŠåæåããŸããããã«ã¯éåžžãããªãã£ã«ãæå¹ã«ããããã®é¢æ°ãåŒã³åºãããšãå«ãŸããŸãã
import containerQuery from 'container-query-polyfill'; containerQuery(); // Initialize the polyfill - ã³ã³ããã¯ãšãªã䜿çšããŠCSSãèšè¿°ãã:
æšæºã®ã³ã³ããã¯ãšãªæ§æã䜿çšããŠCSSãèšè¿°ããŸãã
.card { width: 100%; padding: 1rem; border: 1px solid #ccc; margin-bottom: 1rem; } .card-title { font-size: 1.2rem; font-weight: bold; } @container (min-width: 600px) { .card { display: flex; flex-direction: row; align-items: center; } .card-title { margin-right: 1rem; } } - ç°ãªããã©ãŠã¶ã§ãã¹ããã:
ãã€ãã£ãã®ã³ã³ããã¯ãšãªããµããŒãããŠããªãå¯èœæ§ã®ããå€ãããŒãžã§ã³ãå«ããæ§ã ãªãã©ãŠã¶ã§ãã¶ã€ã³ã培åºçã«ãã¹ãããŸãããã€ãã£ãã§ãµããŒãããŠããªããã©ãŠã¶ã§ããã³ã³ããã¯ãšãªãæåŸ éãã«æ©èœããã¯ãã§ãããã®ããã»ã¹ãå¹çåããç°ãªããã©ãããã©ãŒã ãããã€ã¹ã§ãã¹ãããããã«ãBrowserStackãªã©ã®ãã©ãŠã¶ãã¹ãããŒã«ããµãŒãã¹ã®äœ¿çšãæ€èšããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹ãšèæ ®äºé
ã³ã³ããã¯ãšãªããªãã£ã«ã䜿çšããéã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãå¿ã«çããŠãããŠãã ããïŒ
- ããã©ãŒãã³ã¹ïŒããªãã£ã«ã¯è¿œå ã®JavaScriptåŠçãå°å ¥ããŸããããã©ãŒãã³ã¹ãžã®åœ±é¿ãæå°éã«æããããã«ãCSSãšJavaScriptãæé©åããŠãã ãããéå°ãªåã¬ã³ããªã³ã°ãé²ãããã«ãã€ãã³ããªã¹ããŒã®ãããŠã³ã¹ãã¹ããããªã³ã°ãªã©ã®ãã¯ããã¯ãæ€èšããŠãã ããã
- 詳现床ïŒCSSã®è©³çŽ°åºŠã«æ³šæããŠãã ãããããªãã£ã«ã¯ç¬èªã®ã¹ã¿ã€ã«ãå°å ¥ããããæ¢åã®ã¹ã¿ã€ã«ãæäœãããããå ŽåããããŸããã³ã³ããã¯ãšãªã¹ã¿ã€ã«ããããã©ã«ãã®ã¹ã¿ã€ã«ãæ¢åã®ã¡ãã£ã¢ã¯ãšãªãäžæžãããã®ã«é©åãªè©³çŽ°åºŠãæã£ãŠããããšã確èªããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£ïŒåžžã«ã¢ã¯ã»ã·ããªãã£ãèæ ®ããŠãã ãããã³ã³ããã¯ãšãªãé害ãæã€ãŠãŒã¶ãŒã«æªåœ±é¿ãäžããªãããã«ããŠãã ãããã¹ã¯ãªãŒã³ãªãŒããŒããã®ä»ã®æ¯æŽæè¡ã§ãã¹ãããã³ã³ãã³ããã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ããã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãã«ã€ããŠèããŠãã ãããã³ã³ããã¯ãšãªããªããŠãããŸãæ©èœããåºæ¬ã¹ã¿ã€ã«ããã¶ã€ã³ãããããããµããŒããããã©ãŠã¶ïŒãã€ãã£ããŸãã¯ããªãã£ã«çµç±ïŒã§ãšã¯ã¹ããªãšã³ã¹ãåäžãããããã«ã³ã³ããã¯ãšãªã䜿çšããŸããããã«ããããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠè¯ãäœéšãä¿èšŒãããŸãã
- ãã¹ãïŒç°ãªããã©ãŠã¶ãããã€ã¹ã§å®è£ ã培åºçã«ãã¹ãããŠãã ããããã©ãŠã¶äºææ§ããŒã«ãèªåãã¹ããæåãã¹ãã¯äžå¯æ¬ ã§ããããã¯ãå°åã«ãã£ãŠããã€ã¹ã®å¥œã¿ããã©ãŠã¶ã®äœ¿çšãã¿ãŒã³ãç°ãªãå¯èœæ§ãããã°ããŒãã«ãªèŠæš¡ã§äœæ¥ããå Žåã«ç¹ã«åœãŠã¯ãŸããŸãã
- æ©èœæ€åºãæ€èšããïŒããªãã£ã«ã¯äŸ¿å©ã§ãããæ©èœæ€åºãåãå ¥ããããšãæ€èšãããšããã§ããããæ©èœæ€åºã«ãããã³ã³ããã¯ãšãªããã€ãã£ãã«ãµããŒãããŠããªããã©ãŠã¶ã§ã®ã¿ããªãã£ã«ãéžæçã«ããŒãã§ããŸããããã«ãããææ°ã®ãã©ãŠã¶ã§äžèŠãªããªãã£ã«ã®å®è¡ãé¿ããããšã§ãããã©ãŒãã³ã¹ãããã«æé©åã§ããŸãã
- é©åãªããªãã£ã«ãéžæããïŒããã¡ã³ããã³ã¹ãããæŽ»çºã«ãµããŒããããŠããããããžã§ã¯ãã®ç¹å®ã®ããŒãºã«é©ããããªãã£ã«ãéžæããŠãã ãããããªãã£ã«ã®ãµã€ãºãããã©ãŒãã³ã¹ç¹æ§ãæ©èœã»ãããèæ ®ããŠãã ããã
- ããã¥ã¡ã³ãïŒéžæããããªãã£ã«ã®å ¬åŒããã¥ã¡ã³ããåžžã«åç §ããŠãã ãããåããªãã£ã«ã«ã¯ãç¬èªã®ãã¥ã¢ã³ã¹ãç¹å®ã®äœ¿ç𿹿³ããããŸãã
ã³ã³ããã¯ãšãªã®ãŠãŒã¹ã±ãŒã¹ã®ã°ããŒãã«ãªäŸ
ã³ã³ããã¯ãšãªã¯ãçã«é©å¿æ§ã®ãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã®å€ãã®æ©äŒãéããŸãã以äžã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãã¶ã€ã³ã匷åããããã«ãããã䜿çšããæ¹æ³ã®ããã€ãã®äŸã§ãïŒ
- Eã³ããŒã¹ååãªã¹ãïŒååãªã¹ãã«ãŒãã¯ããã®ã³ã³ããã®å¹ ã«åºã¥ããŠã¬ã€ã¢ãŠããé©å¿ãããããšãã§ããŸããåºãç»é¢ã§ã¯ãååç»åãååãäŸ¡æ Œããã«ãŒãã«è¿œå ããã¿ã³ã䞊ã¹ãŠè¡šç€ºã§ããŸããçãç»é¢ïŒäŸïŒã¢ãã€ã«ããã€ã¹ïŒã§ã¯ãåãæ å ±ã瞊ã«ç©ã¿éãªããããããŸãããããã«ãããããã€ã¹ãç»é¢ãµã€ãºã«é¢ä¿ãªããäžè²«æ§ã®ããæé©åãããäœéšãæäŸãããŸããå°åã«ãã£ãŠããã€ã¹ã®äœ¿çšãã¿ãŒã³ãç°ãªãå¯èœæ§ããããããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãã¿ãŒã²ãããšããEã³ããŒã¹ãµã€ãã¯ããããã倧ããªæ©æµãåããããšãã§ããŸãã
- ããã°æçš¿ã®ã¬ã€ã¢ãŠãïŒããã°æçš¿ã®ã¬ã€ã¢ãŠãã¯ãã³ã³ããã®å¹ ã«åºã¥ããŠã¡ã€ã³ã³ã³ãã³ããšãªã¢ãšãµã€ãããŒã®å¹ ã調æŽã§ããŸããã³ã³ãããåºãå Žåããµã€ãããŒã¯ã¡ã€ã³ã³ã³ãã³ãã®æšªã«è¡šç€ºãããŸããã³ã³ãããçãå Žåããµã€ãããŒã¯ã¡ã€ã³ã³ã³ãã³ãã®äžã«æããããŸããå¯èœæ§ããããŸããããã¯ãå€èšèªããã°ã«ãšã£ãŠç¹ã«äŸ¿å©ã§ãããŸããŸãªç»é¢ãµã€ãºã§æé©ãªå¯èªæ§ãå¯èœã«ããŸãã
- ããã²ãŒã·ã§ã³ã¡ãã¥ãŒïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒã¯ããã®ã³ã³ããã®å¹ ã«é©å¿ã§ããŸããåºãç»é¢ã§ã¯ãã¡ãã¥ãŒé ç®ã¯æ°Žå¹³ã«è¡šç€ºããããããããŸãããçãç»é¢ã§ã¯ããã³ããŒã¬ãŒã¡ãã¥ãŒãåçŽã«ç©ã¿éãããããªã¹ãã«æããããŸãããããããŸãããããã¯ãèšèªãã¡ãã¥ãŒé ç®ã®æ°ã«é¢ä¿ãªãããã¹ãŠã®ããã€ã¹ã§å¹æçã«æ©èœããã¬ã¹ãã³ã·ããªããã²ãŒã·ã§ã³äœéšãäœæããããã«äžå¯æ¬ ã§ãã
- ããŒã¿ããŒãã«ïŒããŒã¿ããŒãã«ã¯ããã¬ã¹ãã³ã·ãã«ãªããŸããå°ããªç»é¢ã§åã«ãªãŒããŒãããŒãã代ããã«ãããŒãã«ã¯é©å¿ã§ããŸããå©çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠåãé衚瀺ã«ããããäžŠã¹æ¿ãããããããšãã§ããŸããããã«ãããéèŠãªããŒã¿ãããã€ã¹ãåããã¢ã¯ã»ã¹å¯èœã§èªã¿ãããç¶æ ã«ä¿ãããŸããç°ãªãæåãããŒãã«å ã®ããŒã¿ãã©ã®ããã«èŠããããŸãã¯åªå é äœãä»ããããèæ ®ããŠãã ããã
- å€èšèªã³ã³ãã³ããããã¯ïŒè€æ°ã®èšèªã®ããã¹ããå«ããããã¯ã¯ãã³ã³ããã®å¹ ã«åºã¥ããŠã¹ã¿ã€ã«èšå®ã§ããŸããåºãã³ã³ããã§ã¯ãç°ãªãèšèªã®ããã¹ãã䞊ã¹ãŠè¡šç€ºã§ããŸããçãã³ã³ããã§ã¯ãããã¹ããç©ã¿éããããšãã§ããŸãã
ãããã¯ã»ãã®æ°äŸã§ããå¯èœæ§ã¯äºå®äžç¡éã§ããã³ã³ããã¯ãšãªã¯ããã¶ã€ããŒãçã«ã¬ã¹ãã³ã·ãã§é©å¿æ§ã®ããã³ã³ããŒãã³ããäœæããããšãå¯èœã«ããã©ãã«ããŠããã¹ãŠã®äººã«ãšã£ãŠããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
ã³ã³ããã¯ãšãªã«ãããã¢ã¯ã»ã·ããªãã£ã®èæ ®äºé
ã³ã³ããã¯ãšãªãå®è£ ããéã«ã¯ãã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãäžå¯æ¬ ã§ãã以äžã«çæãã¹ãéèŠãªç¹ãããã€ã瀺ããŸãïŒ
- ã»ãã³ãã£ãã¯HTMLïŒã³ã³ãã³ããæ§é åããããã«ã»ãã³ãã£ãã¯HTMLèŠçŽ ã䜿çšããŸããããã¯ãã¹ã¯ãªãŒã³ãªãŒããŒããã®ä»ã®æ¯æŽæè¡ãããŒãžã®æ§é ãçè§£ããã®ã«åœ¹ç«ã¡ãŸãã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ïŒãã¿ã³ããªã³ã¯ããã©ãŒã ãã£ãŒã«ãïŒãããŒããŒãã䜿çšããŠãã©ãŒã«ã¹å¯èœã§ããã²ãŒãå¯èœã§ããããšã確èªããŠãã ããã
- è²ã®ã³ã³ãã©ã¹ãïŒç¹ã«èŠèŠé害ã®ãããŠãŒã¶ãŒã®ããã«ãããã¹ããšèæ¯ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ãã䜿çšããŠèªã¿ãããã確ä¿ããŠãã ãããWCAGïŒãŠã§ãã³ã³ãã³ãã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ïŒã®ã¬ã€ãã©ã€ã³ãèæ ®ããŠãã ããã
- ç»åã®ä»£æ¿ããã¹ãïŒãã¹ãŠã®ç»åã«èª¬æçãªä»£æ¿ããã¹ãïŒaltããã¹ãïŒãæäŸããŠãã ãããããã¯ãç»åãèŠãããšãã§ããªããŠãŒã¶ãŒã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ARIA屿§ïŒARIAïŒAccessible Rich Internet ApplicationsïŒå±æ§ã䜿çšããŠãæ¯æŽæè¡ã«è¿œå ã®ã»ãã³ãã£ãã¯æ å ±ãæäŸããŸããARIAã¯æ§ããã«ãå¿ èŠãªå Žåã«ã®ã¿äœ¿çšããŠãã ãããåãã¿ã¹ã¯ãéæã§ãããã€ãã£ãã®HTMLèŠçŽ ãããå Žåã¯ãARIAã®äœ¿çšãé¿ããŠãã ããã
- æ¯æŽæè¡ã§ã®ãã¹ãïŒã¹ã¯ãªãŒã³ãªãŒããŒãç»é¢æ¡å€§é¡ããã®ä»ã®æ¯æŽæè¡ã§ãŠã§ããµã€ãããã¹ããããã¹ãŠã®ãŠãŒã¶ãŒãã¢ã¯ã»ã¹ã§ããããšã確èªããŠãã ããã
- ã¬ã¹ãã³ã·ããªãã©ã³ããµã€ãºãšã¹ããŒã·ã³ã°ïŒããã¹ããšã¹ããŒã·ã³ã°ãã¬ã¹ãã³ã·ãã§ãããã³ã³ãããµã€ãºã«åºã¥ããŠé©åã«èª¿æŽãããããšã確èªããŠãã ãããåºå®ãã©ã³ããµã€ãºãé¿ãããã©ã³ããµã€ãºã«ã¯çžå¯ŸåäœïŒäŸïŒremãemïŒã䜿çšããŠãã ããã
- è«ççãªãããŒïŒã³ã³ãããµã€ãºã倿ŽãããŠããã³ã³ãã³ãã®ãããŒãè«ççã§çè§£ãããããŸãŸã§ããããšã確èªããŠãã ããããŠãŒã¶ãŒãæ··ä¹±ãããå¯èœæ§ã®ããã³ã³ãã³ãã®å€§å¹ ãªäžŠã¹æ¿ãã¯é¿ããŠãã ãããç°ãªãç»é¢ãµã€ãºãåãã§ãããŒããã¹ãããŠãã ããã
ä»åŸã®å±æïŒã³ã³ããã¯ãšãªã®æªæ¥
ã³ã³ããã¯ãšãªã¯ãã¬ã¹ãã³ã·ããŠã§ããã¶ã€ã³ã«ããã倧ããªåé²ã衚ããŠããŸãã仿§ãæçãããã©ãŠã¶ã®ãµããŒããããåºç¯ã«ãªãã«ã€ããŠãã³ã³ããã¯ãšãªã¯ãã€ãããã¯ã§é©å¿æ§ã®ãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã®äžå¯æ¬ ãªããŒã«ã«ãªãã§ããããããªãã£ã«ã®ç¶ç¶çãªéçºã¯ãç§»è¡æéã«ãããŠäžå¯æ¬ ã§ãããéçºè ãåºç¯ãªäºææ§ã確ä¿ããªãã仿¥ã³ã³ããã¯ãšãªã®åãæŽ»çšããããšãå¯èœã«ããŸãããŠã§ããã¶ã€ã³ã®æªæ¥ã¯ééããªãã³ã³ãããæèãããã®ã§ãããã³ã³ããã¯ãšãªã®æ¡çšïŒããã³é©åãªããªãã£ã«ã®äœ¿çšïŒã¯ãã®æ¹åãžã®éèŠãªäžæ©ã§ãã
ææ°ã®ãã©ãŠã¶ã¢ããããŒããšä»æ§ã«æ³šç®ããŠãã ãããã³ã³ããã¯ãšãªã®æ©èœã¯æ¡å€§ãç¶ãããŠã§ããã¶ã€ã³ã®ãã¬ãŒã³ããŒã·ã§ã³ãšåäœã«å¯ŸããŠããã«å€§ããªå¶åŸ¡ãæäŸããŸãã
çµè«
CSSã³ã³ããã¯ãšãªã¯ãç§ãã¡ãã¬ã¹ãã³ã·ããŠã§ããã¶ã€ã³ã«åãçµãæ¹æ³ã«é©åœãããããæºåãã§ããŠããŸãããã©ãŠã¶ã®ãµããŒãã¯ãŸã é²åäžã§ãããå ç¢ãªããªãã£ã«ãå©çšå¯èœã§ãããããéçºè ã¯ä»æ¥ã³ã³ããã¯ãšãªã®åãæŽ»çšã§ããŸããããªãã£ã«ã®å©ããåããŠã³ã³ããã¯ãšãªãå®è£ ããããšã§ãçã«ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ããã«ãããé©å¿æ§ãé«ããããã©ãŒãã³ã¹ãè¯ãããŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ããµã€ããäœæã§ããŸãããã®æè¡ãåãå ¥ãããã®å¯èœæ§ã詊ããããããç»é¢ãµã€ãºãšã³ã³ããã¹ãã«çŸããå¿çãããã¶ã€ã³ãå®çŸããŠãã ããããã¹ãŠã®äººã«ãšã£ãŠããžãã£ãã§å æ¬çãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããããã«ãã¢ã¯ã»ã·ããªãã£ãåªå ããããŸããŸãªãã©ãŠã¶ãããã€ã¹ã§åŸ¹åºçã«ãã¹ãããããšãå¿ããªãã§ãã ããã