1. ã¯ããã«ïŒCSSãšã¯
CSSã¯ããŠã§ãããŒãžã®ãã¶ã€ã³ãã¬ã€ã¢ãŠããå¶åŸ¡ããããã®èšèªãšããŠããŠã§ãéçºè ã®éã§åºã䜿çšãããŠããŸããããããCSSã®çã®åã圹å²ãç解ããããšã¯ãåå¿è ã«ãšã£ãŠã¯å°ãé£ãããããããŸããããã®ã»ã¯ã·ã§ã³ã§ã¯ãCSSã®åºæ¬çãªåœ¹å²ãšãããããŠã§ããã¶ã€ã³ã«ã©ã®ããã«åœ±é¿ããããç°¡åã«èª¬æããŸãã
1.1 CSSã®åœ¹å²ãšéèŠæ§
CSSã¯ãCascading Style Sheetsã®ç¥ã§ãããæåéããã«ã¹ã±ãŒãããã¹ã¿ã€ã«ã·ãŒãããšããæå³ã§ããHTMLã¯ãŠã§ãããŒãžã®éªšçµã¿ãå 容ãå®çŸ©ãããã®ã§ããã®ã«å¯ŸããCSSã¯ãã®éªšçµã¿ãã©ã®ããã«èŠããããå®çŸ©ããŸããäŸãã°ãããã¹ãã®è²ããµã€ãºãããŒãžã®èæ¯è²ãèŠçŽ ã®äœçœ®ãªã©ãããŒãžã®èŠãç®ã«é¢ãããã¹ãŠã®ããšãå¶åŸ¡ããã®ãCSSã®åœ¹å²ã§ãã
ãŠã§ãããŒãžã¯æ å ±ãäŒããããã®ããŒã«ã§ããããã®æ å ±ãã©ã®ããã«è¡šç€ºããããã¯éåžžã«éèŠã§ããè¯ããã¶ã€ã³ã¯ããŠãŒã¶ãŒãæ å ±ãç°¡åã«ç解ãããŠã§ããµã€ããå¹æçã«å©çšããã®ãå©ããŸãããã®ãããCSSã¯ãŠã§ãéçºã«ãããŠæ¬ ãããªãã¹ãã«ãšãªã£ãŠããŸãã
1.2 ãŠã§ããã¶ã€ã³ã®éæ³ïŒCSSã®å
CSSã¯ããŠã§ããã¶ã€ã³ã®éæ³åž«ã®ãããªãã®ã§ããåçŽãªHTMLææžããé åçã§ãããã§ãã·ã§ãã«ãªãŠã§ãããŒãžã«å€ããããšãã§ããŸããCSSã䜿ãããšã§ããŠã§ãããŒãžã¯ãã ã®æ å ±ã®éãŸããããã€ã³ã¿ã©ã¯ãã£ãã§é åçãªããžã¿ã«äœéšãžãšå€ãããŸãã
äŸãã°ã以äžã®è¡šã¯CSSã䜿çšããŠãã¶ã€ã³ããããã®ãšãCSSã䜿çšããŠããªããã®ã®éãã瀺ããŠããŸãã
èŠçŽ | CSSæªäœ¿çš | CSSäœ¿çš |
---|---|---|
ããã¹ã | ããã©ã«ãã®ãã©ã³ããšãµã€ãº | ã«ã¹ã¿ã ãã©ã³ãããµã€ãºãè² |
ãã¿ã³ | åºæ¬çãªåœ¢ç¶ãšè² | ã°ã©ããŒã·ã§ã³ã圱ããããŒãšãã§ã¯ã |
èæ¯ | çœãŸãã¯éæ | èæ¯ç»åãåç»ãã«ã©ãŒã°ã©ããŒã·ã§ã³ |
ãã®ããã«ãCSSã¯ãŠã§ãããŒãžã®åèŠçŽ ãã«ã¹ã¿ãã€ãºãããŠãŒã¶ãŒã«ãšã£ãŠé åçãªäœéšãæäŸããããã®åŒ·åãªããŒã«ã§ãããã®èšäºãéããŠããã®éæ³ã®ãããªåãç解ããèªåèªèº«ã§äœ¿ãããªãæ¹æ³ãåŠãã§ãããŸãããã
2. CSSã®åºæ¬æ§é
CSSã¯ããã®ã·ã³ãã«ããšæè»æ§ããå€ãã®ãŠã§ãéçºè ã«æãããŠããŸãããããããã®èåŸã«ã¯ç¬èªã®æ§é ãšã«ãŒã«ãååšããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãCSSã®åºæ¬çãªæ§é ãšããããå¹æçã«äœ¿çšããããã®ããŒãšãªãèŠçŽ ã«ã€ããŠè©³ãã説æããŸãã
2.1 ã»ã¬ã¯ã¿ãšããããã£
CSSã®ã³ãŒãã¯ãäž»ã«ã»ã¬ã¯ã¿ãšããããã£ããæãç«ã£ãŠããŸããã»ã¬ã¯ã¿ã¯ãã¹ã¿ã€ã«ãé©çšããHTMLèŠçŽ ãæå®ããéšåã§ããäžæ¹ãããããã£ã¯ããã®èŠçŽ ã®èŠãç®ãã©ã®ããã«å€æŽããããå®çŸ©ããéšåã§ãã
äŸãã°ã以äžã®CSSã³ãŒããèããŠã¿ãŸãããã
p { color: red; }
ãã®ã³ãŒãã§ã¯ããpããšããã»ã¬ã¯ã¿ã䜿çšããŠããã¹ãŠã®æ®µèœã«èµ€è²ã®ããã¹ããé©çšããŠããŸããããã§ããcolorãã¯ããããã£åã§ããããredãã¯ãã®å€ã§ãã
2.2 å€ãšåäœ
CSSã§ã¯ãããŸããŸãªããããã£ã«å¯ŸããŠæ§ã ãªå€ãèšå®ããããšãã§ããŸãããããã®å€ã¯ãè²ããµã€ãºãäœçœ®ãªã©ã®æ å ±ãè¡šçŸããããã®ãã®ã§ãããŸããå€ãã®å€ã«ã¯åäœãå¿ èŠã§ããäŸãã°ãèŠçŽ ã®å¹ ãé«ããæå®ããå Žåããã¯ã»ã«(px)ãããŒã»ã³ããŒãž(%)ãªã©ã®åäœã䜿çšããŸãã
以äžã®è¡šã¯ãäžè¬çãªCSSã®å€ãšãã®åäœã瀺ããŠããŸãã
ãããã㣠| å€ã®äŸ | åäœ |
---|---|---|
width, height | 100, 50 | px, %, em |
font-size | 16, 1.5 | px, em, rem |
margin, padding | 10, 2 | px, em |
2.3 ã³ã¡ã³ãã®æžãæ¹
CSSã®ã³ãŒãå ã«ã¯ãä»ã®éçºè ãå°æ¥ã®èªåã®ããã«ãã³ãŒãã®èª¬æã泚æç¹ãèšè¿°ããããšãã§ããŸãããããã³ã¡ã³ããšåŒã³ãŸããã³ã¡ã³ãã¯ãCSSã®ã³ãŒããšããŠè§£éãããããã©ãŠã¶ã«ã¯è¡šç€ºãããŸããã
ã³ã¡ã³ãã®æžãæ¹ã¯éåžžã«ç°¡åã§ãã以äžã®ããã«ãã³ã¡ã³ãã®å 容ãã/*ããšã*/ãã§å²ãã ãã§ãã
/* ããã¯ã³ã¡ã³ãã®äŸã§ã */ p { color: blue; }
ãã®ããã«ãã³ã¡ã³ãã䜿çšããããšã§ãã³ãŒãã®æå³ãç¹å®ã®éšåã®åäœãæ確ã«ããããšãã§ããŸãã
3. ã¹ã¿ã€ã«ã®é©çšæ¹æ³
ãŠã§ãããŒãžã«CSSãé©çšããæ¹æ³ã¯ããã€ããããŸããããããã®æ¹æ³ã«ã¯ãç¹å®ã®ã·ãã¥ãšãŒã·ã§ã³ãèŠä»¶ã«å¿ããå©ç¹ãšæ¬ ç¹ããããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãCSSããŠã§ãããŒãžã«é©çšãã3ã€ã®äž»ãªæ¹æ³ã«ã€ããŠè©³ãã説æããŸãã
3.1 ã€ã³ã©ã€ã³ã¹ã¿ã€ã«
ã€ã³ã©ã€ã³ã¹ã¿ã€ã«ã¯ãHTMLèŠçŽ ã®äžã«çŽæ¥CSSãæžãæ¹æ³ã§ããããã¯ãç¹å®ã®èŠçŽ ã«ã®ã¿ã¹ã¿ã€ã«ãé©çšãããå Žåã«äŸ¿å©ã§ãããããã倧èŠæš¡ãªãŠã§ããµã€ããè€æ°ã®ããŒãžã§åãã¹ã¿ã€ã«ãé©çšãããå Žåã«ã¯ããã®æ¹æ³ã¯å¹ççã§ã¯ãããŸããã
ã€ã³ã©ã€ã³ã¹ã¿ã€ã«ã®äŸïŒ
<p style="color: green;">ããã¯ç·è²ã®ããã¹ãã§ãã</p>
ãã®æ¹æ³ã¯ãç°¡åãªå€æŽããã¹ãã«ã¯äŸ¿å©ã§ãããäžè¬çã«ã¯ä»ã®æ¹æ³ã䜿çšããããšãæšå¥šãããŸãã
3.2 å éšã¹ã¿ã€ã«ã·ãŒã
å éšã¹ã¿ã€ã«ã·ãŒãã¯ãHTMLãã¡ã€ã«ã®<head>ã»ã¯ã·ã§ã³å ã«<style>ã¿ã°ã䜿çšããŠCSSãèšè¿°ããæ¹æ³ã§ããããã«ãããåãHTMLãã¡ã€ã«å ã®è€æ°ã®èŠçŽ ã«ã¹ã¿ã€ã«ãé©çšããããšãã§ããŸãã
å éšã¹ã¿ã€ã«ã·ãŒãã®äŸïŒ
<head> <style> p { color: blue; } </style> </head>
ãã®æ¹æ³ã¯ã1ã€ã®HTMLãã¡ã€ã«ã«ã®ã¿ã¹ã¿ã€ã«ãé©çšãããå Žåã«é©ããŠããŸãã
3.3 å€éšã¹ã¿ã€ã«ã·ãŒã
æãäžè¬çã«äœ¿çšãããæ¹æ³ã¯ãå€éšã¹ã¿ã€ã«ã·ãŒãã§ããããã¯ãCSSãå¥ã®ãã¡ã€ã«ã«èšè¿°ããHTMLãã¡ã€ã«ãããã®ãã¡ã€ã«ããªã³ã¯ããæ¹æ³ã§ãããã®æ¹æ³ã®æ倧ã®å©ç¹ã¯ã1ã€ã®CSSãã¡ã€ã«ãè€æ°ã®HTMLãã¡ã€ã«ã§å ±æã§ããããšã§ãã
å€éšã¹ã¿ã€ã«ã·ãŒãã®ãªã³ã¯æ¹æ³ïŒ
<head> <link rel="stylesheet" href="styles.css"> </head>
ãã®æ¹æ³ã䜿çšãããšããŠã§ããµã€ãå šäœã®ãã¶ã€ã³ãã¬ã€ã¢ãŠããäžè²«ããŠç®¡çããããšãã§ããŸãã
以äžã®3ã€ã®æ¹æ³ãé©åã«éžæããããšã§ãå¹ççã«ãŠã§ãããŒãžã®ãã¶ã€ã³ãå¶åŸ¡ããããšãã§ããŸãã次ã®ã»ã¯ã·ã§ã³ã§ã¯ãå ·äœçãªãã¶ã€ã³ãã¯ããã¯ã«ã€ããŠè©³ãã説æããŸãã
4. ããã¯ã¹ã¢ãã«ãšã¬ã€ã¢ãŠã
ãŠã§ããã¶ã€ã³ã®äžå¿ã«ã¯ãããã¯ã¹ã¢ãã«ãšããèãæ¹ããããŸããããã¯ããŠã§ãããŒãžäžã®ãã¹ãŠã®èŠçŽ ããç©åœ¢ã®ããã¯ã¹ãšããŠæ±ããããšããèãæ¹ã§ãããã®ã»ã¯ã·ã§ã³ã§ã¯ãããã¯ã¹ã¢ãã«ã®åºæ¬çãªèŠçŽ ãšãããã䜿çšããŠãŠã§ãããŒãžã®ã¬ã€ã¢ãŠããå¶åŸ¡ããæ¹æ³ã«ã€ããŠè©³ãã説æããŸãã
4.1 ããŒãžã³ãšããã£ã³ã°
ããã¯ã¹ã¢ãã«ã®äžå¿ã«ã¯ãããŒãžã³ãšããã£ã³ã°ãšãã2ã€ã®éèŠãªèŠçŽ ããããŸããããŒãžã³ã¯ãããã¯ã¹ã®å€åŽã®ç©ºéãå¶åŸ¡ãããã®ã§ãä»ã®èŠçŽ ãšã®éã®è·é¢ãæå®ããã®ã«äœ¿çšãããŸããäžæ¹ãããã£ã³ã°ã¯ãããã¯ã¹ã®å åŽã®ç©ºéãå¶åŸ¡ãããã®ã§ãããã¯ã¹ã®å¢çãšãã®äžã®ã³ã³ãã³ããšã®éã®è·é¢ãæå®ããã®ã«äœ¿çšãããŸãã
以äžã®è¡šã¯ãããŒãžã³ãšããã£ã³ã°ã®éãã瀺ããŠããŸãã
èŠçŽ | 説æ |
---|---|
ããŒãžã³ | ããã¯ã¹ã®å€åŽã®ç©ºéãä»ã®èŠçŽ ãšã®éã®è·é¢ãå¶åŸ¡ã |
ããã£ã³ã° | ããã¯ã¹ã®å åŽã®ç©ºéãããã¯ã¹ã®å¢çãšã³ã³ãã³ããšã®éã®è·é¢ãå¶åŸ¡ã |
4.2 ããŒããŒãšèæ¯
ããã¯ã¹ã¢ãã«ã®ãã2ã€ã®èŠçŽ ã¯ãããŒããŒãšèæ¯ã§ããããŒããŒã¯ãããã¯ã¹ã®å€åŽãå²ãç·ã§ããã®å€ªããè²ãã¹ã¿ã€ã«ãæå®ããããšãã§ããŸããèæ¯ã¯ãããã¯ã¹ã®å éšã«è¡šç€ºãããè²ãç»åãæå®ãããã®ã§ãã
ãããã®èŠçŽ ã䜿çšããããšã§ããŠã§ãããŒãžã®ãã¶ã€ã³ãã¬ã€ã¢ãŠããããã«è©³çŽ°ã«å¶åŸ¡ããããšãã§ããŸãã
4.3 ãã¬ãã¯ã¹ããã¯ã¹ãšã°ãªãã
è¿å¹Žã®ãŠã§ããã¶ã€ã³ã®ãã¬ã³ããšããŠããã¬ãã¯ã¹ããã¯ã¹ãšã°ãªãããšãã2ã€ã®ã¬ã€ã¢ãŠãæè¡ã泚ç®ãããŠããŸãããããã¯ãäŒçµ±çãªããã¯ã¹ã¢ãã«ãããã«é²åãããã¬ã¹ãã³ã·ããªãã¶ã€ã³ãè€éãªã¬ã€ã¢ãŠããç°¡åã«å®çŸããããã®ãã®ã§ãã
ãã¬ãã¯ã¹ããã¯ã¹ã¯ãèŠçŽ ã®ãµã€ãºãäœçœ®ãæè»ã«å¶åŸ¡ããããã®ãã®ã§ãç¹ã«1次å ã®ã¬ã€ã¢ãŠãã«é©ããŠããŸããäžæ¹ãã°ãªããã¯ã2次å ã®ã¬ã€ã¢ãŠããå¶åŸ¡ããããã®ãã®ã§ãè¡ãšåã®ã°ãªããã·ã¹ãã ã䜿çšããŠèŠçŽ ãé 眮ããŸãã
ãããã®æè¡ã䜿çšããããšã§ããŠã§ãããŒãžã®ãã¶ã€ã³ãã¬ã€ã¢ãŠããããã«é«åºŠã«å¶åŸ¡ããããšãã§ããŸãã
5. ã¬ã¹ãã³ã·ããã¶ã€ã³ã®åºç€
çŸä»£ã®ãŠã§ããã¶ã€ã³ã«ãããŠãããŸããŸãªããã€ã¹ãç»é¢ãµã€ãºã«é©å¿ããã¬ã¹ãã³ã·ããã¶ã€ã³ã¯æ¬ ãããªãèŠçŽ ãšãªã£ãŠããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãã¬ã¹ãã³ã·ããã¶ã€ã³ãå®çŸããããã®åºæ¬çãªæè¡ãèãæ¹ã«ã€ããŠè©³ãã説æããŸãã
5.1 ã¡ãã£ã¢ã¯ãšãª
ã¡ãã£ã¢ã¯ãšãªã¯ãç°ãªãããã€ã¹ãç»é¢ãµã€ãºã«åãããŠã¹ã¿ã€ã«ãé©çšããããã®CSSã®æè¡ã§ããããã«ãããç¹å®ã®æ¡ä»¶äžã§ã®ã¿ç¹å®ã®ã¹ã¿ã€ã«ãé©çšããããšãã§ããŸãã
äŸãã°ãã¹ããŒããã©ã³ã®ç»é¢ãµã€ãºã§ã®ã¿ç¹å®ã®ã¹ã¿ã€ã«ãé©çšãããå Žåã以äžã®ãããªã¡ãã£ã¢ã¯ãšãªã䜿çšããŸãã
@media (max-width: 768px) { body { font-size: 16px; } }
ãã®ã³ãŒãã¯ãç»é¢ã®å¹ ã768px以äžã®å Žåã«ã®ã¿ãæ¬æã®ãã©ã³ããµã€ãºã16pxã«èšå®ããŸãã
5.2 ç»åãšããã¹ãã®ã¹ã±ãŒãªã³ã°
ã¬ã¹ãã³ã·ããã¶ã€ã³ã«ãããŠãç»åãããã¹ãã®ãµã€ãºãé©åã«ã¹ã±ãŒãªã³ã°ããããšã¯éåžžã«éèŠã§ããããã«ãããã©ã®ããã€ã¹ãç»é¢ãµã€ãºã§ãã³ã³ãã³ããé©åã«è¡šç€ºããããŠãŒã¶ãŒäœéšãåäžããŸãã
ç»åã¯ãmax-width
ããããã£ã䜿çšããŠ100%ã«èšå®ããããšã§ã容æã«ã¹ã±ãŒãªã³ã°ããããšãã§ããŸãã
img { max-width: 100%; height: auto; }
ãã®ã³ãŒãã«ãããç»åã¯èŠªèŠçŽ ã®å¹ ã«åãããŠèªåçã«ãµã€ãºã調æŽãããŸãã
ããã¹ãã®ã¹ã±ãŒãªã³ã°ã«ã¯ãçžå¯ŸçãªåäœïŒäŸïŒemãremïŒã䜿çšããããšã§ãããã¹ãã®ãµã€ãºãåçã«èª¿æŽããããšãã§ããŸãã
ãããã®æè¡ãçµã¿åãããããšã§ãããŸããŸãªããã€ã¹ãç»é¢ãµã€ãºã«é©å¿ããã¬ã¹ãã³ã·ããªãŠã§ãããŒãžãå®çŸããããšãã§ããŸãã
6. å¹æçãªè²ã®å©çš
ãŠã§ããã¶ã€ã³ã«ãããŠãè²ã¯éåžžã«éèŠãªèŠçŽ ã®äžã€ã§ããè²ã¯ããŠã§ããµã€ãã®é°å²æ°ããã©ã³ãã€ã¡ãŒãžã圢æããã ãã§ãªãããŠãŒã¶ãŒã®æ³šæãåŒãã€ããããã®åŒ·åãªããŒã«ãšããŠã䜿çšãããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãå¹æçãªè²ã®éžã³æ¹ãçµã¿åããã«ã€ããŠè©³ãã説æããŸãã
6.1 è²ã®éžã³æ¹
è²ã®éžã³æ¹ã¯ããŠã§ããµã€ãã®ç®çãã¿ãŒã²ãããšãªããŠãŒã¶ãŒå±€ã«ãã£ãŠç°ãªããŸããäŸãã°ãããžãã¹åãã®ãŠã§ããµã€ãã§ã¯ãéãã°ã¬ãŒãªã©ã®èœã¡çããè²ã奜ãŸããããšãå€ãã§ããäžæ¹ãåäŸåãã®ãŠã§ããµã€ãã§ã¯ãé®®ãããªè²ããã¹ãã«ã«ã©ãŒã䜿çšãããããšãå€ãã§ãã
è²ã®éžã³æ¹ã®ãã€ã³ãïŒ
- ãŠã§ããµã€ãã®ç®çããã©ã³ãã€ã¡ãŒãžã«åããã
- ã¿ãŒã²ãããšãªããŠãŒã¶ãŒå±€ã®å¥œã¿ãæåŸ ãèæ ®ãã
- è²åœ©å¿çãå©çšããŠããŠãŒã¶ãŒã®ææ ãè¡åãèªå°ãã
6.2 è²ã®çµã¿åãããšã³ã³ãã©ã¹ã
è²ã®çµã¿åããã¯ããŠã§ããã¶ã€ã³ã®å šäœçãªå°è±¡ãå¯èªæ§ã«å€§ããªåœ±é¿ãäžããŸããç¹ã«ãããã¹ãã®è²ãšèæ¯è²ã®çµã¿åããã¯ãæ å ±ãäŒããããã®åºæ¬çãªèŠçŽ ãšããŠéèŠã§ãã
å¹æçãªè²ã®çµã¿åããã®ãã€ã³ãïŒ
- ã³ã³ãã©ã¹ããæèãã: é«ãã³ã³ãã©ã¹ãã¯ãããã¹ãã®å¯èªæ§ãé«ããã ãã§ãªãããŠãŒã¶ãŒã®æ³šæãåŒãã€ããã®ã«ãå¹æçã§ãã
- è²ã®æ°ãéå®ãã: 3ã4è²çšåºŠã®çµã¿åãããæãå¹æçãšãããŠããŸãã
- è²ã®ãã©ã³ã¹ãåã: äž»èŠãªè²ãè£å©è²ãã¢ã¯ã»ã³ãã«ã©ãŒãé©åã«çµã¿åãããããšã§ã調åã®ãšãããã¶ã€ã³ãå®çŸããããšãã§ããŸãã
è²ã®çµã¿åãããã³ã³ãã©ã¹ããé©åã«å©çšããããšã§ããŠã§ããµã€ãã®ãã¶ã€ã³ãæ å ±äŒéã®å¹æãæ倧éã«åŒãåºãããšãã§ããŸãã
7. ã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³
ãŠã§ããã¶ã€ã³ã®äžçã§ã¯ãã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®é åçãªããŒã«ãšããŠæ³šç®ãããŠããŸãããããã®æè¡ã䜿çšããããšã§ããŠã§ãããŒãžã«åããæ»ãããªé·ç§»ãè¿œå ãããŠãŒã¶ãŒãšã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãåäžãããããšãã§ããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãåºæ¬çãªã¢ãã¡ãŒã·ã§ã³ã®äœææ¹æ³ãšãã©ã³ãžã·ã§ã³ã®å©çšæ¹æ³ã«ã€ããŠè©³ãã説æããŸãã
7.1 åºæ¬çãªã¢ãã¡ãŒã·ã§ã³ã®äœæ
CSSã䜿çšããŠããŠã§ãããŒãžã®èŠçŽ ã«ã¢ãã¡ãŒã·ã§ã³ãè¿œå ããããšãã§ããŸããäŸãã°ããã¿ã³ã«ãããŒãããšãããããŒãžãèªã¿èŸŒãŸãããšãã«ç¹å®ã®ã¢ãã¡ãŒã·ã§ã³ãå®è¡ããããšãã§ããŸãã
以äžã¯ããã¿ã³ã«ãããŒãããšãã«ãã§ãŒãã€ã³ããã¢ãã¡ãŒã·ã§ã³ãè¿œå ããäŸã§ãã
button:hover { animation: fadeIn 1s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
ãã®ã³ãŒãã§ã¯ã@keyframes
ã䜿çšããŠfadeIn
ãšããã¢ãã¡ãŒã·ã§ã³ãå®çŸ©ããŠããŸãããããŠããã¿ã³ã«ãããŒãããšãã«ãã®ã¢ãã¡ãŒã·ã§ã³ãå®è¡ããŸãã
7.2 ãã©ã³ãžã·ã§ã³ã®å©çšæ¹æ³
ãã©ã³ãžã·ã§ã³ã¯ãããç¶æ ããå¥ã®ç¶æ ãžã®å€åãæ»ããã«è¡šçŸããããã®æè¡ã§ããäŸãã°ããã¿ã³ã®è²ãå€æŽãããšãããèŠçŽ ã®äœçœ®ã移åãããšãã«ãã©ã³ãžã·ã§ã³ã䜿çšããããšãã§ããŸãã
以äžã¯ããã¿ã³ã®è²ããããŒãããšãã«æ»ããã«å€æŽãããã©ã³ãžã·ã§ã³ã®äŸã§ãã
button { background-color: blue; transition: background-color 0.5s; } button:hover { background-color: red; }
ãã®ã³ãŒãã§ã¯ãtransition
ããããã£ã䜿çšããŠãbackground-color
ã®å€åã0.5ç§ãããŠæ»ããã«è¡šçŸããŠããŸãã
ã¢ãã¡ãŒã·ã§ã³ãšãã©ã³ãžã·ã§ã³ãé©åã«äœ¿çšããããšã§ããŠã§ãããŒãžã®ãã¶ã€ã³ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãããã«åäžãããããšãã§ããŸãã
8. ãŸãšããšä»åŸã®åŠã³æ¹
ãã®èšäºãéããŠãCSSã®åºæ¬çãªæŠå¿µãæè¡ã«ã€ããŠåŠã¶ããšãã§ããŸããããããããŠã§ããã¶ã€ã³ã®äžçã¯æ¥ã é²åããŠãããåžžã«æ°ããæè¡ããã¬ã³ããç»å ŽããŠããŸãããã®ã»ã¯ã·ã§ã³ã§ã¯ãä»åŸã®åŠã³æ¹ããªãœãŒã¹ã«ã€ããŠã®ã¢ããã€ã¹ãæäŸããŸãã
8.1 CSSã®ç¶ç¶çãªåŠç¿
CSSã¯ãåºæ¬çãªæŠå¿µãç解ããã°åå¿è ã§ãç°¡åã«åãçµãããšãã§ããæè¡ã®äžã€ã§ãããããããããã§ãã·ã§ãã«ãªãŠã§ããã¶ã€ã³ãç®æãå Žåãç¶ç¶çãªåŠç¿ãšå®è·µãå¿ èŠã§ãã
æ°ããããããã£ãã»ã¬ã¯ã¿ãã¢ãã¡ãŒã·ã§ã³æè¡ãªã©ãCSSã«ã¯ãŸã ãŸã åŠã¶ã¹ãå 容ããããããããŸããå ¬åŒããã¥ã¡ã³ãããªã³ã©ã€ã³ã®ãã¥ãŒããªã¢ã«ã掻çšããŠãæ¥ã ã®ãã¶ã€ã³å®è·µã«åãå ¥ããããšã§ãã¹ãã«ã磚ãäžããããšãã§ããŸãã
8.2 ã³ãã¥ããã£ãšãªãœãŒã¹
ãŠã§ããã¶ã€ã³ãéçºã®ã³ãã¥ããã£ã¯ãæ°ããç¥èãæè¡ãåŠã¶ããã®çŽ æŽããããªãœãŒã¹ã§ããå€ãã®ãã¶ã€ããŒãéçºè ããèªãã®çµéšãç¥èãå ±æããããã®ããã°ããã¥ãŒããªã¢ã«ãå ¬éããŠããŸãã
ãŸããGitHubãStack Overflowãªã©ã®ãã©ãããã©ãŒã ã§ã¯ãå ·äœçãªåé¡ãçåã«å¯ŸããçããèŠã€ããããšãã§ããŸãããããã®ã³ãã¥ããã£ã«åå ããããšã§ãææ°ã®ãã¬ã³ãããã¹ããã©ã¯ãã£ã¹ã«ã€ããŠåŠã¶ããšãã§ããŸãã
æåŸã«ãCSSããŠã§ããã¶ã€ã³ã®åŠç¿ã¯ãçµããããªãæ ã®ãããªãã®ã§ããæ°ããæè¡ããã¬ã³ãã«åžžã«ã¢ã³ããã匵ãã€ã€ãèªãã®ã¹ã¿ã€ã«ãå²åŠãæã€ããšããçŽ æŽããããŠã§ããã¶ã€ããŒã«ãªãããã®éµãšãªããŸãã