ã¬ãã«ãäžãããããªãã·ã³ã°çè«ãåºããïŒ
[äžäžçŽãããªãã·ã³ã°ã®ããã®CSS3ã®ãã¹ãŠ ]è¬çŸ©ã§ äžååãªãããªãã·ã³ã°çè«ã確å®ã«åããããšãã§ããŸããäžäžçŽãããªãã·ã³ã°ã®å®åãåããããã®å¿
é ã³ãŒã¹ïŒ
ææ§ãªçè«å®åãäžäžçŽå®åã§ç¢ºå®ã«ïŒ ãã£ããããçè«ã®ã¹ãã«ã¯ããããªãã·ã³ã°çµæã®éããçã¿åºããŸãã
CSSã»ã¬ã¯ã¿ãCSSãããŒããšããžã·ã§ã³ã display屿§ãããã¯ã¹ã¢ãã«ãšããŒãã«ã¹ã¿ã€ã«ãCSSä»®æ³ã¯ã©ã¹ã掻çšåºŠã®é«ãCSS3屿§ã掻çšãã宿Šã¹ãã«ãšãã³ããªã©ãäžäžçŽãããªãã·ã³ã°ã®ããã®CSS3ã®ãã¹ãŠãè¬çŸ©ã«ãããŸãã
CSS3ã®ãã¹ãŠïŒ åŠç¿å
容 ã»ã¯ã·ã§ã³ 1. ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒã (Visual Studio Code) ã®äœ¿ãæ¹ãšå¿
é ãšã¯ã¹ãã³ã·ã§ã³
ããžã¥ã¢ã« ã¹ã¿ãžãª ã³ãŒã å¿
é ã®äœ¿ãæ¹ãšãšã¯ã¹ãã³ã·ã§ã³ã®äœ¿ãæ¹ã詳ããåŠã³ãŸãããŸããããã¹ããšãã£ã¿ã®äœ¿çšã«äžå¯æ¬ ãªãšãããã®äœ¿ãæ¹ã詳现ã«åŠç¿ããŸãã
ã»ã¯ã·ã§ã³2. CSSã»ã¬ã¯ã¿ã®ãã¹ãŠ
åºæ¬å¿
é ã»ã¬ã¯ã¿ãã»ã¬ã¯ã¿ãã¿ã°ãšãšãã«äœ¿çšãã¯ã©ã¹ãã¹ãã飿¥å
åŒã»ã¬ã¯ã¿ã屿§ã»ã¬ã¯ã¿ãã¡ãã£ã¢ã¯ãšãªã§ã»ã¬ã¯ã¿ã®äžèŽãã»ã¬ã¯ã¿åªå
é äœãªã©CSSã®å§ãŸãã§ãããCSSåçŽãšäžçŽãåããåºæºãšãªãã»ã¬ã¯ã¿ã®ãã¹ãŠã«ã€ããŠåŠç¿ããŸãã
ã»ã¯ã·ã§ã³3. CSSãããŒããšããžã·ã§ã³ãã¹ãŠ
Flex ãš Grid ã®äœ¿çšèœåãšã¯å¥ã«ããããŒããšããžã·ã§ã³ã®ããããã£ã¯ãã¹ãŠã®ãããªãã·ã³ã°æäœã§åºæ¬ãšãªããŸãã CSS ãããŒããšããžã·ã§ã³ ãã¹ãŠã§ãããªãã·ã³ã°ã®åºç€ãšãªããããŒããšããžã·ã§ã³å±æ§ã®å®å
šãªç解床ãæã€ããšãã§ããŸãã
ã»ã¯ã·ã§ã³ 4. display ããããã£ã®ãã¹ãŠ
CSSçè«ã¯ãã¹ãŠéèŠã§ãããã²ãšã€ã ãéžã¶ãšæèšããŠãdisplay 屿§ã®ç解床ã§ããã¬ã€ã¢ãŠãèšèšãªã©ã®å·šèŠçãªãããªãã·ã³ã°æäœããããã¿ã³ã®äœæã现ããèŠçŽ ã®é
眮ãªã©ããã¹ãŠã®ãããªãã·ã³ã°æäœã«åœ±é¿ãäžãããã£ã¹ãã¬ã€ããããã£ã® ãã¹ãŠãåŠç¿ããŸãã
ã»ã¯ã·ã§ã³5.ããã¯ã¹ã¢ãã«ïŒBox-ModelïŒãšããŒãã«ïŒTableïŒã¹ã¿ã€ã«ã®ãã¹ãŠ
èŠçŽ ïŒElementïŒã®ãµã€ãºãäœçœãééãªã©ãåã
ã®èŠçŽ ã® ããã¯ã¹ã¢ãã«ïŒBox-ModelïŒã«ã€ããŠãã¹ãŠãåŠç¿ããŸãããŸããããããªããŒãã« ãã¶ã€ã³ã® ããã® ããŒãã«ã¹ã¿ã€ã«ãåŠã³ãŸãã
ã»ã¯ã·ã§ã³6. CSSä»®æ³ã¯ã©ã¹ïŒPseudo ClassïŒã®ãã¹ãŠ
äžäžçŽã®ãããªãã·ã³ã°ã®ã¹ãã«ã«é²ãããã«äžå¯æ¬ ãªçè«ã¯ã CSSä»®æ³ã¯ã©ã¹ã®çè§£ãšæŽ»çšèœåã§ãããããªãã·ã³ã°å®åã§äœ¿çšãã CSSä»®æ³ã¯ã©ã¹ïŒPseudo ClassïŒã®ãã¹ãŠãåŠã³ãŸãã
ã»ã¯ã·ã§ã³7. 掻çšåºŠã®é«ãCSS3屿§ã掻çšãã宿Šã¹ãã«(Skill)ãšãã³ã(Tip)
çè«ã«éå®ãããªãæ°å€ãã®ãããªãã·ã³ã°ã¹ãã«ãšããŠããŠããããŸããçè«ãããç¥ã£ãŠããã®ãšããããããããæã«æŽ»çšããèœåã¯å¥åã§ãããã£ããããçè«ãããšã«ãå®åã§å¿
ãå¿
èŠãªãããªãã·ã³ã°ã¹ãã«ãšããŠããŠãåŠã³ãŸãã
ð¬ è¬çŸ©ã«é¢ããäºæ³ããã質å & å¿
èªäºé
Q) ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹è¬çŸ©äž [HTML+CSS+JS ããŒããã©ãªãªæ¬çªãããªãã·ã³ã°] ã·ãŒãºã³1ã2ãšã©ãéãã®ã§ããïŒ
[HTML+CSS+JS ããŒããã©ãªãªå®è·µãããªãã·ã³ã°] ã·ãŒãºã³1ãã·ãŒãºã³2è¬çŸ©ã¯å®æŠãããªãã·ã³ã°ã®äŸå¶äœãââäžå¿ã«æ§æãããè¬çŸ©ã§ãããã¡ãããçè«ã®èª¬æããããŸãããäŸå¶äœãäžå¿ã«é²ããææ¥ãªã®ã§ãçè«ã®èª¬æã®éšåã¯å€ããããŸããããããã[äžäžçŽãããªãã·ã³ã°ã®ããã®CSS3ã®ãã¹ãŠ] è¬çŸ©ã¯æ¬çªãããªãã·ã³ã°ãããŸãããããã®CSSçè«ãéäžçã«åŠç¿ããŸããã ããæ¬çªãããªãã·ã³ã°ã®äŸå¶äœã¯æ¯éãå°ãªããå®å
šã«äžäžçŽãããªãã·ã³ã°çè«ããç¥ããããäžäžçŽCSSçè«è¬çŸ©ã§ãã
Q) é 匷åŸã«æåŸ
ã§ãããããªãã·ã³ã°ã®å®åã¯ã©ãã ãåäžããŸããïŒ
æãããªçãã§ãããã±ãŒã¹ãã€ã±ãŒã¹ã§ãããããã[äžäžçŽãããªãã·ã³ã°ã®ããã®CSS3ã®ãã¹ãŠ] ææ¥å
容ã¯å®åã§åãäžäžçŽãããªãã·ã£ãŒãç¥ã£ãŠããŠãçŸå®çã«å®åã§é©çšããŠããã¹ãã«ãã»ãŒãã¹ãŠåŠã¶ããšã«ãªããŸãã HTMLå
¥åããæéãççž®ããããå€ãã®çè«ã®å
å®¹ãææ¥ããã³ãŒã¹ã§ãããã¡ããè¬çŸ©ã«ã¯å€ãã®å
容ã®çè«å
容ããããŸãããããããç¹°ãè¿ããŠå¿çšããŠèªåã®ãã®ã«äœãåºãã®ã¯ åè¬çã®åãåãšèããããŸãã
Q) åè¬åã«å
è¡ãããŠã§ãã³ãŒãã£ã³ã°èœåã¯ã©ã®ãããã§ããïŒ
ãŸããHTML + CSSã®åºæ¬çãªçè§£ã å¿
èŠã§ããåçŽæ®µéã®åè¬çã¯å¯èœã§ãããå
¥é段éã®åè¬çã«ã¯å°ãå·ããããšãã§ããŸããå
¥é段éã®åè¬çã¯ãã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ã®YouTubeãã£ã³ãã«ã«ããHTML+CSSã®åºç€ãããçšåºŠåŠç¿ããè¬çŸ©ã§æ¥ãã°è¬çŸ©ãããŸãæ¶åã§ãããšæããŸãã
QïŒç»åã«HTMLãCSSãã³ãŒãã£ã³ã°ããå
šäœã®ããã»ã¹ãå«ãŸããŠããŸããïŒ
ä»åã®è¬åº§ã¯åŠç¿ããçè«äºé
ãå€ãã§ããã ãããã¿ã€ãã³ã°æéãççž®ããåŠç¿éãå¢ããããã«HTMLã³ãŒããã¿ã€ãã³ã°ããæéããããªã«ã¯å¥ã«ãããŸããããããªã®éå§æã«HTMLæ§é ã衚瀺ããã察å¿ããHTMLãå
¥åããŠæºåãããšãCSSã³ãŒãã£ã³ã°ã¯1ã€1ã€å
¥åããªãã説æãããŸãããã®ãããããžã¥ã¢ã«ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒã®äœ¿ãæ¹ãšãšãããïŒEmmetïŒã®äœ¿ãæ¹ãååã«ç¿åŸããŠåŠç¿ããããšããå§ãããŸãã
Q) ãã©ã±ããããã¹ããšãã£ã¿ã¯äœ¿çšã§ããŸãããïŒ
以åã®ããŒãžã§ã³ããAdobeããèœã¡ãŠãšã¯ã¹ãã³ã·ã§ã³ãã€ã³ã¹ããŒã«ããããšã¯ã§ãããåé¡ãå€ãããã©ã±ããã䜿çšã§ããªããªããŸããããããããã©ã±ããããã¹ããšãã£ã¿ã®æ°ããããŒãžã§ã³ãç»å Žãããã¹ãŠãæ£åžžã«åäœãããã©ã±ããã«ãªããŸããã
ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãã£ããŒãã䜿çšãããšããã©ã±ãããåå©çšã§ããŸãã
æ¢åã®ããŒãžã§ã³ã¯ã¢ã³ã€ã³ã¹ããŒã«ããŠãå
¬åŒãµã€ãããæ°ããããŒãžã§ã³ïŒVersion 2ïŒãããŠã³ããŒãããŠã€ã³ã¹ããŒã«ããŠãã ããã
ãã©ã±ããïŒBracketsïŒå
¬åŒãµã€ãïŒhttps: //brackets.io/
QïŒã¬ãã¹ã³ã§ã©ã®ããã¹ããšãã£ã¿ã䜿çšããŸããïŒ
ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒ ã§å¶äœãããè¬çŸ©ã§ããããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãã¯ã䜿çšå¶éã®ãªãããªãŒããã°ã©ã ã§ãããã¹ãŠã®è¬çŸ©æ åã¯ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãåºæºã§èª¬æããŠããŸãã
ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒããŠã³ããŒãïŒã¯ãªãã¯ïŒ Q) åŠç¿é åºã¯æåããé ã«åŠç¿ããã®ã§ããïŒ
åŠç¿äžã«æ¬¡ã®ã»ã¯ã·ã§ã³ã«é²ããšãåã®ã»ã¯ã·ã§ã³ã®å
容ãããäžåºŠåç
§ããŠç¹°ãè¿ããŸãããã®ããã åŠç¿é åºã¯ã»ã¯ã·ã§ã³ã®é åºã«åãããŠåŠç¿ããããšããå§ãããŸãã
ãã ããã»ã¯ã·ã§ã³7. 掻çšåºŠã®é«ãCSS3屿§ã掻çšãã宿Šã¹ãã«(Skill)ãšããã(Tip)ã¯ãå¿
èŠãªè¬çŸ©ãåè¬çãé çªã«é¢ä¿ãªãã芧ããã ãããšãã§ããŸãã
QïŒå匷ããŠç¥ããªãããšãããã°è³ªåã¯ã©ãã«ãããŸããïŒ
質åãããå Žåã¯ã[質åïŒåç]æ²ç€ºæ¿ ã«æãæ®ããšããã§ã¯ãªããŠã確èªããããåçããŸãããããŠè³ªåã¯ã§ããã ãå
·äœçã«ããŠãã ããã質åãå
·äœçã§ãªãå Žåãååãªçãã¯ãªããªãç°¡åã§ã¯ãããŸãããã§ããããã質åã®éã¯æ°ã«ãªãå
容ãšäžç·ã«äœæäžã®HTMLãCSSã³ãŒãã£ã³ã°ç»é¢ããã©ãŠã¶ãã£ããã£ç»é¢ãæ·»ä»ããŠããã ããšåçããããŸãã
â€ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ã®åè¬çã«æ¥ããããªãã·ã£ãŒåæ Œãã¥ãŒã¹
â²åœè²»æ¯æŽãããªãã·ã³ã°éçš ç§ã«4ã¶æåã»ã©åŠãã åŠçã§ãããå°±è·ãããšã«ãã¯ãæ¥ãŸããã
â²ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹å人ããŒããã©ãªãªå¶äœãªãã©ã€ã³è¬çŸ©åè¬çã®é¢æ¥å°±è·çµæã«ãã¯ãåããŸããã (2023.4.24)
â€ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ã®åè¬çããããªãã·ã£ãŒå°±è·åŸã«éã£ãŠãããã¡ãŒã«
å
çããã«ã¡ã¯:)
å
ç Inflearn è¬çŸ©èããåŠçãã ã»ãªãžã§ã³ã§ãã ä»å€ã®ãã©ã€ããŒãããŒããã©ãªãªã«é¢ããŠã¢ããã€ã¹ãåŸãããšã¡ãŒã«éä¿¡ããåŠçã§ãã èŠããŠããŸããïŒðð
çžéã§ã¯ãªãã å
çã«ã¢ããã€ã¹ãåŸãããŒããã©ãªãªã§ãããªãã·ã£ãŒå°±è·æåãããšãããã¥ãŒã¹ãäŒããããšã¡ãŒã«ãéããŸãïŒ
ã§ãïŒ äººã«èŒããããŒããã©ãªãªãèŠãŠäŒç€ŸåŽããå
ã«é£çµ¡ãæ¥ãŠããºãŒã ã§é¢æ¥ãèŠãŠåæ ŒããŸããïŒ äŒç€ŸåŽã§ã¯åžæå¹Žä¿žãåãããŠãã¶ã€ã³ãéçºæ¥åãããªãæ¬åœã«ãããªãã·ã£ãŒïŒä»äºã ããã§ããäŒç€Ÿã«å
¥ãããã«ãªããŸããã
ãã£ãªã¢è·ã®ãããªãã·ã£ãŒãæ±ããäŒç€Ÿã§ããããæ°äººã®ç§ã«é£çµ¡ãæ¥ãŠããªãç§ã«é£çµ¡ãäžããã®ããšèããŠã¿ãŸããã ä»ã®äººã®ããŒããã©ãªãªãããããèŠãŸããããç§ã®ããŒããã©ãªãªã§èŠããæ©èœå®çŸ©æžããç®ç«ã£ãŠé£çµ¡ãããã ããŸãã
ããã¯ã¿ãªå
çã®è¬çŸ©ã®ãããã ãšæããŸãã å
çã®è¬çŸ©ãèããªãã£ãããç§ãã¡ããã©æ®éã®ããŒããã©ãªãªã«ãªããŸããããå
çãèšã£ãŠãããèèã®ãã³ãã§å°±è·ã«æåããããšãã§ããŸããïŒ
å®éã«ã¯ãäŒãã§ããŸãããã ããŒããã©ãªãªãäœãäžãå
çã®è¬çŸ©ãèŠãªãããšãŠãé Œãã«ããŠä¿¡ããŠé 匵ããŸããïŒ
åŠåã§é·ãæéã®ææ¥ãèããªããç©ã¿éããå®åããå
çã®è¬çŸ©ãèããŠããŒããã©ãªãªãäœã£ã3ã¶æéã®å®åããããäžæããããšãæããããŸã
åã«æ¬²ããã£ããã å
çãèšã£ãããã«ä¿¡ããŠããããæ¬åœã«è¯ãçµæãåºãŸããã
æ¬åœã«ããããšãããããŸããïŒ
ã³ããã«æ³šæããŠãã ããã ãŸãè¯ãè¬çŸ©ã§äŒãããã§ã:)
å
çããã«ã¡ã¯ãInflearnåè¬çOOOã§ããã¡ãŒã«ã¢ãã¬ã¹ã¯ä»ã®åè¬çã®åçèŠãŠããããŸãã..ðð ããããšããæšæ¶ãé¡ãããŸã
ãããŸã§å
çè¬çŸ©åè¬ããŠ2é±éã»ã©å±¥æŽæžãèŠãªããèŠåŽããŠããŸããŸããã äŒç€Ÿäžã¶æé¢æ¥ã«åæ ŒããŠåºå€ããããšã«ããŸããã æ¬åœã«ããããšãããããŸããã
å®ã¯ç§ã幎霢ã32æ³ã ããå¿é
ãå€ãã£ãã§ãã ãããããã®äŒç€Ÿã®äººäºæ
åœè
ããæ¬äººã¯åŠååºèº«ã¯æªããšèšã£ãŠããŸãããðð ç§ãå
¥ç€Ÿããããšã«ããäŒç€Ÿã¯å°ããã§ãããéçºè
ãããããŠã§ããã¶ã€ããŒãããŸãã 3ã¶æéæè²ãããå®åã«æå
¥ããé£äºã ã£ããã§ãã è·é¢ãå°ãããã幎俞ãäœãã£ããã©..äžçæžåœåŠãã§å¹Žä¿žãäžããŠã¿ãããïœ ðð
ãã®éãæ¬åœã«ããããšãããããŸããã質åã®åçãããããŠãããŠãããªã«ãªã³ã©ã€ã³ã§è¬çŸ©ãããŠå°±è·ã«ãªããããšãŠãäžæè°ã§ããã
ãããããå
çã®è¬çŸ©ãèããªããå®åãå¢ãããªããå匷ããŸãããã¡ã€ãã£ã³ã°ïœïŒ
ðð»ââïžè³ªåããåã«å¿
ãïŒèªãã§ãã ãããïŒ åŠã³ãªãã質åãããå Žåã¯è³ªåããŠãã ãããã質åã®éã«ã¯ãããªãå
容ãšã³ãŒãããã©ãŠã¶çµæç»é¢ã®ãã£ããã£ãæçš¿ããŠãã ãããã³ãŒãã®å Žåã¯ãHTMLãCSSãJSã®ã³ãŒãããã¹ãŠã¢ããããŒãããŠãã ããã
質åæã«ã³ãŒããªãã§ã°ããŒã ãåé¡ã説æããã°ãæ¬åœã«ç°¡åã§ã¯ãªããšæ£ç¢ºãªçããåºãã®ã¯é£ããã§ããããããç§ã¯ãHTMLãCSSãJSã³ãŒããšãã©ãŠã¶ã®ãã£ããã£ãã¢ããããŒãããŠãã ãããããšè¿ä¿¡ããå¿
èŠããããæçµçã«è§£æ±ºçãåŸãã®ã«é¢åã§æéãããããŸãã
â²è©²åœã®è¬çŸ©ã³ãã¥ããã£ã®ãããã質åã®èŠæ¹ããŸã確èªããŠãã ããã
â¡ å¹æçãªåŠç¿ã®ããã«ãã²ïŒã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ãããªãã·ã³ã°YouTubeãåç
§ããŠãã ããã
ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ãããªãã·ã³ã°YouTubeãã£ã³ãã«ã§çè«æ åè¬çŸ©ãšäžŠè¡ããŠãã ããããã¡ããããã¹ãŠã®çè«æ åãYouTubeãã£ã³ãã«ã«ããããã§ã¯ãããŸããããéèŠãªçè«æ åã¯ã»ãšãã©ãããŸãããæ åãå€ãã®ã§ãæ åãæ¢ãæ¹æ³ã¯ä»¥äžã®äŸã®ããã«æ€çŽ¢ããããšããå§ãããŸãã
ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ãããªãã·ã³ã°YouTubeãã£ã³ãã«ïŒ https: //www.youtube.com/codingworks
ðã«ãªãã¥ã©ã
ã»ã¯ã·ã§ã³0.è¬çŸ©ç޹ä»
[è¬çŸ©ç޹ä»]äžäžçŽãããªãã·ã³ã°ã®ããã®CSS3ã®ãã¹ãŠ ã»ã¯ã·ã§ã³1.ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒã®äœ¿ãæ¹
ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒã®äœ¿ãæ¹ãšç°å¢èšå® ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒã§ã®Emmetã®äœ¿ãæ¹ ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãïŒVisual Studio CodeïŒå¿
é Extensionã®ã€ã³ã¹ããŒã«ãšäœ¿ãæ¹ ããžã¥ã¢ã«ã¹ã¿ãžãªã³ãŒãã§CSSã倿Žãããšãã«äžãããã«ãªããŒããé²ã ã»ã¯ã·ã§ã³2. CSSã»ã¬ã¯ã¿ã®ãã¹ãŠ
ããã©ã«ãã®å¿
é ã»ã¬ã¯ã¿ãã»ã¬ã¯ã¿ãã¿ã°ãšäžç·ã«äœ¿çšããã¯ã©ã¹ããã¹ãããŠäœ¿çšãã ã»ã¬ã¯ã¿ã®é©çšåªå
ââé äœãéèŠãªçç±ïŒã¬ã¹ãã³ã·ãWebã¡ãã£ã¢ã¯ãšãªæ§æïŒ 飿¥å
åŒã»ã¬ã¯ã¿ïŒinputãcheckedä»®æ³ã¯ã©ã¹ïŒ 屿§ã»ã¬ã¯ã¿ïŒattribute selectorsïŒ01ïŒããã©ã«ã圢åŒãšæ³šæç¹ïŒ 屿§ã»ã¬ã¯ã¿ïŒattribute selectorsïŒ02ïŒæååãã§ãã¯ã掻çšããïŒ ã»ã¯ã·ã§ã³3. CSSãããŒããšããžã·ã§ã³ãã¹ãŠ
ãããŒã屿§ïŒæ°Žå¹³é
眮ãfloat屿§ç¶æ¿ïŒ ãããŒã屿§ïŒèŠªèŠçŽ ã®é«ãå€ãæ±ããcalc颿°ã§ååæŒç®ïŒ ããžã·ã§ã³å±æ§ (static, relative, absolute, fixed, sticky) ããžã·ã§ã³å±æ§ïŒèŠªèŠçŽ åèŠçŽ é¢ä¿ãçµã¶ïŒ ããžã·ã§ã³å±æ§ïŒabsoluteãfixedãstickyã®éãïŒ ããžã·ã§ã³å±æ§èŠªèŠçŽ ã®å
åŽãšå€åŽã«äœçœ®ããïŒ ããžã·ã§ã³å±æ§ïŒz-indexãšããžã·ã§ã³å±æ§ã®åªå
é äœïŒ ã»ã¯ã·ã§ã³ 4. display ããããã£ã®ãã¹ãŠ
displayããããã£ïŒinlineãinline-blockãblockã®ç¹åŸŽïŒ displayããããã£ïŒdisplayããããã£ã掻çšããŠHTMLæ§é ãç°¡åã«äœæïŒ display屿§ïŒdisplay屿§ã®çè§£ããªãå Žåã«çããéWebæšæºã³ãŒãã£ã³ã°ïŒ displayããããã£ïŒèŠçŽ ãèŠããªãããã«ãã3ã€ã®æ¹æ³ãšéãïŒ displayããããã£ïŒdisplayããããã£ãå®å
šã«çè§£ããããã®å¿
é 远å ïŒ display屿§ïŒlist-itemãtableãFLEXãšGRIDãSCSSïŒSASSïŒæŽ»çšèœåã®éèŠæ§ïŒ ã»ã¯ã·ã§ã³5.ããã¯ã¹ã¢ãã«ïŒBox-ModelïŒãšããŒãã«ïŒTableïŒã¹ã¿ã€ã«ã®ãã¹ãŠ
ããã¯ã¹ã¢ãã«ïŒBox ModelïŒããããã£ïŒwidthãheightãautoãinheritïŒ ããã¯ã¹ã¢ãã«(Box Model) ããããã£(box-sizing) ããã¯ã¹ã¢ãã«ïŒBox ModelïŒããããã£ïŒmarginãpaddingãããŒãžã³ãªãŒããŒã©ããããã¬ãã£ãããŒãžã³ïŒ ããã¯ã¹ã¢ãã« (Box Model) ãããã㣠(border, border-radius) ããŒãã«ã¹ã¿ã€ã«ã®ããããã£ïŒããŒãã«ãã¶ã€ã³ã®ãã¹ãŠã®ããããã£ïŒ ã»ã¯ã·ã§ã³6. CSSä»®æ³ã¯ã©ã¹ïŒPseudo ClassïŒã®ãã¹ãŠ
hoverä»®æ³ã¯ã©ã¹ïŒaã¿ã°ç¶æ
ä»®æ³ã¯ã©ã¹ããã¿ã³ãã¶ã€ã³ã®ãã¹ãŠïŒ hoverä»®æ³ã¯ã©ã¹ïŒhoverã§äœããã¿ã³ãã¶ã€ã³ãããããããŠã³ããã²ãŒã·ã§ã³ïŒã³ã³ãã³ãïŒ é åºããã§ãã¯ããä»®æ³ã¯ã©ã¹ïŒnth-childãfirst-childãlast-childïŒ é åºããã§ãã¯ããä»®æ³ã¯ã©ã¹ïŒnth-childãnth-of-typeããã®ä»ã®é åºããã§ãã¯ããä»®æ³ã¯ã©ã¹ïŒ å®è·µäŸïŒhoverä»®æ³ã¯ã©ã¹ãé åºãã§ãã¯ä»®æ³ã¯ã©ã¹ãpositionãdisplay屿§ïŒ before after ä»®æ³ã¯ã©ã¹ïŒåºæ¬æŽ»çšããªã¹ã Bullet ãš Badgeãã¢ã€ã³ã³ãã©ã³ã UnicodeïŒ before after ä»®æ³ã¯ã©ã¹ïŒåºæ¬æŽ»çšããªã¹ã Bullet ãš Badgeãã¢ã€ã³ã³ãã©ã³ã UnicodeïŒ before after ä»®æ³ã¯ã©ã¹ïŒå³åœ¢ãšãã¿ã³ã®äœæãããžã·ã§ã³ã®æŽ»çšïŒ before after ä»®æ³ã¯ã©ã¹ïŒå³åœ¢ãšãã¿ã³ã®äœæãããžã·ã§ã³ã®æŽ»çšïŒ before after ä»®æ³ã¯ã©ã¹ (èæ¯ç»åã®äžã«ãªãŒããŒã¬ã€ã䜿çš) before after ä»®æ³ã¯ã©ã¹ (ã«ã¹ã¿ã 屿§ãš attr 颿° - Notice Badge) before after ä»®æ³ã¯ã©ã¹ (ã«ã¹ã¿ã 屿§ãš attr 颿° - Swap Hover Button) before after ä»®æ³ã¯ã©ã¹ (èªå Numbering ãã counter 颿°) å®è·µäŸïŒbefore afterãæŽ»çšããã¢ãã¡ãŒã·ã§ã³ã©ã€ãã¬ãã¥ãŒããããŒUIãã¶ã€ã³ïŒ ãã©ãŒã èŠçŽ ã«æžã蟌ãä»®æ³ã¯ã©ã¹ïŒãã©ãŒã èŠçŽ ã®åºæ¬çãªçè§£ïŒ ãã©ãŒã èŠçŽ ã«æžã蟌ãä»®æ³ã¯ã©ã¹ïŒå¿
é ãã©ãŒã ä»®æ³ã¯ã©ã¹ããã°ã€ã³ãã©ãŒã CSSãã¶ã€ã³ïŒ01 ãã©ãŒã èŠçŽ ã«æžã蟌ãä»®æ³ã¯ã©ã¹ïŒå¿
é ãã©ãŒã ä»®æ³ã¯ã©ã¹ããã°ã€ã³ãã©ãŒã CSSãã¶ã€ã³ïŒ02 ãã©ãŒã èŠçŽ ã«æžã蟌ãä»®æ³ã¯ã©ã¹ïŒå¿
é ãã©ãŒã ä»®æ³ã¯ã©ã¹ããã°ã€ã³ãã©ãŒã CSSãã¶ã€ã³ïŒ03 ãã©ãŒã èŠçŽ ã®å
¥åã«ãã©ã³ãã¢ã€ã³ã³ã䜿çšããïŒiã¿ã°ãbefore UnicodeïŒ ãã©ãŒã èŠçŽ ã«æžã蟌ãä»®æ³ã¯ã©ã¹ïŒæ€èšŒãèªã¿åãå°çšä»®æ³ã¯ã©ã¹ïŒ ç¥ã£ãŠãããšéåžžã«äœ¿ããããä»®æ³ã¯ã©ã¹ïŒç¹å®ã»ã¬ã¯ã¿ãé€ãnotïŒ ç¥ã£ãŠãããšéåžžã«äœ¿ããããä»®æ³ã¯ã©ã¹ïŒéžæè
ã®éè€ãæžããisïŒ ã»ã¯ã·ã§ã³7. 掻çšåºŠã®é«ãCSS3屿§ã掻çšãã宿Šã¹ãã«(Skill)ãšãã³ã(Tip)
CSSã®äžå€®æãã®ãã¹ãŠïŒpositionãflexãgridãvertical-alignãtransformãplace-itemsïŒ imgã¿ã°ã®ãã¹ãŠïŒäžæç»åãå
¥ãã2ã€ã®æ¹æ³ãç»åããŒãžã³ãåãé€ãïŒ CSSèæ¯ç»åã®æŽ»çšã®ãã¹ãŠãç»å+ã°ã©ããŒã·ã§ã³ã®åæäœ¿çš 倿°ã䜿çšããŠç¹°ãè¿ãã³ãŒããæžãããŠãªãµã€ã¯ã«ãã ããŸããŸãªèŠèŠå¹æãäžããfilter屿§ãšãã£ã«ã¿å±æ§å€èªåçæåš åïŒçžŠïŒã«åå²ããcolumn-count屿§ïŒçè«ãã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠãïŒ åïŒçžŠïŒã«åå²ããcolumn-count屿§ïŒå®äŸ - ã¬ã¹ãã³ã·ãWebã¬ã€ã¢ãŠãïŒ ããŠã¹ã€ãã³ããç¡å¹ã«ãã pointer-events (å®äŸ - Card UI Hover Effect) æåã®æåã食ãä»®æ³ã¯ã©ã¹ïŒfirst-letter ããµããããã¹ããæžããããã«äœæããtext-overflowãwhite-spaceãããã㣠ããã¹ãæžãèŸŒã¿æ¹åã®åçŽæ¹åã®èšå®ïŒwriting-modeãtransform-originïŒ èŠçŽ ã®å²åãèšå®ããaspect-ratio ã»ã¯ã·ã§ã³8.å¿
é CSSã³ã¢çè«ãšæŽ»çšïŒã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹YouTubeãªã³ã¯ïŒãšããŠã³ããŒã
ãã²ïŒåŠã¶ã¹ãã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹YouTubeè¬çŸ©ã®ãããªãªã¹ãã®çŽ¹ä» [ããŠã³ããŒã] ãããªãã·ã³ã°å®ææ¬ïŒãããã£ãŒã«ã«ãŒããçåŸæããã°ã€ã³ãã©ãŒã ããã°ã€ã³ãã©ãŒã ïŒisä»®æ³ã¯ã©ã¹ïŒ [ããŠã³ããŒã] ãããªãã·ã³ã°å®ææ¬ïŒæŽ»çšåºŠã®é«ãCSS3屿§ã掻çšãã宿Šã¹ãã«ãšãã³ãïŒ [ããŠã³ããŒã] CSS3ã®ãã¹ãŠïŒçè«æ å説æããã¹ãïŒPDFïŒ
â¡ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ã¡ã³ã¿ãªã³ã°ã®ç޹ä»ãšç³è«ïŒhttps:
//inf.run/wfoh âïž ç¥èå
±æè
ã®çŽ¹ä» ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ â [çŸåš]ããªãŒã©ã³ãµãŒããã³ããšã³ããããªãã·ã£ãŒ â [çŸåš] HTML+CSS+JQUERY ãããªãã·ã³ã°YouTubeãã£ã³ãã«ãã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ãéå¶ â ã°ãªãŒã³ã³ã³ãã¥ãŒã¿ã¢ã«ãããŒãŠã§ããããªãã·ã³ã°è¬åž« â ããŒãžã§ãŠã³ã³ã³ãã¥ãŒã¿ã¢ã«ãããŒWebãããªãã·ã³ã°ã€ã³ã¹ãã©ã¯ã¿ãŒ â ããã³ã³ãã¥ãŒã¿ã¢ã«ãããŒWebãããªãã·ã³ã°è¬åž« â ããã³ããšã³ããããªãã·ã£ãŒãããã³ããšã³ããããªãã·ã³ã°å°éè¬åž« â UI/UX Webãã¶ã€ã³ããŒããã©ãªãªè¬çŸ© â ãŠã§ããã¶ã€ã³æ©èœå£«å®æè³æ Œè¬åº§è¬çŸ© â ã€ãŒãžãŒïŒãšãã¥ãŒããã³ããšã³ãUI/UXãã¶ã€ã³ïŒãããªãã·ã³ã°
ð ã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ãããªãã·ã³ã°YouTubeãã£ã³ãã« - https://www.youtube.com/codingworks ðã³ãŒãã£ã³ã°ã¯ãŒã¯ã¹ãããªãã·ã³ã°ããã° - https://www.inflearn.com/users/@codingworks/blogs
ã€ã³ã¿ãã¥ãŒãšå°±è·ãåŒã¶ãããªãã·ã£ãŒ å人ããŒããã©ãªãª ããŒã ããŒãžå¶äœã¹ã¯ãªãããã¬ã€ã¢ãŠããã€ã³ã¿ã©ã¯ãã£ããŠã§ããã€ã³ã¿ã©ã¯ãã£ããŠã§ãããŠã§ããã¶ã€ã³ããŠã§ããã¶ã€ã³ãããŒããã©ãªãªããããªãã·ã³ã°ãã¬ã¹ãã³ã·ããŠã§ãããŠã§ããã¶ã€ã³æ©èœå£«å®æè©ŠéšãããŒãã¹ãã©ãããããŒãã¹ãã©ãããcss frameworksããã¬ãŒã ã¯ãŒã¯