CSS Nite in Kobe, vol.55ãã¢ãã³ã³ãŒãã£ã³ã°ïŒXDã§äœãããããŒã¿ãå ã«å®è£ å·¥çšã®ã»ããã³ãºãªã³ãã«åå ããŠããŸãã

å
æ¥éå¬ãããCSS Nite in Kobe vol.55ãã¢ãã³ã³ãŒãã£ã³ã°ïŒXDã§äœãããããŒã¿ãå
ã«å®è£
å·¥çšã®ã»ããã³ãºãªã³ãã«åå ããŠããŸããã
vol.54ã®ç¶ãã§ãååã«äœæããããžã¥ã¢ã«ãã¶ã€ã³ãå
ã«ãã³ãŒãã£ã³ã°ãè¡ã£ãŠãããŸãã
ä»åã®ç»å£è
ç»å£è
ã¯æ ªåŒäŒç€ŸICSã®é¹¿é 壮ããã§ãã
ICS MEDIAã§ãæ°å€ãã®èšäºãæžããŠããã€ã³ã¿ã©ã¯ã·ã§ã³ãã¶ã€ããŒã®æ¹ã§ãã
ä»åã¯XDã§ã§ããããžã¥ã¢ã«ãã¶ã€ã³ã確èªããªãããXDã§é²è¡ãããŠã§ããµã€ãå¶äœãããŒ3åã®ãã¡ã®æåŸã®åã§ããã
- vol.53ãXDã§ã¯ã€ã€ãŒãã¬ãŒã ã»ãããã¿ã€ãã®äœæã
- vol.54ãã¯ã€ã€ãŒãã¬ãŒã ãããšã«XDã§ããžã¥ã¢ã«ãã¶ã€ã³ã®äœæã
- vol.55ãXDã§äœãããããŒã¿ãå ã«ã³ãŒãã£ã³ã°ã
XDã§ã¯ç°¡åã«ãããã¿ã€ãã¢ãŒãã§ã¢ãã¡ãŒã·ã§ã³ãä»ãããã§ããŸãããæçµçã«å®è£
ãããšãã¯ã³ãŒãã§å®è£
ããå¿
èŠããããŸãã
ãŸãããã¶ã€ã³æã«ãã£ããã¢ã»ããæ©èœã䜿ã£ãŠäŸ¿å©ã«ç®¡çããŠãããšããŠããã³ãŒãã£ã³ã°åŽãç¥ããã«å®è£
ããŠããŠã¯ããããã£ãããªãã§ãã
æè¿ã®CSSã«è§Šãã€ã€ãXDã®ãã¶ã€ã³ã«ã³ããèŠãªããã³ãŒãã£ã³ã°ã®ã»ããã³ãºãªã³ãè¡ããŸããã
CSSã®ã¬ã€ã¢ãŠã
ãŠã§ãã®CSSã¬ã€ã¢ãŠãã¯2020幎çŸåšã§äžèš3ã€ã®æ¹æ³ããããŸãã
ã¬ã€ã¢ãŠãæ¹æ³ | ç¹åŸŽ | åè |
---|---|---|
float | èŠçŽ ãåã蟌ãŸããåœ¹å² | ã¬ã€ã¢ãŠããšããŠã¯ã¬ã¹ãã³ã·ã察å¿ãé¢åãªã®ã§ã çŸåšã¯ãããã¹ãã®åã蟌ã¿ãã®æ¬æ¥ã®åœ¹å²ãšããŠã®äœ¿çšãè¯ããã |
Flexbox | æå®ããèŠçŽ ã®çŽäžã«ããèŠçŽ ã ã¬ã€ã¢ãŠããã | èŠçŽ ã®äžå€®æããç°¡åã«å®çŸã§ãã çŽç·ã«ã¯åŒ·ãããè€æ°è¡ã®ã¬ã€ã¢ãŠãã«ã¯åŒ±ã |
CSS Grid | åïŒcolumnïŒãšè¡ïŒrowïŒãæå®ããŠã ãã®äžã«èŠçŽ ãé 眮ããŠãã | è€æ°è¡ã®ã¬ã€ã¢ãŠãã«åŒ·ããHTMLã®äžŠã³ã«äŸåããªãèªç±ãªã¬ã€ã¢ãŠããå¯èœ ãã ããæžãæ¹ãç¹æ®ã§åå¿è ãèŠããšæ··ä¹±ããã |
å人çã«ã¯ãã©ããè¯ãããšããããã§ã¯ãªããã±ãŒã¹ãã€ã±ãŒã¹ã§ããããã®é·æã掻ãããŠãç®çã®å®è£ ãããã®ã1çªã§ãã
䜿ãåã
äŸå€ããã¡ãããããŸãããèªåã®å Žåã¯äžèšã®ãããªèãæ¹ã§äœ¿ãåããŠããŸãã
ãŸããCSS Gridã®ç¹åŸŽã¯è€æ°è¡ã®ã¬ã€ã¢ãŠãã«åŒ·ãã£ãããããªãæè»ãªã¬ã€ã¢ãŠããã§ããã®ã§ã倧æ ã®ã¬ã€ã¢ãŠãäœæããã«ãŒãããªã©ãè€æ°è¡ã«ãªã£ãŠäžŠã¹ãããŠããå Žåã¯CSS Gridã䜿çšããŸãã
ãã以å€ã®æšªäžŠã³ã¬ã€ã¢ãŠãã¯Flexboxã䜿çšãããã¹ãã®åã蟌ã¿ãå¿ èŠãªå Žåã¯floatã䜿çšããŸãã
- ã倧æ ã®ã¬ã€ã¢ãŠããããè€æ°è¡ã«äžŠã¹ãããã«ãŒããã¯CSS Grid
- ãã以å€ã®æ®éã®æšªäžŠã³ã¬ã€ã¢ãŠãã¯Flexbox
- ããã¹ãã®åã蟌ã¿ãå¿ èŠãªå Žåã¯float
XDã®ãã©ã³ãžã·ã§ã³
XDã®ã¢ãã¡ãŒã·ã§ã³æã«èšå®ããã€ãŒãžã³ã°ã¯ãäžèšã®CSS Transitionã«çžåœããŸãã
XD | CSS |
---|---|
ãªã | transition: 0.3s linear; |
ã€ãŒãºã€ã³ | transition: 0.3s ease-in; |
ã€ãŒãºã¢ãŠã | transition: 0.3s ease-out; |
ã€ãŒãºã€ã³/ã¢ãŠã | transition: 0.3s ease-in-out; |
ãã¹ãããããšãã¯ã€ã³ãã¢ãããã¯Easing Functions Cheat Sheetã§äŒŒããã®ã§å¯Ÿå¿ã§ããŸããããããŠã³ã¹ãã¯å®ç§ã«åçŸããããšãããšæéãããã£ãŠããŸãã®ã§ãããããããã¶ã€ããŒãããšè©±ãåã£ãŠããå¿ èŠããããŸãã
CSSé¢é£ã®è©±
ææ°ã®CSSã«é¢ããŠãè§ŠããŸããããé¢çœãã£ãã®ãCSS倿°ã§ãã
äžèšã®èšè¿°æ¹æ³ã§å®çŸ©ããŠäœ¿ããŸãã
--main-color: #fff;
䜿ããšãã¯var()
颿°ã§åŒã³åºããŸãã
element {
background-color: var(--main-color);
}
ããšããšååšã¯ç¥ã£ãŠããŸããããSassã®å€æ°ã䜿ããCSSã®å€æ°ã䜿ãã¡ãªãããããŸãã¡ãã³ãšæ¥ãŠããŸããã§ããã
ïŒSassã®å€æ°ã®å Žåã¯$
ãä»ããŠå®çŸ©ã»åŒã³åºããã§ããã®ã§ãèšè¿°éãå°ãªããŠæžãïŒ
ãã ãããŒã¯ã¢ãŒãã®å¯Ÿå¿ã®ããã«CSS倿°ã䜿ãã°ãè²ãããªãã©ã¯ã«ç®¡çã§ãããã§ãã
@media (prefers-color-scheme: dark) {
--main-color: #333;
}
æ°ããæè¡ãç¥ã£ãŠãããªããšããã€ã®éã«ãèŠéãçããªã£ãŠãããŸãŸã§ã®ãŸãŸã§ãããããïŒããšäœãèããã«é¢åãªæ¹æ³ã«çžãããããšã«ãªããŸãã
ãã©ãŠã¶å¯Ÿå¿ç¶æ³ãªã©ã®çç±ããææ°ã®æè¡ã¯äœ¿ããªãã£ããšããŠããããŸã«ç®ãéãã®ã¯å€§åã ãšæ¹ããŠæããŸããã