ã¬ã€ã¢ãŠãã®äœæãšã¡ã³ããã³ã¹ãå¹çåãããCSS Gridã®åŒ·åãªæ©èœã§ããæé»çãªååä»ãã©ã€ã³ãæ¢æ±ããŸããæé»çãªåœåãCSSãç°¡çŽ åããã°ããŒãã«ãªãŠã§ãéçºã«ãããå¯èªæ§ãåäžãããæ¹æ³ãåŠã³ãŸãã
CSS Gridã®æé»çãªååä»ãã©ã€ã³ã®æŽ»çšïŒã¬ã€ã¢ãŠãã®ç°¡çŽ å
CSS Gridã¯ãŠã§ãã¬ã€ã¢ãŠãã«é©åœããããããæ¯é¡ã®ãªãå¶åŸ¡ãšæè»æ§ãæäŸããŸããã°ãªããã©ã€ã³ãæç€ºçã«å®çŸ©ããããšã¯éåžžã«åŒ·åã§ãããCSS Gridã¯ããå¹ççãªã¢ãããŒããæäŸããŸãããããæé»çãªååä»ãã©ã€ã³ã§ãããã®æ©èœã¯ãã°ãªãããã©ãã¯åã«åºã¥ããŠã©ã€ã³åãèªåçã«çæããCSSãç°¡çŽ åããå¯èªæ§ãåäžãããŸããããã¯ãæç€ºçãªã©ã€ã³åãç¶æããããšãç ©éã«ãªãå¯èœæ§ã®ããå€§èŠæš¡ã§è€éãªãããžã§ã¯ãã«ç¹ã«åœ¹ç«ã¡ãŸãã
CSS Gridã®åºæ¬ãçè§£ãã
æé»çãªååä»ãã©ã€ã³ã«å
¥ãåã«ãCSS Gridã®åºæ¬ãç°¡åã«åŸ©ç¿ããŸããããCSS Gridã¬ã€ã¢ãŠãã¯ãã°ãªããã³ã³ãããšã°ãªããã¢ã€ãã ã§æ§æãããŸããã°ãªããã³ã³ããã¯ãgrid-template-columnsãgrid-template-rowsãªã©ã®ããããã£ã䜿çšããŠã°ãªããæ§é ãå®çŸ©ããŸããã°ãªããã¢ã€ãã ã¯ãgrid-column-startãgrid-column-endãgrid-row-startãããã³grid-row-endãªã©ã®ããããã£ã䜿çšããŠããã®ã°ãªããå
ã«é
眮ãããŸãã
äž»ãªã°ãªããããããã£ïŒ
grid-template-columnsïŒã°ãªããã®åãå®çŸ©ããŸããgrid-template-rowsïŒã°ãªããã®è¡ãå®çŸ©ããŸããgrid-template-areasïŒååä»ãã°ãªãããšãªã¢ã䜿çšããŠã°ãªããã¬ã€ã¢ãŠããå®çŸ©ããŸããgrid-column-gapïŒåéã®ã®ã£ãããæå®ããŸããgrid-row-gapïŒè¡éã®ã®ã£ãããæå®ããŸããgrid-gapïŒgrid-row-gapãšgrid-column-gapã®çç¥åœ¢ã§ããgrid-column-startïŒã°ãªããã¢ã€ãã ã®éå§åã©ã€ã³ãæå®ããŸããgrid-column-endïŒã°ãªããã¢ã€ãã ã®çµäºåã©ã€ã³ãæå®ããŸããgrid-row-startïŒã°ãªããã¢ã€ãã ã®éå§è¡ã©ã€ã³ãæå®ããŸããgrid-row-endïŒã°ãªããã¢ã€ãã ã®çµäºè¡ã©ã€ã³ãæå®ããŸãã
æé»çãªååä»ãã©ã€ã³ãšã¯ïŒ
æé»çãªååä»ãã©ã€ã³ã¯ãgrid-template-columnsãšgrid-template-rowsã§ã°ãªãããã©ãã¯ïŒè¡ãšåïŒã«å²ãåœãŠãååã«åºã¥ããŠãCSS Gridã«ãã£ãŠèªåçã«äœæãããŸããã°ãªãããã©ãã¯ã«ååãä»ãããšãCSS Gridã¯2ã€ã®æé»çãªååä»ãã©ã€ã³ãäœæããŸãã1ã€ã¯ãã©ãã¯ã®éå§æã«ããã1ã€ã¯çµäºæã«äœæãããŸãããããã®ã©ã€ã³ã®ååã¯ããã©ãã¯åããæŽŸçãããããã-startãš-endããã¬ãã£ãã¯ã¹ãšããŠä»å ãããŸãã
ããšãã°ãsidebarãšããååã®åãã©ãã¯ãå®çŸ©ãããšãCSS Gridã¯èªåçã«2ã€ã®æé»çãªååä»ãã©ã€ã³ãäœæããŸããsidebar-startãšsidebar-endã§ãããããã®ã©ã€ã³ã¯ãã°ãªããã¢ã€ãã ãé
眮ããããã«äœ¿çšã§ããã©ã€ã³çªå·ãŸãã¯ã«ã¹ã¿ã ã©ã€ã³åãæç€ºçã«å®çŸ©ããå¿
èŠããªããªããŸãã
æé»çãªååä»ãã©ã€ã³ã䜿çšããå©ç¹
æé»çãªååä»ãã©ã€ã³ã¯ãåŸæ¥ã®ã°ãªããã¬ã€ã¢ãŠãæè¡ãããããã€ãã®å©ç¹ããããŸãã
- CSSã®ç°¡çŽ åïŒæé»çãªååä»ãã©ã€ã³ã¯ãå¿ èŠãªCSSã³ãŒãã®éãæžãããã¹ã¿ã€ã«ã·ãŒããããã¯ãªãŒã³ã§ãããç°¡åã«ã¡ã³ããã³ã¹ã§ããããã«ããŸãã
- å¯èªæ§ã®åäžïŒæå³ã®ãããã©ãã¯åãšæé»çãªã©ã€ã³ã䜿çšããããšã§ãã°ãªããã¬ã€ã¢ãŠããèªå·±ææžåãããçè§£ãããããªããŸããããã¯ãã³ãŒãã®æç¢ºããæéèŠãšãªãã倿§ãªèšèªã¹ãã«ãæã€ã°ããŒãã«ããŒã ãšã®å ±åäœæ¥ã«äžå¯æ¬ ã§ãã
- ãšã©ãŒã®åæžïŒèªåã©ã€ã³åçæã«äŸåããããšã§ãã°ãªããå®çŸ©ã§ã®ã¿ã€ããäžæŽåã®ãªã¹ã¯ãæå°éã«æããããšãã§ããŸãã
- æè»æ§ã®åäžïŒæé»çãªååä»ãã©ã€ã³ã䜿çšãããšã倿°ã®ã©ã€ã³çªå·ãŸãã¯ã«ã¹ã¿ã ã©ã€ã³åãæŽæ°ããããšãªããã°ãªããã¬ã€ã¢ãŠããç°¡åã«å€æŽã§ããŸãã
æé»çãªååä»ãã©ã€ã³ã®å®çšçãªäŸ
æé»çãªååä»ãã©ã€ã³ã䜿çšããŠäžè¬çãªã¬ã€ã¢ãŠããã¿ãŒã³ãäœæããæ¹æ³ã瀺ãããã«ãããã€ãã®å®çšçãªäŸãæ€èšããŸãããã
äŸ1ïŒåºæ¬çãª2åã¬ã€ã¢ãŠã
ãµã€ãããŒãšã¡ã€ã³ã³ã³ãã³ãé åãæã€ã·ã³ãã«ãª2åã¬ã€ã¢ãŠããèããŠã¿ãŸãããã
.container {
display: grid;
grid-template-columns: [sidebar] 200px [main] 1fr;
}
.sidebar {
grid-column: sidebar;
}
.main-content {
grid-column: main;
}
ãã®äŸã§ã¯ãæåã®åãã©ãã¯ã«sidebarã2çªç®ã®åãã©ãã¯ã«mainãšããååãä»ããŸãããCSS Gridã¯ãèªåçã«æ¬¡ã®æé»çãªååä»ãã©ã€ã³ãäœæããŸãã
sidebar-startïŒsidebaråã®å é ïŒsidebar-endïŒsidebaråã®æ«å°Ÿãããã³mainåã®å é ïŒmain-startïŒmainåã®å é ãsidebar-endãšåçïŒmain-endïŒmainåã®æ«å°ŸïŒ
次ã«ããããã®æé»çãªååä»ãã©ã€ã³ã䜿çšããŠã.sidebarãš.main-contentèŠçŽ ãé
眮ã§ããŸããåèªäœã®ååïŒäŸïŒ`grid-column: sidebar;`ïŒãã`grid-column: sidebar-start / sidebar-end;`ã®çç¥åœ¢ãšããŠäœ¿çšã§ããããšã«æ³šæããŠãã ãããããã¯åŒ·åãªç°¡çŽ åã§ãã
äŸ2ïŒããããŒãã³ã³ãã³ããããã³ããã¿ãŒã®ã¬ã€ã¢ãŠã
ããããŒãã³ã³ãã³ãé åãããã³ããã¿ãŒãæã€ãããè€éãªã¬ã€ã¢ãŠããäœæããŸãããã
.container {
display: grid;
grid-template-rows: [header] auto [content] 1fr [footer] auto;
grid-template-columns: [full-width] 1fr;
}
.header {
grid-row: header;
grid-column: full-width;
}
.content {
grid-row: content;
grid-column: full-width;
}
.footer {
grid-row: footer;
grid-column: full-width;
}
ããã§ã¯ãè¡ãã©ãã¯ã«headerãcontentãfooterãšããååãä»ããåãã©ãã¯ã«full-widthãšããååãä»ããŸãããããã«ãããæ¬¡ã®æé»çãªååä»ãã©ã€ã³ãçæãããŸãã
header-startheader-endcontent-startcontent-endfooter-startfooter-endfull-width-startfull-width-end
ããã§ãããããã®æé»çãªååä»ãã©ã€ã³ã䜿çšããŠãããããŒãã³ã³ãã³ããããã³ããã¿ãŒèŠçŽ ãã°ãªããå ã«ç°¡åã«é 眮ã§ããŸãã
äŸ3ïŒç¹°ãè¿ãã®ãã©ãã¯ãæã€è€éãªè€æ°åã¬ã€ã¢ãŠã
ç¹ã«ç¹°ãè¿ãã®ãã¿ãŒã³ãå«ããããè€éãªã¬ã€ã¢ãŠãã§ã¯ãæé»çãªååä»ãã©ã€ã³ãç䟡ãçºæ®ããŸãããµã€ãããŒãã¡ã€ã³ã³ã³ãã³ãé åãããã³äžé£ã®èšäºã»ã¯ã·ã§ã³ãå«ãã¬ã€ã¢ãŠããèããŠã¿ãŸãããã
.container {
display: grid;
grid-template-columns: [sidebar] 200px [content] 1fr;
grid-template-rows: [header] auto [article] auto [footer] auto;
}
.sidebar {
grid-column: sidebar;
grid-row: header / footer;
}
.content {
grid-column: content;
grid-row: header / footer;
}
.header {
grid-column: sidebar / content;
grid-row: header;
}
.article {
grid-column: sidebar / content;
grid-row: article;
}
.footer {
grid-column: sidebar / content;
grid-row: footer;
}
ãã®äŸã¯ãæé»çãªååä»ãã©ã€ã³ãç¹ã«ãã©ãã¯åã䜿çšããçç¥åœ¢ãšçµã¿åãããå Žåã«ãè€æ°ã®è¡ãšåã«ãŸãããèŠçŽ ã®é 眮ãã©ã®ããã«å€§å¹ ã«ç°¡çŽ åã§ãããã瀺ããŠããŸããæ°å€ã®ä»ããã©ã€ã³ã ãã§ãã®ã¬ã€ã¢ãŠãã管çããããšãæ³åããŠã¿ãŠãã ããïŒ
æé»çãªååä»ãã©ã€ã³ãšæç€ºçãªã©ã€ã³åã®çµã¿åãã
æé»çãªååä»ãã©ã€ã³ã¯ãããã«æè»æ§ãé«ããããã«ãæç€ºçã«å®çŸ©ãããã©ã€ã³åãšçµã¿åãããŠäœ¿çšã§ããŸãããã©ãã¯åã«å ããŠãã«ã¹ã¿ã ã©ã€ã³åãå®çŸ©ããŠãã°ãªããã¬ã€ã¢ãŠãå ã®ç¹å®ã®ã©ã€ã³ãã¿ãŒã²ããã«ããããšãã§ããŸãã
.container {
display: grid;
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
}
.sidebar {
grid-column: sidebar;
}
.main-content {
grid-column: main;
}
ãã®äŸã§ã¯ãsidebaråã®éå§ã©ã€ã³ã«sidebar-startãçµäºã©ã€ã³ã«sidebar-endãšããååãæç€ºçã«ä»ããŸããããŸããmainåã®éå§ã©ã€ã³ã«main-startãçµäºã©ã€ã³ã«main-endãšããååãä»ããŸãããsidebar-endãšmain-startãåãã°ãªããã©ã€ã³ã«å²ãåœãŠãããšã«æ³šæããŠãã ãããããã«ãããæé»çãªååä»ãã©ã€ã³ã®å©ç¹ã掻çšããªãããã°ãªããã¬ã€ã¢ãŠãããã现ããå¶åŸ¡ã§ããŸãã
æé»çãªååä»ãã©ã€ã³ã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
æé»çãªååä»ãã©ã€ã³ã®å©ç¹ãæå€§éã«æŽ»çšããã«ã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšããŠãã ããã
- 説æçãªãã©ãã¯åã䜿çšããïŒåã°ãªããé åã®ã³ã³ãã³ããŸãã¯æ©èœãæ£ç¢ºã«åæ ãããã©ãã¯åãéžæããŸããããã«ãããCSSã®å¯èªæ§ãåäžããçè§£ãããããªããŸããã°ããŒãã«ãªèŠèŽè ã®ããã«ãããŸããŸãªèšèªã§ç°¡åã«ç¿»èš³ãŸãã¯çè§£ã§ããååãåªå ããŸãã
- äžè²«æ§ãç¶æããïŒã°ãªãããã©ãã¯ãšæé»çãªã©ã€ã³ã«äžè²«ããåœåèŠåã䜿çšããŸããããã«ãããæ··ä¹±ãé²ããã°ãªããã¬ã€ã¢ãŠããäºæž¬å¯èœã«ä¿ã€ããšãã§ããŸãã
- é床ã«è€éãªã¬ã€ã¢ãŠããé¿ããïŒæé»çãªååä»ãã©ã€ã³ã¯è€éãªã¬ã€ã¢ãŠããç°¡çŽ åã§ããŸãããã°ãªããæ§é ãã§ããã ãåçŽã«ä¿ã€ããšãéèŠã§ããé床ã«è€éãªã¬ã€ã¢ãŠãã¯ãã¡ã³ããã³ã¹ãšãããã°ãå°é£ã«ãªãå¯èœæ§ããããŸããå€§èŠæš¡ãªã¬ã€ã¢ãŠãããããå°ããããã管çããããã³ã³ããŒãã³ãã«åå²ããããšãæ€èšããŠãã ããã
- 培åºçã«ãã¹ãããïŒä»ã®CSSææ³ãšåæ§ã«ãããŸããŸãªãã©ãŠã¶ãããã€ã¹ã§ã°ãªããã¬ã€ã¢ãŠãã培åºçã«ãã¹ãããããšãéèŠã§ããã¬ã€ã¢ãŠããæ£ããã¬ã³ããªã³ã°ãããããŸããŸãªç»é¢ãµã€ãºã«å¯Ÿå¿ããŠããããšã確èªããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
CSS Gridã䜿çšããå Žåã¯ãã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãéèŠã§ããæ¬¡ã®ã¬ã€ãã©ã€ã³ã«åŸã£ãŠãã°ãªããã¬ã€ã¢ãŠããé害ã®ãããŠãŒã¶ãŒã«ã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ããã
- ã»ãã³ãã£ãã¯HTMLãæäŸããïŒã»ãã³ãã£ãã¯HTMLèŠçŽ ã䜿çšããŠãã³ã³ãã³ããè«ççã«æ§é åããŸããããã«ãããæ¯æŽæè¡ãããŒãžã®æ§é ãçè§£ããã®ã«åœ¹ç«ã¡ãŸãã
- é©åãªããŒããŒãããã²ãŒã·ã§ã³ã確ä¿ããïŒãŠãŒã¶ãŒãããŒããŒãã䜿çšããŠã°ãªããã¬ã€ã¢ãŠããããã²ãŒãã§ããããã«ããŸãã
tabindex屿§ã䜿çšããŠãèŠçŽ ã®ãã©ãŒã«ã¹é åºãå¶åŸ¡ããŸãã - ç»åã«ä»£æ¿ããã¹ããæäŸããïŒã°ãªããã¬ã€ã¢ãŠãå ã®ãã¹ãŠã®ç»åã«ã説æçãªä»£æ¿ããã¹ããå«ããŸããããã«ãããèŠèŠé害ã®ãããŠãŒã¶ãŒãç»åã®ã³ã³ãã³ããçè§£ããã®ã«åœ¹ç«ã¡ãŸãã
- ARIA屿§ã䜿çšããïŒARIA屿§ã䜿çšããŠãæ¯æŽæè¡ã«ã°ãªããã¬ã€ã¢ãŠãã®æ§é ãšåäœã«é¢ããè¿œå æ å ±ãæäŸããŸãã
äžè¬çãªèœãšã穎ãšãã®åé¿æ¹æ³
æé»çãªååä»ãã©ã€ã³ã«ã¯å€ãã®å©ç¹ããããŸãããæ³šæãã¹ãæœåšçãªèœãšã穎ãããã€ããããŸãã
- ãã©ãã¯åã®èª€åïŒãã©ãã¯åã®åçŽãªèª€åã¯ãã°ãªããã¬ã€ã¢ãŠãå šäœãå£ãå¯èœæ§ããããŸãããšã©ãŒãåé¿ããããã«ããã©ãã¯åãæ³šææ·±ãå確èªããŠãã ããã
- ååã®ç«¶åïŒèª€ã£ãŠ2ã€ã®ç°ãªããã©ãã¯ã«åãååã䜿çšããå Žåã¯ãCSS Gridã¯æåã®ãã©ãã¯ã®ã¿ãèªèããŸãããã¹ãŠã®ãã©ãã¯åãäžæã§ããããšã確èªããŠãã ããã
- æé»çãªååä»ãã©ã€ã³ã®éå°äœ¿çšïŒæé»çãªååä»ãã©ã€ã³ã¯CSSãç°¡çŽ åã§ããŸãããããããæ éã«äœ¿çšããããšãéèŠã§ããéåžžã«è€éãªã¬ã€ã¢ãŠãã®å Žåãæç€ºçãªã©ã€ã³åãŸãã¯ã°ãªãããšãªã¢ã䜿çšããæ¹ãé©åã§ããå ŽåããããŸãã
倿§ãªæ¥çããã®å®éã®äŸ
æé»çãªååä»ãã©ã€ã³ã¯ãããŸããŸãªæ¥çããã³ãŠã§ããµã€ãã¿ã€ãã«é©çšã§ããŸãã以äžã«ããã€ãã®äŸã瀺ããŸãã
- Eã³ããŒã¹ïŒã°ããŒãã«ãªããŒã«ïŒïŒããŸããŸãªç»é¢ãµã€ãºã«é©å¿ããååã®ç»åã説æãäŸ¡æ ŒãèŠèŠçã«é åçãªæ¹æ³ã§è¡šç€ºããæè»ãªååã°ãªãããäœæããŸããæé»çãªååä»ãã©ã€ã³ã¯ãããŸããŸãªå°åãèšèªã«ãããããŸããŸãªååæ å ±é·ã®ã¬ã€ã¢ãŠãã管çããã®ã«åœ¹ç«ã¡ãŸãã
- ãã¥ãŒã¹ãŠã§ããµã€ãïŒåœéã¡ãã£ã¢ïŒïŒèŠåºããèšäºãç»åããµã€ãããŒãåããè€éãªãã¥ãŒã¹ã¬ã€ã¢ãŠããæ§é åããŸããæé»çãªååä»ãã©ã€ã³ã䜿çšããŠãããŒãžã®ããŸããŸãªã»ã¯ã·ã§ã³ãå®çŸ©ããããã«å¿ããŠã³ã³ãã³ããé 眮ã§ãããããããŸããŸãªããã€ã¹ã¿ã€ããšå°åéã§äžè²«æ§ã確ä¿ã§ããŸãã
- ããã°ïŒå€èšèªã³ã³ãã³ãïŒïŒã¿ã€ãã«ãã³ã³ãã³ããç»åãäœæè æ å ±ãå«ãããã°èšäºãæŽçããŸããããŸããŸãªã³ã³ãã³ãã®é·ããç»åãµã€ãºã«åãããŠã¬ã€ã¢ãŠããç°¡åã«èª¿æŽã§ããå³ããå·Šãžã®èšèªã«ã察å¿ã§ããŸãã
- ããã·ã¥ããŒãïŒã°ããŒãã«åæïŒïŒãã£ãŒããã°ã©ããããŒã¿ããŒãã«ãåããã¬ã¹ãã³ã·ãããã·ã¥ããŒããäœæããŸããæé»çãªååä»ãã©ã€ã³ã¯ãããŸããŸãªããã·ã¥ããŒãèŠçŽ ãè«ççãã€èŠèŠçã«é åçãªæ¹æ³ã§é 眮ããã®ã«åœ¹ç«ã¡ãè€éãªããŒã¿ãæ±ãåœéããŒã ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
çµè«ïŒå¹ççãªã°ãªããã¬ã€ã¢ãŠãã®ããã®æé»çãªååä»ãã©ã€ã³ã®æ¡çš
CSS Gridã®æé»çãªååä»ãã©ã€ã³ã¯ãè€éãªãŠã§ãã¬ã€ã¢ãŠããäœæããã³ç¶æããããã®åŒ·åãã€å¹ççãªæ¹æ³ãæäŸããŸãããã©ãã¯åã«åºã¥ããŠã©ã€ã³åãèªåçã«çæããããšã«ãããCSSãç°¡çŽ åããå¯èªæ§ãåäžããããšã©ãŒã®ãªã¹ã¯ã軜æžã§ããŸãããããã®ææ³ãæ¡çšããèŠèŽè ã®ã°ããŒãã«ãªèŠç¹ãèæ ®ããããšã§ãäžçäžã®ãŠãŒã¶ãŒã«å¯ŸããŠãããã¢ã¯ã»ã¹ãããããä¿å®æ§ãé«ããé åçãªãŠã§ããšã¯ã¹ããªãšã³ã¹ãäœæã§ããŸãããã®æ©èœãã¯ãŒã¯ãããŒã«çµã¿èŸŒãã§ãçç£æ§ãåäžãããããå ç¢ã§ä¿å®æ§ã®é«ããŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæããããšãæ€èšããŠãã ãããæç¢ºãªåœåèŠåãšåŸ¹åºçãªãã¹ããåªå ããŠãã¬ã€ã¢ãŠãã倿§ãªã°ããŒãã«ãªèŠèŽè ã«ãšã£ãŠæ©èœçãã€ã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ããã