CSS Grid Level 4ã®ãã¯ãŒãè§£ãæŸã¡ãŸãããïŒé«åºŠãªã¬ã€ã¢ãŠãæ©èœãšé 眮ãã¯ããã¯ãæ¢æ±ããã°ããŒãã«ãªèŠèŽè åãã«æŽç·Žãããã¬ã¹ãã³ã·ãWebãã¶ã€ã³ãäœæããŸãããµãã°ãªãããã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠããªã©ãåŠã³ãŸãããã
CSS Grid Level 4: é«åºŠãªã¬ã€ã¢ãŠããšé 眮ã®ç¿åŸ
CSS Gridã¯Webã¬ã€ã¢ãŠãã«é©åœããããããæ¯é¡ã®ãªãå¶åŸ¡ãšæè»æ§ãæäŸããŸããCSS Grid Level 1ãš2ã¯ç¢ºåºããåºç€ãæäŸããŸããããCSS Grid Level 4ã¯ã¬ã€ã¢ãŠããã¶ã€ã³ã次ã®ã¬ãã«ã«åŒãäžãããšããµã€ãã£ã³ã°ãªæ°æ©èœãå°å ¥ããŸãããã®ã¬ã€ãã§ã¯ããããã®é«åºŠãªæ©èœã«ã€ããŠæãäžããæŽç·Žãããã¬ã¹ãã³ã·ãã§ãã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ããµã€ããäœæããããã«ããããã©ã®ããã«äœ¿çšã§ãããã«çŠç¹ãåœãŠãŸããäž»èŠãªæŠå¿µãæ¢æ±ããããã€ã¹ãèšèªãåããã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã€ã¢ãŠããæ§ç¯ã§ãããããå®è·µçãªäŸãæäŸããçã®ã°ããŒãã«ãªèŠç¹ãåæ ãããŸãã
åºç€ã®çè§£ïŒç°¡åãªåŸ©ç¿
Level 4ã«é£ã³èŸŒãåã«ãCSS Gridã®ã³ã¢ã³ã³ã»ããã«ã€ããŠã®çè§£ãå確èªããŸããããGridã¯ã³ã³ããèŠçŽ ã« display: grid ãŸã㯠display: inline-grid ãèšå®ããããšã§å®çŸ©ãããŸãããã®ã³ã³ããå
ã§ãgrid-template-columns ã grid-template-rows ã®ãããªããããã£ã䜿çšããŠè¡ãšåãå®çŸ©ã§ããŸããã°ãªããã³ã³ããå
ã«é
眮ãããã¢ã€ãã ã¯ã°ãªããã¢ã€ãã ãšãªããgrid-column-startãgrid-column-endãgrid-row-startãgrid-row-end ãªã©ã®ããããã£ã䜿çšããŠé
眮ããµã€ãºãå¶åŸ¡ã§ããŸãããŸããã°ãªããã¢ã€ãã éã®ééãå¶åŸ¡ããããã« grid-gapïŒä»¥åã® grid-column-gap ããã³ grid-row-gapïŒã®ãããªããããã£ã䜿çšããŸãããããã®åºç€çãªæŠå¿µã¯ãLevel 4ã®é²æ©ãçè§£ããããã«äžå¯æ¬ ã§ãã
äŸãã°ãååãªã¹ãã®ã·ã³ãã«ãªã¬ã€ã¢ãŠããèããŠã¿ãŸãããïŒ
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.product-item {
border: 1px solid #ccc;
padding: 10px;
}
ããã«ããã3ã€ã®çå¹ ã®åãæã€ã°ãªãããäœæãããŸããåååã¢ã€ãã ã¯ãã®ã°ãªããå ã«é 眮ãããèŠèŠçã«é åçã§æŽçããã衚瀺ãçãŸããŸãããããã®åºæ¬ååã¯ãããé«åºŠãªæ©èœãçè§£ããããã«äžå¯æ¬ ã§ãã
CSS Grid Level 4: æ°ããªå°å¹³
CSS Grid Level 4ã¯ããŸã éçºäžã§ããã倿Žã®å¯èœæ§ããããŸãããæ¢åã®ã°ãªããæ©èœã匷åãªæ°æ©èœã§åŒ·åããããšãçŽæããŠããŸãããã©ãŠã¶ã®ãµããŒãã¯é²åããŠããŸããããããã®æ©èœãçè§£ããããšã¯ãå°æ¥ã®ã¬ã€ã¢ãŠãã«åãããã¶ã€ã³ã®å¯èœæ§ãäºæž¬ããããã«éèŠã§ããæãéèŠãªåŒ·åç¹ã®ããã€ããæ¢ã£ãŠã¿ãŸãããã
1. ãµãã°ãªããïŒã°ãªããã®ç°¡åãªãã¹ã
ãµãã°ãªããã¯ãééããªãLevel 4ã§å°å ¥ãããæã圱é¿åã®ããæ©èœã§ããããã«ãããã°ãªãããå¥ã®ã°ãªããå ã«ãã¹ããã芪ã°ãªããã®ãã©ãã¯ãµã€ãºïŒè¡ãšåïŒãç¶æ¿ããããšãã§ããŸããããã«ãããæåã§ãµã€ãºãåèšç®ããå¿ èŠããªããªããè€éãªã¬ã€ã¢ãŠããå€§å¹ ã«ç°¡çŽ åãããŸãããã¹ããããã°ãªããã®è¡ãšåãæåã§å®çŸ©ãã代ããã«ããµãã°ãªããã¯èŠªã°ãªãããããµã€ãžã³ã°ã®æããããåŸãŠãé 眮ãšäžè²«æ§ãç¶æããŸãã
ä»çµã¿ã¯æ¬¡ã®ãšããã§ãããŸããéåžžã©ãã芪ã°ãªãããäœæããŸããæ¬¡ã«ããã¹ããããã°ãªããïŒãµãã°ãªããïŒã«å¯Ÿã㊠`display: grid` ãèšå®ãã`grid-template-columns: subgrid;` ãŸã㯠`grid-template-rows: subgrid;` ã䜿çšããŸãããããšããµãã°ãªããã¯ãã®è¡ããã³/ãŸãã¯åã芪ã°ãªããã®ãã©ãã¯ã«åãããŸãã
äŸïŒãµãã°ãªããã䜿çšããã°ããŒãã«ããã²ãŒã·ã§ã³ã¡ãã¥ãŒ
ããŽãåžžã«æåã®åãå ããã¡ãã¥ãŒé ç®ãæ®ãã®ã¹ããŒã¹ã«åçã«åæ£ããããŠã§ããµã€ãã®ããã²ãŒã·ã§ã³ã¡ãã¥ãŒãæ³åããŠã¿ãŠãã ãããããã²ãŒã·ã§ã³å ã«ã¯ã芪ã®ããã²ãŒã·ã§ã³ã°ãªãããšå®å šã«æŽåããå¿ èŠããããµãã¡ãã¥ãŒé ç®ããããŸããããã¯ãµãã°ãªããã«ãšã£ãŠçæ³çãªã·ããªãªã§ãã
.navigation {
display: grid;
grid-template-columns: 1fr repeat(3, 1fr);
grid-gap: 10px;
align-items: center; /* Vertically centers items */
}
.logo {
grid-column: 1;
}
.menu-items {
display: grid;
grid-column: 2 / -1; /* Spans across the remaining columns */
grid-template-columns: subgrid; /* Inherits parent grid's track sizing */
grid-gap: 10px;
/* Further styling for menu items */
}
.menu-item {
/* Styling for menu item */
}
ãã®äŸã§ã¯ã`menu-items` èŠçŽ ããµãã°ãªããã«ãªãããã®èŠªã§ãã `.navigation` ã°ãªããã®åæ§é ãåŒãç¶ããŸããããã«ãããã¬ã€ã¢ãŠãã®ç®¡çãã¯ããã«ç°¡åã«ãªããã¬ã¹ãã³ã·ãã«ãªããç»é¢ãµã€ãºã«é¢ä¿ãªãã¡ãã¥ãŒé ç®ãçŸããæŽåããããšãä¿èšŒãããŸãããµãã°ãªããã¯ãèšèªã«ãã£ãŠããã¹ãã®é·ããç°ãªãåœéçãªãŠã§ããµã€ãã«ãšã£ãŠç¹ã«åŒ·åã§ãããèªå調æŽã«ãã£ãŠã¬ã€ã¢ãŠãã®æžå¿µãç°¡çŽ åãããŸãã
2. ã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠã (`grid-template-columns: masonry`çµç±)
ã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠãã¯ãã¢ã€ãã ãåã«é 眮ãããŸãããé«ããç°ãªãããšã§èŠèŠçã«è峿·±ããããã广ãçã¿åºã人æ°ã®ãããã¶ã€ã³ãã¿ãŒã³ã§ãç»åã®ã£ã©ãªãŒãã³ã³ãã³ããã£ãŒãã§ããèŠãããŸããCSS Grid Level 4ã§ã¯ãã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠãã®ãã€ãã£ããµããŒããææ¡ããããšã§ãå€§å¹ ãªæ¹åãå°å ¥ãããŸãããã®æ©èœã¯ãŸã 掻çºã«éçºäžã§ããã倿Žãããå¯èœæ§ããããŸãããå°æ¥ã®èœåã®åŒ·åãªææšãšãªããŸãã
åŸæ¥ãã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠããå®è£ ããã«ã¯JavaScriptã©ã€ãã©ãªãè€éãªåé¿çãå¿ èŠã§ããã`grid-template-columns: masonry` ã®å€ã䜿çšãããšãçè«çã«ã¯ã°ãªããã³ã³ããã«ã¢ã€ãã ãåã«é 眮ããããã«æç€ºããå©çšå¯èœãªã¹ããŒã¹ã«åºã¥ããŠèªåçã«é 眮ããããšãã§ããŸããåã°ãªããã¢ã€ãã ã¯æãé«ãã®äœãåã«é 眮ãããç¹åŸŽçãªãã³ã€ãªå€èгãäœæãããŸãã
äŸïŒåºæ¬çãªã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠãïŒæŠå¿µç - å®è£ ã¯é²åäžïŒ
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Use auto-fit/minmax for responsive columns */
grid-template-rows: masonry; /* Masonry magic. This is the core of the feature! */
grid-gap: 20px;
}
.masonry-item {
/* Styling for masonry items, e.g., images, content */
background-color: #eee;
padding: 10px;
}
ã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠãã®æ£ç¢ºãªæ§æãšåäœã¯ãŸã é²åäžã§ããã`grid-template-rows: masonry` ã®å°å ¥ã¯ãWebã¬ã€ã¢ãŠãæ©èœã«ããã倧ããªäžæ©ã瀺ããŠããŸããåœéçãªãŠã§ããµã€ããžã®åœ±é¿ãæ³åããŠã¿ãŠãã ãããæ§ã ãªèšèªã®ããã¹ãã®é·ãã«å¿ããŠã³ã³ãã³ãã®é«ããèªåçã«ç®¡çããããšã§ããã¶ã€ã³ããã»ã¹ãå€§å¹ ã«ç°¡çŽ åãããããèŠèŠçã«é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒãããŸãã
3. ãããªãåºæãµã€ãžã³ã°ã®åŒ·åïŒæ¢åæ©èœã®ãããªãæŽç·ŽïŒ
CSS Grid Level 4ã¯ã`min-content`ã`max-content`ã`fit-content`ã`auto` ãªã©ã®åºæãµã€ãžã³ã°ããŒã¯ãŒãã®åŒ·åãæäŸããå¯èœæ§ããããŸãããããã®ããŒã¯ãŒãã¯ãã°ãªãããã©ãã¯ã®ãµã€ãºããã®äžã®ã³ã³ãã³ãã«åºã¥ããŠå®çŸ©ããã®ã«åœ¹ç«ã¡ãŸãã
min-content: ã³ã³ãã³ãããªãŒããŒãããŒããã«åãããšãã§ããæå°ãµã€ãºãæå®ããŸããmax-content: ã³ã³ãã³ããæãè¿ããã«è¡šç€ºããããã«å¿ èŠãªãµã€ãºãæå®ããŸããfit-content(length): ã³ã³ãã³ãã«åºã¥ããŠãµã€ãºãå¶éããæå€§ãµã€ãºãæå®ããŸããauto: ãã©ãŠã¶ã«ãµã€ãºã®èšç®ãèš±å¯ããŸãã
ãããã®æ©èœã¯åã ã«ã¯ããŸãæ©èœããŸãããæ©èœåŒ·åã«ããããã倧ããªæè»æ§ãšå¶åŸ¡ãæäŸãããå¯èœæ§ããããŸããäŸãã°ããã®ææ¡ã«ã¯ãåºæãµã€ãžã³ã°ã `fr` ãŠãããïŒåæ°åäœïŒãªã©ã®ä»ã®ã°ãªããããããã£ãšã©ã®ããã«çžäºäœçšãããã«ã€ããŠã®æ¹è¯ãå«ãŸããå¯èœæ§ããããŸããããã«ãããéçºè ã¯ã°ãªããå ã§ã³ã³ãã³ããã©ã®ããã«æ¡å€§ã»çž®å°ããããããã«çްããå¶åŸ¡ã§ããããã«ãªãã倿§ãªèšèªãã³ã³ãã³ãã®é·ãã«å¯Ÿå¿ããã¬ã¹ãã³ã·ããã¶ã€ã³ã«äžå¯æ¬ ã§ãã
4. é 眮ãšäž¡ç«¯æãã®æ¹å
CSS Gridã¯å ç¢ãªé 眮æ©èœãæäŸããŸãããLevel 4ã§ã¯æ¹è¯ãå°å ¥ãããå¯èœæ§ããããŸããããã«ã¯ãããçŽæçãªé 眮ãªãã·ã§ã³ãäŸãã°äº€å·®è»žã«æ²¿ã£ãŠã¢ã€ãã ãããé«ã粟床ã§äž¡ç«¯æããé 眮ããæ©èœãªã©ãå«ãŸããå¯èœæ§ããããŸãããããªãéçºã¯ããªãŒããŒãããŒããã³ã³ãã³ãããã广çã«åŠçããèœåã«çŠç¹ãåœãŠãå¯èœæ§ãé«ããç°ãªããã©ãŠã¶ãã¬ã³ããªã³ã°ãšã³ãžã³éã§ã®äžè²«æ§ã確ä¿ããŸããäŸãã°ãå€èšèªãŠã§ããµã€ãã«ãããããã¹ãã®é çœ®ã¯æéèŠã§ããCSS Grid level 4ã¯ãç°ãªãããã¹ãæ¹åã®æ±ãã容æã«ããWebãã¶ã€ã³ãã°ããŒãã«ãªèŠèŽè ã«ããé©å¿ãããããããŸãã
å®è·µçãªå®è£ ïŒã°ããŒãã«ãªèæ ®äºé
é«åºŠãªCSS Gridæ©èœã䜿çšããŠèšèšããéã«ã¯ãã°ããŒãã«ãªèšèšååãšåœéåããã³å°ååã®ãã¥ã¢ã³ã¹ãèæ ®ããããšãäžå¯æ¬ ã§ãã
1. ã¬ã¹ãã³ã·ããã¶ã€ã³ïŒç»é¢ãµã€ãºãšèšèªãžã®é©å¿
ã¬ã¹ãã³ã·ããã¶ã€ã³ã¯ãã¯ãéžæè¢ã§ã¯ãªããçŸä»£ã®ãŠã§ããµã€ãã«ãšã£ãŠåºæ¬çãªèŠä»¶ã§ãããµãã°ãªãããé«åºŠãªã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠãã®å¯èœæ§ã®ãããªCSS Grid Level 4ã®æ©èœã¯ãããæè»ã§é©å¿æ§ã®ãããã¶ã€ã³ãå¯èœã«ããŸããã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãããŸããŸãªç»é¢ãµã€ãºã«åãããŠã¬ã€ã¢ãŠãã調æŽãããã¹ãŠã®ããã€ã¹ã§ã³ã³ãã³ããèªã¿ããããã¢ã¯ã»ã¹ããããç¶æ ãä¿ã€ããã«ããŠãã ãããç°ãªãèšèªã®æåã®é·ããæ§ã ã§ããããšãèæ ®ããŠãã ãããäŸãã°ãäžéšã®èšèªã¯åãæå³ã衚çŸããã®ã«ä»ã®èšèªãããã¯ããã«å€ãã®æåã䜿çšããå ŽåããããŸãããããã®éãã«å¯Ÿå¿ããããã«ã¯æè»æ§ãéµãšãªããŸãã
äŸïŒãµãã°ãªããã䜿çšããã¬ã¹ãã³ã·ãã°ãªãã
@media (max-width: 768px) {
.navigation {
grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
}
.menu-items {
grid-column: 1; /* Take up the full width */
grid-template-columns: subgrid; /* Subgrid inherits layout. Menu items stack vertically too */
}
}
ãã®äŸã§ã¯ãã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãå°ããªç»é¢ã§ããã²ãŒã·ã§ã³ãæ°Žå¹³ã¬ã€ã¢ãŠãããåçŽã¬ã€ã¢ãŠãã«å€æããŸãããµãã°ãªããã«ããã`menu-items` å ã®ã¡ãã¥ãŒé ç®ãäžè²«ããé 眮ãç¶æããç»é¢ãµã€ãºã«é¢ä¿ãªãããã²ãŒã·ã§ã³ã䜿ãããããªããŸããã¬ã€ã¢ãŠããæ©èœããèŠãç®ã«ãçŸããããšã確èªããããã«ãããŸããŸãªãã©ãŠã¶ãããã€ã¹ãèšèªã§ãã¹ãããããšãå¿ããªãã§ãã ããã
2. ã¢ã¯ã»ã·ããªãã£ïŒã°ããŒãã«ãªèŠèŽè ã®ããã®ãã¶ã€ã³
Webã¢ã¯ã»ã·ããªãã£ã¯ãã°ããŒãã«ãªèŠèŽè ã«ãªãŒãããããã®éèŠãªèæ ®äºé ã§ããã¬ã€ã¢ãŠããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããã»ãã³ãã£ãã¯HTMLã䜿çšããç»åã«altããã¹ããæäŸããååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ããŠãã ãããCSS Gridã§ã¯ã³ã³ãã³ããèŠèŠçã«äžŠã¹æ¿ããããšãã§ããããã¯ã¢ã¯ã»ã·ããªãã£ã«åœ¹ç«ã¡ãŸãããã¹ã¯ãªãŒã³ãªãŒããŒã®ããã«è«ççãªèªã¿é ãç¶æããããã«æ³šæããŠãã ããããŸããæåçèæ¯ããŠãŒã¶ãŒã®ãã¶ã€ã³ã®èªèãæäœæ¹æ³ã«åœ±é¿ãäžããå¯èœæ§ãããããšãèŠããŠãããŠãã ãããããã«ã¯ãåœéèšèªããã³åœå èšèªã®ãã¹ãŠã®ç°ãªãèŠçŽ ã«ããã£ãŠæ©èœãæ€èšŒããããã®åŸ¹åºçãªãã¹ããå¿ èŠã§ãã
3. å³ããå·ŠãžïŒRTLïŒã®èšèª
ã¢ã©ãã¢èªãããã©ã€èªã®ããã«å³ããå·ŠãžïŒRTLïŒæžãããèšèªããµããŒããããŠã§ããµã€ãã§ã¯ãRTLãµããŒããæ£ããå®è£ ããããšãéèŠã§ããCSS Gridã¯ãã®ããã»ã¹ãç°¡çŽ åããŸãã`` ãŸã㯠`
` èŠçŽ ã« `direction: rtl;` ããããã£ã䜿çšãããšãã°ãªããã¬ã€ã¢ãŠããèªåçã«é©å¿ããŸããç©ççãªããããã£ïŒ`grid-column-start: right` ãªã©ïŒãããè«ççãªãããã㣠`grid-column-start`ã`grid-column-end` ãªã©ãæšå¥šãããããšãèŠããŠãããŠãã ãããããã¯ã`grid-column-start: 1` ãLTRïŒå·Šããå³ïŒãšRTLã®äž¡æ¹ã®ã³ã³ããã¹ãã§å é ã«çãŸãããšãæå³ããŸããCSSè«çããããã£ãªã©ã®ããŒã«ã¯ããããªãå¶åŸ¡ãæäŸããåœéåã®åãçµã¿ãå¹çåã§ããŸããäŸïŒç°¡åãªRTLé©å¿
html[dir="rtl"] {
direction: rtl;
}
ãã®ç°¡åãªCSSã¹ããããã¯ãHTMLã« `dir="rtl"` 屿§ã远å ããããšãã«ããŒãžãRTLã¢ãŒãã§ã¬ã³ããªã³ã°ãããããšãä¿èšŒããŸããCSS Gridã¯åãšè¡ã®å転ãèªåçã«åŠçããããããã®é©å¿ã¯ã·ãŒã ã¬ã¹ã«ãªããŸãããã¶ã€ã³ãæ£ããæ©èœããã³ã³ãã³ããæåŸ ã©ããã«è¡šç€ºãããããšã確èªããããã«ãRTLã¬ã€ã¢ãŠããåžžã«åŸ¹åºçã«ãã¹ãããŠãã ãããæ£ããå®è£ ã¯ãããžãã£ããªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒã§ããŸãã
4. ã³ã³ãã³ãã®ãªãŒããŒãããŒãšããã¹ãã®æ¹å
åœéçãªã³ã³ãã³ããæ±ãå Žåãããã¹ãã®é·ãã®å€åã«åããŠãã ãããäžéšã®èšèªã®ã³ã³ãã³ãã¯ãä»ã®èšèªãããå€§å¹ ã«é·ããªãããšããããŸããã¬ã€ã¢ãŠããã³ã³ãã³ãã®ãªãŒããŒãããŒãé©åã«åŠçã§ããããã«ããŠãã ãããå¿ èŠã«å¿ã㊠`overflow: hidden`ã`overflow: scroll`ããŸã㯠`overflow: auto` ã䜿çšããŸãããŸããwhite-spaceã®æãè¿ããtext-overflowããããã£ã远å ããããšãæ€èšããŠãã ãããã³ã³ãã³ãã®ããã¹ãæ¹åïŒLTRãŸãã¯RTLïŒã¯äžå¯æ¬ ã§ãã`direction` ããã³ `text-align` ããããã£ã䜿çšããŠãããã¹ããæ£ããã¬ã³ããªã³ã°ããŠãã ããã
5. æ¥ä»ãæå»ãæ°å€ã®ããŒã«ã©ã€ãº
æ¥ä»ãæå»ãæ°å€ã¯åœãæåã«ãã£ãŠåœ¢åŒãç°ãªããŸãããŠã§ããµã€ããæ¥ä»ãæå»ããŸãã¯æ°å€ããŒã¿ã衚瀺ããå Žåã¯ãé©åãªããŒã«ã©ã€ãºææ³ã䜿çšããããã«ããŠãã ãããããã«ã¯ãå€ãã®å ŽåãJavaScriptã©ã€ãã©ãªããã©ãŠã¶APIã䜿çšããŠããŠãŒã¶ãŒã®ãã±ãŒã«ã«å¿ããŠããŒã¿ããã©ãŒãããããããšãå«ãŸããŸããç°ãªãé貚ãšãã®äœ¿çšåœ¢åŒãèæ ®ããããšã¯ãåœéåã«ãããéèŠãªã¹ãããã§ãã
ã°ããŒãã«ãã¶ã€ã³ã®ãã¹ããã©ã¯ãã£ã¹
以äžã¯ãCSS Grid Level 4ã䜿çšããŠã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ããµã€ããäœæããããã®ãã¹ããã©ã¯ãã£ã¹ã®æŠèŠã§ãïŒ
- äºåã®èšç»ïŒ ãã¶ã€ã³ããã»ã¹ã®æåãããŠã§ããµã€ãã®åœéåãæ éã«æ€èšããŠãã ããã
- ã»ãã³ãã£ãã¯HTMLã®äœ¿çšïŒ ã»ãã³ãã£ãã¯HTMLèŠçŽ ïŒäŸïŒ `
`ã` - ã¢ã¯ã»ã·ããªãã£ã®åªå ïŒ é害ãæã€ãŠãŒã¶ãŒãããŸããŸãªããã€ã¹ãæ¯æŽæè¡ãèæ ®ããŠãã¢ã¯ã»ã·ããªãã£ã念é ã«çœ®ããŠèšèšããŠãã ããã
- ã¬ã¹ãã³ã·ãæ§ã®æ¡çšïŒ ããŸããŸãªç»é¢ãµã€ãºãåããããã€ã¹æ©èœã«é©å¿ããã¬ã€ã¢ãŠããæ§ç¯ããŠãã ããã
- RTLèšèªã®ãµããŒãïŒ CSSã® `direction` ããããã£ãšã¬ã€ã¢ãŠãçšã®è«çããããã£ã䜿çšããŠRTLãµããŒããå®è£ ããŠãã ããã
- ã³ã³ãã³ããªãŒããŒãããŒã®åŠçïŒ ããã¹ãã®æ¹åãå«ããé·ãããã¹ãããªãŒããŒãããŒãé©åã«åŠçããã¬ã€ã¢ãŠããèšèšããŠãã ããã
- ããŒã¿ã®ããŒã«ã©ã€ãºïŒ ããŒã«ã©ã€ãºæè¡ã䜿çšããŠãæ¥ä»ãæå»ãæ°å€ãæ£ãããã©ãŒãããããŠãã ããã
- 培åºçãªãã¹ãïŒ ããŸããŸãªãã©ãŠã¶ãããŸããŸãªããã€ã¹ãããŸããŸãªèšèªã§ãŠã§ããµã€ãããã¹ãããæ£ããæ©èœããããšã確èªããŠãã ãããèšèšã§ã¯ãåžžã«ã¢ã¯ã»ã·ããªãã£ã®åé¡ãèæ ®ãã察åŠããããåªããŠãã ããã
- ææ°æ å ±ã®ææ¡ïŒ CSS GridãšWebæè¡ã®ææ°ã®é²æ©ã«ã€ããŠåžžã«æ å ±ãå ¥æããŠãã ããã
- ãã£ãŒãããã¯ã®åéïŒ å€æ§ãªæåçèæ¯ãæã€ãŠãŒã¶ãŒãããã£ãŒãããã¯ãåŸãŠãã ããã
çµè«ïŒWebã¬ã€ã¢ãŠãã®æªæ¥
CSS Grid Level 4ã¯ãWebã¬ã€ã¢ãŠãã®æªæ¥ã«å¯Ÿãã説åŸåã®ããããžã§ã³ãæäŸããŸããç¹ã«ãµãã°ãªãããé²åããã¡ã€ãœã³ãªãŒã¬ã€ã¢ãŠãã®ãµããŒããšãã£ãé«åºŠãªæ©èœã¯ãæŽç·Žããããã¬ã¹ãã³ã·ãã§ãã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ããµã€ããäœæããããã®åŒ·åãªããŒã«ãæäŸããŸããäžéšã®æ©èœã®ãã©ãŠã¶ãµããŒãã¯ãŸã éçºäžã§ãããä»ãããã®æŠå¿µãšå¯èœæ§ã«æ £ã芪ããçµ¶å¥œã®æ©äŒã§ããCSS Grid Level 4ãæçããã«ã€ããŠãããå°ãªãã³ãŒãã§è€éãªã¬ã€ã¢ãŠããäœæããèœåããããŠå€æ§ãªã³ã³ãã³ãããŠãŒã¶ãŒã®ããŒãºã«å¯Ÿå¿ããããã®æè»æ§ã®åäžã¯ãWebéçºè ãã°ããŒãã«èŠæš¡ã§åè¶ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæ§ç¯ããåãäžãç¶ããã§ãããã
ãããã®æ°æ©èœãåãå ¥ãããã¶ã€ã³ãšéçºã®å®è·µã«ãããŠã°ããŒãã«ãªèŠç¹ãæ¡çšããããšã§ãèŠèŠçã«çŸããã ãã§ãªããèæ¯ãå Žæã«é¢ä¿ãªãããã¹ãŠã®äººã«ãšã£ãŠçã«å æ¬çã§ã¢ã¯ã»ã¹ãããããŠã§ããµã€ããäœæããããšãã§ããŸãã