-CSSã§ã®ãã¯ã»ã«ã®ç§»åã¯ãã§ã«å°é£ã§ããïŒ ãããŠä»ã圌ãã¯éã»ãã³ãã£ãã¯ãªã¯ã©ã¹åãHTMLã®ã€ã³ã©ã€ã³ã¹ã¿ã€ã«ã䜿çšããããã«JavaScriptã§CSSã¹ã¿ã€ã«ãæžãããšã®ãããããšãæããŠãããŸãïŒ
[ããã«Family Guyã®GIFãæ¿å ¥]-ãïŒ
ã©ã€ã¢ã³ã»ããŒã¹ã«ããæç«ã³ããã¯ã®ã€ã©ã¹ã
å¥åŠãªããšã«ãCSSã¯ãåæã«Webéçºè ã«ãšã£ãŠæãåçŽãªèšèªã®1ã€ã§ãããæãè€éãªèšèªã®1ã€ã§ããããšèããããŠããŸãã 確ãã«ãæåã¯éåžžã«ç°¡åã§ããã¹ã¿ã€ã«ã®ããããã£ãç¹å®ã®èŠçŽ ã®å€ãå®çŸ©ãã...ç¥ã£ãŠããããšã¯ã»ãšãã©ãã¹ãŠã§ãïŒ ãã ãã倧èŠæš¡ãªãããžã§ã¯ãã§ã¯ãCSSãäœããã®æå³ã®ããæ¹æ³ã§æŽçããããã«ãç¶æ³ãéåžžã«è€éã§è€éã«ãªããŸãã 1ã€ã®ããŒãžã®èŠçŽ ãã¹ã¿ã€ã«èšå®ããããã«CSSè¡ãå€æŽãããšãä»ã®ããŒãžã®èŠçŽ ã«æå³ããªãçµæãçããããšããããããŸãã
CSSã®æ¬è³ªçãªè€éããç解ããããã«ãããŸããŸãªãã¹ããã©ã¯ãã£ã¹ãäœæãããŠããŸãã åé¡ã¯ãã©ããæè¯ã§ãããã«é¢ããŠãŸã ã³ã³ã»ã³ãµã¹ããªãããããã®å€ããäºãã«å®å šã«ççŸããŠããããšã§ãã CSSãåŠç¿ããã®ããããåããŠã®å Žåããã®ç¶æ³ã¯æ§ããã«èšã£ãŠãèŠåœéãã§ãã
ãã®èšäºã®ç®æšã¯ãCSSã®ææ³ãšããŒã«ã2018幎ã«çŸåšã®ç¶æ ã«ã©ã®ããã«é²åããããšããæŽå²çèæ¯ã瀺ãããšã§ãã ãã®ã¹ããŒãªãŒãç解ããããšã«ãããåã¢ãããŒããšãããæçã«äœ¿çšããæ¹æ³ãç解ãããããªããŸãã ããã§ã¯å§ããŸãããïŒ
åºæ¬ã¹ã¿ã€ã«ã«CSSã䜿çšãã
å¥ã®
index.css
ãã¡ã€ã«ã«ãªã³ã¯ããåçŽãª
index.html
ãã¡ã€ã«ã®ã¿ã䜿çšããåçŽãªWebãµã€ãããå§ããŸãããã
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> <footer>This is the footer.</footer> </body> </html>
HTMLã§ã¯ã¯ã©ã¹ãIDã¯äœ¿çšããŸãããã ã»ãã³ãã£ãã¯ã¿ã°ã®ã¿ã䜿çšããŸã ã éåžžãCSSã䜿çšããªãå ŽåãWebãµã€ãã¯æ¬¡ã®ããã«ãªããŸãïŒãã¬ãŒã¹ãã«ããŒããã¹ãä»ãïŒã
å®éã®äŸã«ã€ããŠã¯ããããã¯ãªãã¯ããŠãã ããã
æ©èœçã§ãããããŸããããã§ã¯ãããŸããã
index.css
åºæ¬ã¬ã€ã¢ãŠããæ¹åããããã«CSSãè¿œå ã§ããŸãã
/* BASIC TYPOGRAPHY */ /* from https://github.com/oxalorg/sakura */ html { font-size: 62.5%; font-family: serif; } body { font-size: 1.8rem; line-height: 1.618; max-width: 38em; margin: auto; color: #4a4a4a; background-color: #f9f9f9; padding: 13px; } @media (max-width: 684px) { body { font-size: 1.53rem; } } @media (max-width: 382px) { body { font-size: 1.35rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-family: Verdana, Geneva, sans-serif; font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } h1 { font-size: 2.35em; } h2 { font-size: 2em; } h3 { font-size: 1.75em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1em; }
ããã§ãCSSã®ã»ãšãã©ã¯ãã¶ã€ã³ã¹ã¿ã€ã«ïŒãã©ã³ããµã€ãºãè¡ã®é«ããªã©ïŒã§ãããããã€ãã®è²ã¹ã¿ã€ã«ãšäžå€®æãã®ã¬ã€ã¢ãŠãããããŸãã ãããã®ãã©ã¡ãŒã¿ãŒã®é©åãªå€ãèŠã€ããããã«èšèšãæ€èšããå¿ èŠããããŸãïŒããã«sakura.cssã®ã¹ã¿ã€ã«ããããŸãïŒããCSSã³ãŒãèªäœã¯ããã§èªãã»ã©è€éã§ã¯ãããŸããã çµæã¯æ¬¡ã®ããã«ãªããŸãã
å®éã®äŸã«ã€ããŠã¯ããããã¯ãªãã¯ããŠãã ããã
ãªããšããéãïŒ ãã®CSSã¡ãã»ãŒãžã¯ãããã°ã©ãã³ã°ãè€éãªããžãã¯ãªãã§ãããã¥ã¡ã³ãã«ã¹ã¿ã€ã«ãè¿œå ããç°¡åãªæ¹æ³ã§ãã æ®å¿µãªããããã¶ã€ã³ãè²ã ãã§ãªãCSSã䜿çšãå§ãããšãäºæ ã¯ããå°ãè€éã«ãªããŸãïŒåŸã§èª¬æããŸãïŒã
ããŒã¯ã¢ããã«CSSã䜿çšãã
1990幎代ãCSSãåºãæ¡çšãããåã¯ãããŒãžäžã®ã³ã³ãã³ããããŒã¯ã¢ããããããã®ãªãã·ã§ã³ã¯ã»ãšãã©ãããŸããã§ããã HTMLã¯å ã ããµã€ãã¡ãã¥ãŒãåãªã©ãåããåçãªWebãµã€ãã§ã¯ãªããåçŽãªããã¥ã¡ã³ããäœæããããã®èšèªãšããŠèšèšãããŸããã åœæãããŒã¯ã¢ããã¯å€ãã®å ŽåHTMLããŒãã«ã§è¡ãããŸãããããŒãžå šäœãããŒãã«ã«å®å šã«é 眮ãããã³ã³ãã³ããåãšè¡ã«æŽçããããã«äœ¿çšãããŠããŸããã ãã®ã¢ãããŒãã¯æ©èœããŸããããè£åŽã¯ã³ã³ãã³ããšãã¬ãŒã³ããŒã·ã§ã³ã®å¯æ¥ãªãªã³ã¯ã§ãã-ãµã€ãã®ããŒã¯ã¢ãããå€æŽãããå Žåã¯ãããªãã®éã®HTMLãæžãçŽãå¿ èŠããã£ãããšããããŸããã
CSSã¯ãã³ã³ãã³ãïŒHTMLã§èšè¿°ãããïŒãšãã¬ãŒã³ããŒã·ã§ã³ïŒCSSã§èšè¿°ãããïŒã®åé¢ã«åŒ·ãæšé²åãäžããŸããã CSSã§HTMLãããã¹ãŠã®ããŒã¯ã¢ãããæœåºããæ¹æ³ããããŸããïŒããŒãã«ã¯ãããããŸããïŒã HTMLã®ãããªCSSãå ã ããŒãžã¬ã€ã¢ãŠãçšã«èšèšãããŠããªãã£ããããæåã®ã¬ã€ã¢ãŠãã®è©Šã¿ã¯ãšã¬ã¬ã³ããšã¯èšãé£ãããšã«æ³šæããããšãéèŠã§ãã
äžèšã®äŸã§å®éã«ãããã©ã®ããã«æ©èœããããèŠãŠã¿ãŸãããã CSSããŒã¯ã¢ãããå®çŸ©ããåã«ããŸããã¹ãŠã®ããŒãžã³ãšã€ã³ãã³ãïŒããŒã¯ã¢ããã®èšç®ã«åœ±é¿ããŸãïŒããªã»ããããã»ã¯ã·ã§ã³ãç°ãªãè²ã§ããŒã¯ããŸãïŒçŸããã§ã¯ãªããç°ãªãã¬ã€ã¢ãŠãããã¹ããããšãã«èŠèŠçã«åºå¥ããããïŒã
/* RESET LAYOUT AND ADD COLORS */ body { margin: 0; padding: 0; max-width: inherit; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
ããã§ãWebãµã€ãã¯äžæçã«æ¬¡ã®ããã«ãªããŸãã
å®éã®äŸã«ã€ããŠã¯ããããã¯ãªãã¯ããŠãã ããã
ããã§ãCSSã䜿çšããŠããŒãžäžã®ã³ã³ãã³ããããŒã¯ã¢ããããæºåãã§ããŸããã å€å žçãªãããŒãã¬ã€ã¢ãŠãããå§ããŠãæç³»åã§3ã€ã®ç°ãªãã¢ãããŒããè©äŸ¡ããŸãããã
ãããŒãããŒã¹ã®ã¬ã€ã¢ãŠã
CSSã®floatããããã£ã¯ãå ã ãå·ŠãŸãã¯å³ã®ããã¹ãåå ã«ç»åãé 眮ããããã«å°å ¥ãããŸããïŒæ°èã§ããèŠãããŸãïŒã 2000幎代åæã®Webéçºè ã¯ãfloatããããã£ãç»åã ãã§ãªãä»»æã®èŠçŽ ã«å²ãåœãŠãããšãã§ãããšããäºå®ãå©çšããŸãããã€ãŸããã³ã³ãã³ãã®divå šäœã«floatãå²ãåœãŠãããšã§è¡ãšåã®é¯èŠãäœæã§ããŸãã ããããåã³ããããŒãã¯ãã®ç®çã®ããã«æå³ãããŠããªãããããã®ãããªé¯èŠã¯äžè²«ããæ¹æ³ã§å®è£ ããããšã¯å°é£ã§ãã
2006幎ã A List Apartã¯äººæ°ã®èšäºãFinding the Holy Grailããå ¬éããŸããããã®èšäºã§ã¯ãããããŒã3åãããã¿ãŒãšããHoly GrailãšããŠç¥ãããã¬ã€ã¢ãŠããäœæããããã®è©³çŽ°ãã€åŸ¹åºçãªã¢ãããŒããæŠèª¬ããŸããã ä»ã§ã¯ããã®ãããªéåžžã«åçŽãªã¬ã€ã¢ãŠããèæ¯ãšåŒã°ããŠããã®ã¯ããããããã§ãããçŽç²ãªCSSã§å ç¢ãªã¬ã€ã¢ãŠããäœæããããšã¯éåžžã«å°é£ã§ããã
以äžã¯ãèšäºã§èª¬æãããŠããææ³ã«åºã¥ããäŸã®ãããŒãã«åºã¥ãã¬ã€ã¢ãŠãã§ãã
/* FLOAT-BASED LAYOUT */ body { padding-left: 200px; padding-right: 190px; min-width: 240px; } header, footer { margin-left: -200px; margin-right: -190px; } main, nav, aside { position: relative; float: left; } main { padding: 0 20px; width: 100%; } nav { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; } aside { width: 130px; padding: 0 10px; margin-right: -100%; } footer { clear: both; } * html nav { left: 150px; }
CSSãèŠããšãã¬ã€ã¢ãŠããæ©èœããããã«å¿ èŠãªããã€ãã®ããã¯ïŒè² ã®å¢çç·ã
clear: both
ããããã£ãããŒãã³ãŒããããå¹ ã®èšç®ãªã©ïŒãèŠãããšãã§ããŸã-ãããã®åããã¯ã®å¿ èŠæ§ã«ã€ããŠè©³ãã説æããŠããŸãã çµæã¯æ¬¡ã®ãšããã§ãã
å®éã®äŸã«ã€ããŠã¯ããããã¯ãªãã¯ããŠãã ããã
æªãã¯ãããŸãããã3ã€ã®è²ã¯åã®é«ããç°ãªã£ãŠããããšã瀺ããŠãããããŒãžã¯ç»é¢ã®é«ãå šäœãåããŠããŸããã ãããŒãã¢ãããŒãã䜿çšããå Žåããããã¯é¿ããããªãåé¡ã§ãã ãããŒãã§ã§ããããšã¯ãã³ã³ãã³ããã»ã¯ã·ã§ã³ã®å·ŠãŸãã¯å³ã®å¢çã«ããã·ã¥ããããšã ãã§ããCSSã«ã¯ãä»ã®ã»ã¯ã·ã§ã³ã®ã³ã³ãã³ãã®é«ãã«åœ±é¿ãäžããæ¹æ³ã¯ãããŸããã äœå¹Žãã®éããã¬ãã¯ã¹ããã¯ã¹ããŒã¹ã®ã¬ã€ã¢ãŠããç»å ŽãããŸã§ããã®åé¡ã«ã¯åçŽãªè§£æ±ºçãæ¬ ããŠããŸããã
ãã¬ãã¯ã¹ããã¯ã¹ããŒã¹ã®ã¬ã€ã¢ãŠã
CSSãã¬ãã¯ã¹ããã¯ã¹ããããã£ã¯2009幎ã«åããŠææ¡ãããŸãããã2015幎é ãŸã§ãã©ãŠã¶ã§ã®åºç¯ãªãµããŒããåããŠããŸããã§ããã ãã®ããããã£ã¯ã1ã€ã®åãŸãã¯è¡ã«ã¹ããŒã¹ãã©ã®ããã«é åããããã決å®ããããã«èšèšãããŠããããããããŒããããé©åãªã¬ã€ã¢ãŠãã¡ãœããã«ãªããŸãã ãããã£ãŠããããŒãã«åºã¥ããã¬ã€ã¢ãŠãã10幎é䜿çšããåŸãWebéçºè ã¯ããããŒãäžã®ã¬ã€ã¢ãŠãã«åºæã®ãããã³ã°ãªãã§ã¬ã€ã¢ãŠãã«CSSã䜿çšã§ããããã«ãªããŸããã
以äžã¯ããã®äŸã®ãã¬ãã¯ã¹ããã¯ã¹ããŒã¹ã®ã¬ã€ã¢ãŠãã§ãã ããã¯ã Solved by Flexbox Webãµã€ã ïŒflexboxã§ããŸããŸãªäŸãå ¬éããŠããäžè¬çãªãªãœãŒã¹ïŒã§èª¬æãããŠããææ³ã«åºã¥ããŠããŸãã flexboxã«ã¯ãHTMLã®3ã€ã®åãå²ãè¿œå ã®ã©ãããŒdivãå¿ èŠã§ããããšã«æ³šæããŠãã ããã
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"> </head> <body> <header>This is the header.</header> <div class="container"> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> </div> <footer>This is the footer.</footer> </body> </html>
CSSã®flexboxã³ãŒãã¯æ¬¡ã®ãšããã§ãã
/* FLEXBOX-BASED LAYOUT */ body { min-height: 100vh; display: flex; flex-direction: column; } .container { display: flex; flex: 1; } main { flex: 1; padding: 0 20px; } nav { flex: 0 0 180px; padding: 0 10px; order: -1; } aside { flex: 0 0 130px; padding: 0 10px; }
ããã¯ããããŒãããŒã¹ã®ã¬ã€ã¢ãŠãã«æ¯ã¹ãŠã¯ããã«ã³ã³ãã¯ããªã³ãŒãã§ãïŒ flexboxã®ããããã£ãšå€ã¯äžèŠæ··ä¹±ããŸãããè² ã®å¢çã®ãããªå€æ°ã®ããã¯ã®å¿ èŠæ§ãæé€ããŸã-倧ããªåå©ã§ãã çµæã¯æ¬¡ã®ãšããã§ãã
å®éã®äŸã«ã€ããŠã¯ããããã¯ãªãã¯ããŠãã ããã
ã¯ããã«è¯ãïŒ ãã¹ãŠã®åã¯åãé«ãã§ãããŒãžã®é«ãå šäœãå ããŸãã ããæå³ãããã¯å®ç§ã«èŠããŸããããã®ã¢ãããŒãã«ã¯ããã€ãã®å°ããªæ¬ é¥ããããŸãã ãŸãããã©ãŠã¶ãŒã®ãµããŒã-çŸåšããã¹ãŠã®ææ°ãã©ãŠã¶ãŒãflexboxããµããŒãããŠããŸãããäžéšã®å€ããã©ãŠã¶ãŒã¯flexboxããµããŒãããŸããã 幞ããªããšã«ããã©ãŠã¶ãŒéçºè ã¯å€ãããŒãžã§ã³ã®ã©ã€ããµã€ã¯ã«ãçµäºããããã«éèŠãªã¹ããããåã£ãŠãããããWebãã¶ã€ããŒã®éçºç°å¢ãããå®å®ããŸãã å¥ã®æ¬ ç¹-
<div class="container">
ãããŒã¯ã¢ããã«è¿œå ããå¿ èŠããããšããäºå®-ãããªãã§è¡ãã®ã¯è¯ãããšã§ãã çæ³çãªäžçã§ã¯ãã©ã®CSSã¬ã€ã¢ãŠãã§ãHTMLããŒã¯ã¢ãããç·šéããå¿ èŠã¯ãŸã£ãããããŸããã
ããããæ倧ã®æ¬ é¥ã¯CSSã³ãŒãèªäœã«ãããŸãã Flexboxã¯å€ãã®ãããŒãããã¯ãæé€ããŸãããã³ãŒãã¯ã¬ã€ã¢ãŠãã説æããã»ã©è¡šçŸåããããŸããã Flexbox CSSã¯èªã¿ã«ããããã¹ãŠã®èŠçŽ ãããŒãžã«ã©ã®ããã«è¡šç€ºãããããèŠèŠçã«ç解ããã®ã¯å°é£ã§ãã ãã®ãããæ£ãããã©ã¡ãŒã¿ãŒãæšæž¬ããããšããŠããŸã-ãããŠäœãèµ·ãã£ãã®ãã確èªããŠãã ããã
ãã¬ãã¯ã¹ããã¯ã¹ã¯ãèŠçŽ ãåäžã®åãŸãã¯è¡ã«é 眮ããããã«èšèšãããŠããããšãããäžåºŠåŒ·èª¿ããããšãéèŠã§ããããŒãžå šäœãã¬ã€ã¢ãŠãããããã«èšèšãããŠããããã§ã¯ãããŸããã 圌ã¯ããã«ããŸã察å¿ããŠããŸããïŒãããŒãã¢ãããŒããããã¯ããã«åªããŠããŸãïŒãä»ã®ä»æ§ã¯ããã€ãã®åãŸãã¯è¡ã®ã¬ã€ã¢ãŠãçšã«ç¹å¥ã«éçºãããŸããã CSSã°ãªãããšåŒã°ããŸãã
ã°ãªããããŒã¹ã®ã¬ã€ã¢ãŠã
CSSã°ãªããã¯2011幎ã«æåã«ææ¡ãããŸãããïŒãã¬ãã¯ã¹ããã¯ã¹ã»ã©é ãã¯ãããŸããã§ããïŒããã©ãŠã¶ãŒããµããŒããéå§ãããŸã§ã«é·ãæéãããããŸããã 2018幎ã®åãã«ãCSSã°ãªããã¯ææ°ã®ãã©ãŠã¶ãŒã®ã»ãšãã©ã§ãµããŒããããŠããŸãïŒ1幎ãŸãã¯2幎åã®ç¶æ³ãšæ¯èŒããŠå€§ããªåé²ã§ãïŒã
以äžã¯ããã®äŸã®ã°ãªããããŒã¹ã®ã¬ã€ã¢ãŠãã§ãã ããã¯ãCSSããªãã¯ã«é¢ãããã®èšäºã§èª¬æããæåã®æ¹æ³ã«åºã¥ããŠããŸãã ãã®äŸã§ã¯ã
<div class="container">
ãåãé€ãããšãã§ããããšã«æ³šæããŠãã ãããããã¯ããã¬ãã¯ã¹ããã¯ã¹ããŒã¹ã®ã¬ã€ã¢ãŠãã«è¿œå ããå¿ èŠããããŸããã ããã§ã¯ãå€æŽããã«å ã®HTMLã䜿çšããŠããŸãã CSSã¯æ¬¡ã®ããã«ãªããŸãã
/* GRID-BASED LAYOUT */ body { display: grid; min-height: 100vh; grid-template-columns: 200px 1fr 150px; grid-template-rows: min-content 1fr min-content; } header { grid-row: 1; grid-column: 1 / 4; } nav { grid-row: 2; grid-column: 1 / 2; padding: 0 10px; } main { grid-row: 2; grid-column: 2 / 3; padding: 0 20px; } aside { grid-row: 2; grid-column: 3 / 4; padding: 0 10px; } footer { grid-row: 3; grid-column: 1 / 4; }
çµæã¯ãflexboxããŒã¹ã®ã¬ã€ã¢ãŠããšèŠèŠçã«åãã§ãã ãã ããããã§ã¯ãCSSã³ãŒãã¯ãç®çã®ã¬ã€ã¢ãŠããæ確ã«è¡šç€ºãããšããæå³ã§ã¯ããã«åªããŠããŸãã åãšè¡ã®ãµã€ãºãšåœ¢ç¶ã¯ããã£ã»ã¬ã¯ã¿ã§å®çŸ©ãããåã°ãªããèŠçŽ ã¯ãã®äœçœ®ã«ãã£ãŠçŽæ¥æ±ºå®ãããŸãã
æ··ä¹±ãæãå¯èœæ§ã®ããå¯äžã®ãã®ã¯ã
grid-column
ã®éå§äœçœ®ãšçµäºäœçœ®ã決å®ãã
grid-column
ããããã£ã§ãã ãã®äŸã«ã¯3ã€ã®åããããŸããã1ã4ã®æ°åã䜿çšãããŠãããããæ··ä¹±ãæãå¯èœæ§ããããŸãã
å®éã®äŸã«ã€ããŠã¯ããããã¯ãªãã¯ããŠãã ããã
æåã®åã¯äœçœ®1ã§å§ãŸããäœçœ®2ã§çµããã2çªç®ã®åã¯2ã§å§ãŸã3ã§çµããã3çªç®ã®åã¯äœçœ®3ã§å§ãŸããäœçœ®4ã§çµãããŸããããããŒã¯ãæ¡åŒµã®ãã
1 / 4
å€
1 / 4
æã€
grid-column
ããããã£ã瀺ããŸãããŒãžå šäœã§ãnavã¯
1 / 2
å€
1 / 2
æã€
grid-column
ã瀺ããæåã®åãªã©ã«å±éããŸãã
ã°ãªããæ§æã«æ £ãããšããããCSSã§ã¬ã€ã¢ãŠããå®è£ ããçæ³çãªæ¹æ³ã§ããããšãæããã«ãªããŸãã å¯äžã®æ¬åœã®æ¬ ç¹ã¯ããã¹ãŠã®ãã©ãŠã¶ãŒã§ãµããŒããããŠããªãããšã§ãã ãã ãããã®1幎ã§ç¶æ³ã¯å€§å¹ ã«æ¹åãããŸããã CSSã°ãªããã®äŸ¡å€ããCSSã®æåã®å®éã®ããŒã«ãšããŠé倧è©äŸ¡ããããšã¯å°é£ã§ããCSSã°ãªããã¯ãã¬ã€ã¢ãŠããã€ãŸãããŒãžå šäœã®ã¬ã€ã¢ãŠãçšã«äœæããããã®ã§ãã ããæå³ã§ãWebãã¶ã€ããŒã¯ã¯ãªãšã€ãã£ãã¬ã€ã¢ãŠããäœæãããšãã¯åžžã«éåžžã«ä¿å®çã§ãªããã°ãªããŸããã§ãããæè¿ãŸã§ããŒã«ã¯éåžžã«å£ãããããããŸããŸãªããã¯ãéæšæºã®æãç©Žãå¿ èŠã ã£ãããã§ãã CSSã°ãªããã®ç»å Žã«ããããããŸã§ã«äœæã§ããªãã£ãåµé çãªãã¶ã€ã³ã¬ã€ã¢ãŠãã®æ°ããæ³¢ãçãŸããå¯èœæ§ããããŸã-çŽ æŽãããæã§ãïŒ
-ããã£ãïŒ CSSã§äœããå€æŽãããšãä»ã®äœããå£ããŠããŸãã®ã¯é¢çœãããšã§ãïŒ
ããã¶ããããããã¬ãã¯ã¹ããã¯ã¹ãã°ãªããã®ãããªæ°ããä»æ§ã§ãç¶æ³ã¯ãã£ãšè¯ããªã£ãïŒã
-ãïŒ CSSã«ã¯ãã¬ã€ã¢ãŠãã ãã§ãªããããã«å°é£ããããŸãïŒ
æ°ããæ§æã«CSSããªããã»ããµã䜿çšãã
ãããŸã§ãåçŽãªã¹ã¿ã€ã«ãšã¬ã€ã¢ãŠãã«CSSã䜿çšããããšãèŠãŠããŸããã 次ã«ãCSSèšèªèªäœãæäœããã®ã«åœ¹ç«ã€ããŒã«ã«ã€ããŠèª¬æããŸãã CSSããªããã»ããµããå§ããŸãããã
CSSããªããã»ããµã䜿çšãããšãã¹ã¿ã€ã«ãä»ã®èšèªã§èšè¿°ã§ããŸãããã®åŸãã¹ã¿ã€ã«ã¯CSSã«å€æããããã©ãŠã¶ãç解ã§ããããã«ãªããŸãã ããã¯ããã©ãŠã¶ãæ°æ©èœã®ãµããŒããããŸãã«ããã£ãããšå°å ¥ãããšãã«éåžžã«éèŠã§ããã æåã®äººæ°ã®ããCSS Sassããªããã»ããµã¯2006幎ã«ãªãªãŒã¹ãããŸããã æ°ããçãæ§æïŒæ¬åŒ§ã®ä»£ããã«ã€ã³ãã³ããã»ãã³ãã³ããªããªã©ïŒãå®è£ ããå€æ°ãè£å©é¢æ°ãèšç®ãªã©ãCSSã§ã¯å©çšã§ããªãé«åºŠãªé¢æ°ãè¿œå ããŸããã Sassãå€æ°ãšãšãã«äœ¿çšããå Žåãåã®äŸã®ã«ã©ãŒã»ã¯ã·ã§ã³ã¯æ¬¡ã®ããã«ãªããŸãã
$dark-color: #4a4a4a $light-color: #f9f9f9 $side-color: #eee body color: $dark-color header, footer background-color: $dark-color color: $light-color main background: $light-color nav, aside background: $side-color
$
èšå·ãåå©çšå¯èœãªå€æ°ã瀺ããŠããããšã«æ³šæããŠãã ããã äžæ¬åŒ§ãã»ãã³ãã³ã¯ãªããããæ§æããããããããªããŸãã çŽç²ãªæ§æã¯çŽ æŽãããã§ãããå€æ°ã®ãããªé¢æ°ã¯ãã¯ãªãŒã³ã§ä¿å®å¯èœãªCSSãæžãããã®æ°ããå¯èœæ§ãéããã®ã§ããã®æã«çã®é©åœãèµ·ãããŸããã
Sassã䜿çšããã«ã¯ãRubyãã€ã³ã¹ããŒã«ããå¿ èŠããããŸãã ãã®ããã°ã©ãã³ã°èšèªã¯ãSassã³ãŒããéåžžã®CSSã«ã³ã³ãã€ã«ããããã«äœ¿çšãããŸãã 次ã«ã Sass gemãã€ã³ã¹ããŒã«ããã³ãã³ãã©ã€ã³ã§ã³ãã³ããå®è¡ããŠã.sassãã¡ã€ã«ã.cssãã¡ã€ã«ã«å€æããå¿ èŠããããŸãã ãã®ã³ãã³ãã®è¡šç€ºäŸã次ã«ç€ºããŸãã
sass --watch index.sass index.css
ãã®ã³ãã³ãã¯ã
index.sass
ãã¡ã€ã«ã®Sassã³ãŒãã
index.sass
ãã¡ã€ã«ã®éåžžã®CSSã«
index.css
ãŸãïŒ
--watch
åŒæ°ã¯ãä¿ååŸã«å ¥åãå€æŽããããã³ã«éå§ããããšã瀺ããŸããããã¯äŸ¿å©ã§ãïŒã
ãã®ãããªããã»ã¹ã¯ã¢ã»ã³ããªãã§ãŒãºãšåŒã°ãã2006幎ã«ã¯åå ¥ã«ãšã£ãŠããªãéèŠãªéå£ã§ããã Rubyã®ãããªããã°ã©ãã³ã°èšèªãäžè¶³ããŠããå Žåã¯ããã¹ãŠãç°¡åã§ãã ããããåœæã®å€ãã®ããã³ããšã³ãéçºè ã¯ããã®ãããªããŒã«ãäžèŠãªHTMLãšCSSã®ã¿ã§äœæ¥ããŠããŸããã ãããã£ãŠãããã¯ãCSSããªããã»ããµæ©èœã䜿çšããããã«ãéçºè ããšã³ã·ã¹ãã å šäœã調æ»ããããã®ããªãã®èŠä»¶ã§ãã
2009幎ã«ãCSS Lessããªããã»ããµããªãªãŒã¹ãããŸããã ãŸããRubyã§èšè¿°ãããŠãããSassãšåæ§ã®æ©èœãåããŠããŸãã äž»ãªéãã¯ãå¯èœãªéãCSSã«é¡äŒŒããæ§æã§ããã ããã¯ãCSSã³ãŒããæå¹ãªLessã³ãŒãã§ããããšãæå³ããŸãã 以äžã«ãLessæ§æã䜿çšããåãäŸã瀺ããŸãã
@dark-color: #4a4a4a; @light-color: #f9f9f9; @side-color: #eee; body { color: @dark-color; } header, footer { background-color: @dark-color; color: @light-color; } main { background: @light-color; } nav, aside { background: @side-color; }
ã»ãšãã©éãã¯ãããŸããïŒå€æ°ã®
$
代ããã«
@
ãã¬ãã£ãã¯ã¹ã®ã¿ïŒããSassã®äŸã»ã©ãããã«èŠããŸããã ããã§ã¯ãCSSãšåãäžæ¬åŒ§ãšã»ãã³ãã³ã衚瀺ãããŸãã ããããCSSã«è¿ããšããäºå®ã«ãããWebãã¶ã€ããŒã¯ãã®ããªããã»ããµãç¿åŸãããããªããŸããã 2012幎ãLessã¯ãã³ã³ãã€ã«æã«Rubyã®ä»£ããã«JavaScriptïŒå ·äœçã«ã¯Node.js ïŒã䜿çšããããã«æžãçŽãããŸããã ãã®åŸãLessã¯Rubyã®ç«¶åä»ç€Ÿãããéãåäœãå§ããããªããã»ããµèªäœã¯ããã§ã«Node.jsã䜿çšããŠããéçºè ã«ãšã£ãŠããé åçã«ãªããŸããã
äžèšã®ã³ãŒããéåžžã®CSSã«å€æããã«ã¯ããŸãNode.jsãã€ã³ã¹ããŒã«ã ã次ã«Lessãã€ã³ã¹ããŒã«ããŠã³ãã³ããå®è¡ããå¿ èŠããããŸãã
lessc index.less index.css
ãã®ã³ãã³ãã¯ã
index.less
ãã¡ã€ã«ã®lessã³ãŒãã
index.less
ãã¡ã€ã«ã®éåžžã®CSSã«
index.css
ãŸãã
sass
ããã¡ã€ã«ã®å€æŽãç£èŠãã
lessc
ã³ãã³ãããªãããšã«æ³šæããŠãã ããã ãã®ãããä»ã®ããŒã«ã䜿çšããŠ
.less
ãã¡ã€ã«ãèªåçã«è¿œè·¡ããã³ã³ã³ãã€ã«ãã
.less
ããããããã»ã¹ãå°ãè€éã«ãªããŸãã ç¹°ãè¿ãã«ãªããŸãããã³ãã³ãã©ã€ã³ããŒã«ã®äœ¿çšã«æ £ããŠããããã°ã©ããŒã«ãšã£ãŠè€éãªããšã¯ãããŸããããããã¯ãCSSããªããã»ããµãŒãåã«äœ¿çšãããæ®éã®ãã¶ã€ããŒã«ãšã£ãŠå€§ããªéå£ã§ãã
Lessã人æ°ãåãããšããSasséçºè ã¯2010幎ã«ããªããã»ããµã«æ°ããSCSSæ§æãè¿œå ããŸããïŒLessã«äŒŒãCSSã®ã¹ãŒããŒã»ããïŒã ãŸããC / C ++ã®Ruby Sassãšã³ãžã³ã®ç§»æ€çã§ããLibSassããªãªãŒã¹ããŸãã ãããã«ãããäœæ¥ãå éãããããŸããŸãªèšèªã§ã®ããã°ã©ãã³ã°ãå¯èœã«ãªããŸããã
å¥ã®ä»£æ¿CSS Stylusããªããã»ããµã2010幎ã«ãªãªãŒã¹ãããŸããã Node.jsã§èšè¿°ãããŠãããSassãŸãã¯Lessãããç°¡æœãªæ§æã§ãã éåžžãCSSããªããã»ããµã®èª¬æã§ã¯ããããã®3ã€ã®ããã°ã©ã ãæãäžè¬çãªãã®ãšããŠèšåãããŠããŸãïŒSassãLessãããã³StylusïŒã æçµçã«ããããã¯ãã¹ãŠæ©èœãéåžžã«äŒŒãŠãããããããããéžæããŠãééããããŸããã
ãã ãããã©ãŠã¶ãæçµçã«æ©èœïŒå€æ°ãèšç®ãªã©ïŒã®äžéšãå®è£ ãå§ãããããCSSããªããã»ããµã®äŸ¡å€ãæè¿äœäžãããšèãã人ãããŸãã ããã«ãå察ã®ã¢ãããŒãããããŸã-CSSåŸåŠçãããã¯ãCSSããªããã»ããµãå®å šã«æ代é ãã«ãªãå¯èœæ§ãããããã§ãïŒæããã«ããã¯è«ç¹ã§ãïŒã ããããæ€èšããCSSãã¹ãããã»ããµã
å€æé¢æ°ã«CSSãã¹ãããã»ããµã䜿çšãã
CSSãã¹ãããã»ããµã¯ãJavaScriptã䜿çšããŠCSSã解æããæå¹ãªCSSã«å€æããŸãã ãã®æå³ã§ã¯ãCSSããªããã»ããµã«éåžžã«äŒŒãŠããŸã-åãåé¡ã解決ããå¥ã®æ¹æ³ãšèããããšãã§ããŸãã äž»ãªéãã¯ãCSSããªããã»ããµãç¹å¥ãªæ§æã䜿çšããŠå€æãªããžã§ã¯ããå®çŸ©ããCSSãã¹ãããã»ããµãå ã®CSSã³ãŒãã解æããŠç¹å¥ãªæ§æãªãã§å€æã§ããããšã§ãã äŸã§ããã瀺ãã®ãæåã§ãã ããããŒã¿ã°ã®ã¹ã¿ã€ã«ãå®çŸ©ããäžèšã®äŸã®CSSéšåãèŠãŠã¿ãŸãããã
h1, h2, h3, h4, h5, h6 { -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
2è¡ç®ãã4è¡ç®ã¯ãã³ããŒãã¬ãã£ãã¯ã¹ãšåŒã°ããŸãã ãã©ãŠã¶ã¯ãæ°ããCSSæ©èœããã¹ããããšãããŸãã¯å®éšã¢ãŒãã§äœ¿çšãããšãã«ãã³ããŒãã¬ãã£ãã¯ã¹ã䜿çšããŸãã ãã®ããã«ããŠãéçºè ã¯ãããã®æ©èœããã¹ãããŠããããã©ãŠã¶ã«æçµçã«å®è£ ã§ããŸãã Microsoft Internet Explorerã®
-ms
ãã¬ãã£ãã¯ã¹ãMozilla Firefoxã®
-moz
ãã¬ãã£ãã¯ã¹ãWebkitãã©ãŠã¶ãŒïŒGoogle ChromeãSafariãOperaã®ææ°ããŒãžã§ã³ãªã©ïŒã®
-webkit
ãã¬ãã£ãã¯ã¹ã¯
-webkit
ã§ãã
ãããã®ããŸããŸãªãã³ããŒãã¬ãã£ãã¯ã¹ãåã蟌ãã§CSSããããã£ã䜿çšããã®ã¯ããªãäžäŸ¿ã§ãã å¿ èŠã«å¿ããŠãããã€ãã®ããŒã«ããããèªåçã«è¡ã£ãŠããããå¬ããã§ãã ããã¯ãCSSããªããã»ããµã䜿çšããŠå®è¡ã§ããŸãã ããšãã°ãSCSSæ§æã§ã¯ïŒ
@mixin hyphens($value) { -ms-hyphens: $value; -moz-hyphens: $value; -webkit-hyphens: $value; hyphens: $value; } h1, h2, h3, h4, h5, h6 { @include hyphens(auto); }
ããã§ã¯ãSassã®mixiné¢æ°ã䜿çšããŸãããã®é¢æ°ã¯ãCSSã®äžéšãäžåºŠå®çŸ©ãããããããããå Žæã§åå©çšããŸãããã®ãã¡ã€ã«ãéåžžã®CSSã«ã³ã³ãã€ã«ããããšãæŒç®å
@include
ã¯å¯Ÿå¿ããCSSã³ãŒãã«çœ®ãæããã
@mixin
ãŸããããã¯äžè¬ã«é©åãªãœãªã¥ãŒã·ã§ã³ã§ããããã³ããŒãã¬ãã£ãã¯ã¹ãå¿ èŠãšããåCSSããããã£ã®ããã¯ã¹ã€ã³ãå®çŸ©ããã®ã¯ãŠãŒã¶ãŒã®è²¬ä»»ã§ãããããã®ããã¯ã¹ã€ã³å®çŸ©ã«ã¯ãµããŒããå¿ èŠã§ãããã©ãŠã¶ãããã€ãã®CSSæ©èœãå ¬åŒã«å®è£ ããŠããå ŽåãäžèŠãªãã³ããŒãã¬ãã£ãã¯ã¹ãåé€ããããšãã§ããŸãã
ããã¯ã¹ã€ã³ã®ä»£ããã«ãéåžžã®CSSãäœæããŠãããŒã«ããã¬ãã£ãã¯ã¹ãå¿ èŠãšããããããã£ãèªåçã«æ€åºããå¿ èŠã«å¿ããŠè¿œå ããããã«ããŸãã CSSãã¹ãããã»ããµã¯ãã®æ¹æ³ã§æ©èœããŸããããšãã°ã䜿çšããå Žåautoprefixerãã©ã°ã€ã³ã䜿çšããPostCSSã䜿çšãããšããã³ããŒãã¬ãã£ãã¯ã¹ãªãã§å®å šã«éåžžã®CSSãèšè¿°ã§ãããã¹ãããã»ããµããžã§ããå®è¡ããŸãã
h1, h2, h3, h4, h5, h6 { hyphens: auto; }
ãã®ã³ãŒãã§CSSãã¹ãããã»ããµãå®è¡ãããšãè¡ã®ä»£ããã«
hyphens: auto;
é¢é£ãããã¹ãŠã®ãã³ããŒãã¬ãã£ãã¯ã¹ã衚瀺ãããŸãïŒautoprefixerãã©ã°ã€ã³ã®èªåä¿®æ£ã«ãŒã«ã«åŸã£ãŠãæåã§å€æŽããå¿ èŠã¯ãããŸããïŒãã€ãŸããäºææ§ãç¹å¥ãªæ§æãå¿é ããããšãªããã¬ãŒã³ãªCSSãæžãããšãã§ããŸãã
autoprefixerã«å ããŠãPostCSSçšã®ãã©ã°ã€ã³ãä»ã«ããããŸãããããã®ãã©ã°ã€ã³ã䜿çšãããšãæ¬åœã«ãã°ãããããšãã§ããŸããcssnextãã©ã°ã€ã³ã䜿çšãããšãå®éšçãªCSSæ©èœãé©çšã§ããŸããCSSã¢ãžã¥ãŒã«ãã©ã°ã€ã³ã¯ãååã®ç«¶åãåé¿ããããã«ã¯ã©ã¹ãèªåçã«å€æŽããŸããStylelintãã©ã°ã€ã³CSSã§ãšã©ãŒãšç«¶åããæ¡ä»¶ãèŠã€ããŸãããããã®ããŒã«ã¯å®éã«æšå¹ŽãŸãã¯2幎ã§éå§ããããããŸã§å©çšã§ããªãã£ãéçºè ã®ã¯ãŒã¯ãããŒã®æ©èœãå®èšŒããŸããïŒ
ãã ããé²æã¯æ¯æããªããã°ãªããŸããã PostCSSã®ãããªCSSãã¹ãããã»ããµãã€ã³ã¹ããŒã«ããŠäœ¿çšããã«ã¯ãCSSããªããã»ããµãããå€ãã®åŽåãå¿ èŠã§ããã³ãã³ãã©ã€ã³ããããŒã«ãã€ã³ã¹ããŒã«ããŠå®è¡ããã ãã§ãªããåã ã®ãã©ã°ã€ã³ãã€ã³ã¹ããŒã«ããŠæ§æããããè€éãªã«ãŒã«ã»ããïŒæ€èšãããã©ãŠã¶ãŒãªã©ïŒãå®çŸ©ããå¿ èŠããããŸãã代ããã«ãã³ãã³ãã©ã€ã³ããçŽæ¥PostCSSãå®è¡ããã®ã§ãå€ãã®éçºè ã¯æ¬¡ã®ããã«èšå®å¯èœãªãã«ãã·ã¹ãã ã«çµ±åããªã声ãã¬ã«ããŸãã¯WebPACKã®ãããã«ãããããã³ããšã³ãã«äœ¿çšã§ããããŸããŸãªãã«ãããŒã«ããã¹ãŠç®¡çãããããªããŸãã
泚ïŒããã³ããšã³ãã«ææ°ã®ãã«ãã·ã¹ãã ã䜿çšããããšããªãå Žåã¯ãå€ãã®æ å ±ãåŠç¿ããå¿ èŠãããããã«æããããããããŸãããæåããå§ãããå Žåã¯ããæç«çšã®ã¢ãã³ãªJavaScriptããšããèšäºãèªãã§ãã ãããããã³ããšã³ãéçºã§ãããã®ææ°æ©èœã䜿çšããããã«å¿ èŠãªãã¹ãŠã®JavaScriptããŒã«ã«ã€ããŠèª¬æããŠããŸãã
CSSãã¹ãããã»ããµã«é¢ããè«äºãå±éããŠããããšã¯æ³šç®ã«å€ããŸããçšèªããããã«ãããšèšã人ãããŸãïŒãããã®ããŒã«ã¯ãã¹ãŠCSSããªããã»ããµãšåŒã°ããã¹ãã ãšèšã人ãããã°ãåã«CSSããã»ããµãªã©ãšåŒã°ããã¹ãã ãšèšã人ãããŸãïŒã CSSãã¹ãããã»ããµã¯CSSããªããã»ããµã®å¿ èŠæ§ãå®å šã«æé€ãããšä¿¡ããŠãã人ãããã°ãCSSããªããã»ããµãäžç·ã«äœ¿çšãã¹ãã ãšä¿¡ããŠãã人ãããŸãããããã«ãããCSSããã§ããéããã¹ãŠãå§çž®ãããå Žåã¯ãCSSãã¹ãããã»ããµãŒãåŠã¶å¿ èŠããããŸãã
â ! , CSS .
â , !
â ! , ?
â , CSS , , !
â ! CSS!
â CSS!
CSS
CSSããªããã»ããµãCSSãã¹ãããã»ããµãªã©ã®ããŒã«ã¯ãCSSéçºã®äœ¿ãããããåäžãããããã®é·ãéã®ããæ©ãã§ããŸããããããããããã®ããŒã«ã ãã§ã¯ã倧èŠæš¡ãªCSSã³ãŒãããŒã¹ããµããŒãããåé¡ã解決ããã«ã¯äžååã§ãããã®åé¡ã解決ããããã«ã圌ãã¯CSSã®æžãæ¹ã«é¢ããããŸããŸãªã¬ã€ãã©ã€ã³ãäœæãå§ããŸãããéåžžã¯CSSæ¹æ³è«ãšåŒã°ããŠããŸãã
ç¹å®ã®CSSæ¹æ³è«ãæãäžããåã«ãé·æã®CSSãµããŒãããªãããã»ã©è€éãªã®ããç解ããããšãéèŠã§ããéèŠãªåé¡ã¯ãCSSã®ã°ããŒãã«ãªæ§è³ªã§ããèšå®ããåã¹ã¿ã€ã«ã¯ãããŒãžã®ãã¹ãŠã®éšåã«ã°ããŒãã«ã«é©çšãããŸããäžæã®ã¯ã©ã¹åããµããŒãããããã«è©³çŽ°ãªåœåèŠåãå°å ¥ããããCSSã®ç¹ç°æ§ã«ãŒã«ãå°å ¥ããä»äºãä»»ãããŠããŸããã©ã®ã¹ã¿ã€ã«ãåèŠçŽ ã«é©çšãããã決å®ããŸããCSSæ¹æ³è«ã¯ã倧èŠæš¡ãªã³ãŒãããŒã¹ã§ãããã®åé¡ãåé¿ããããã«ãCSSãäœç³»çã«äœæããæ¹æ³ãæäŸããŸããããã€ãã®äžè¬çãªæ¹æ³è«ãæç³»åã§æ€èšããŠãã ããã
ãŠã
OOCSSïŒObject Oriented CSSïŒã¯ã2ã€ã®äž»èŠãªååã«åºã¥ããŠã2009幎ã«æ¹æ³è«ãšããŠåããŠå°å ¥ãããŸãããæåã®ååã¯ãæ§é ãã·ã§ã«ããåé¢ããããšã§ããããã¯ãïŒã¬ã€ã¢ãŠããšããŠã®ïŒæ§é ã®å®çŸ©ãå«ãCSSããã·ã§ã«ïŒè²ããã©ã³ããªã©ïŒãå®çŸ©ããCSSãšæ··åããªãããšãæå³ããŸããã·ã§ã«ãã€ãŸãã¢ããªã±ãŒã·ã§ã³ã®å€èŠ³ãåäœæããæ¹ãç°¡åã§ãã 2çªç®ã®ååã¯ãã³ã³ãã³ããã³ã³ããããåé¢ããããšã§ããããã¯ãããŒãžäžã®äœçœ®ã«é¢ä¿ãªãããªããžã§ã¯ãã¯åãããã«èŠãããšããéèŠãªèããæã€ãåå©çšå¯èœãªãªããžã§ã¯ããšããŠèŠçŽ ãè¡šãããšãæå³ããŸãã
OOCSSã¯ãé©åã«èšèšãããã¬ã€ãã©ã€ã³ãæäŸããŸããããã®ã¢ãããŒãã®è©³çŽ°ãããŸãæ£ç¢ºã«èª¬æããŠããŸãããSMACSSã®ãããªåŸç¶ã®æ¹æ³è«ã§ã¯ãéèŠãªæŠå¿µãåãå ¥ãã詳现ãè¿œå ããŠäœæ¥ã容æã«ããŸããã
SMACSS
SMACSSïŒCSSã®ã¹ã±ãŒã©ãã«ããã³ã¢ãžã¥ã©ãŒã¢ãŒããã¯ãã£ïŒã¯ãåºæ¬èŠåãã¬ã€ã¢ãŠãèŠåãã¢ãžã¥ãŒã«ãç¶æ èŠåãããŒãèŠåã® 5ã€ã®åå¥ã®ã«ããŽãªã«CSSãèšè¿°ããããšãæšå¥šããæ¹æ³è«ãšããŠ2011幎ã«ç»å ŽããŸãããSMACSSæ¹æ³è«ã§ã¯ãç¹å®ã®åœåèŠåãæšå¥šãããŠããŸããããšãã°ãã¬ã€ã¢ãŠãã«ãŒã«ã§ã¯ãã¯ã©ã¹åã®åã«
l-
ãŸãã¯ãä»ããå¿ èŠããããŸã
layout-
ãç¶æ ã«ãŒã«ã§ã¯ãã¯ã©ã¹åã®åã«ãç¶æ ã説æãããã¬ãã£ãã¯ã¹ãä»ããå¿ èŠããããŸãïŒäŸïŒ
is-hidden
ãŸãã¯ïŒ
is-collapsed
ã
SMACSSã«ã¯OOCSSãããã¯ããã«ç¹ç°æ§ããããŸããããã®æ¹æ³è«ã§ã¯ãã©ã®CSSã«ãŒã«ãåé¡ããããæ éã«æ€èšããå¿ èŠããããŸããBEMã®ãããªåŸç¶ã®ã¢ãããŒãã¯ãéšåçã«æ±ºå®ãè¡ããããããç°¡åã«å®è¡ã§ããŸãã
ãã
2010幎ã«å°å ¥ãããBEMïŒãããã¯ãèŠçŽ ã修食åïŒæ¹æ³è«ã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ãç¬ç«ãããããã¯ã«åå²ããããšã«åºã¥ããŠããŸãããããã¯ã¯åå©çšå¯èœãªã³ã³ããŒãã³ãã§ãïŒäŸãšããŠå®çŸ©ãããæ€çŽ¢ãã©ãŒã
<form class="search-form"></form>
ïŒãèŠçŽ ã¯ãããã¯ã®å°ããªéšåã§ãããããèªäœã§åå©çšããããšã¯ã§ããŸããïŒäŸãšããŠãæ€çŽ¢ãã©ãŒã ã®ãã¿ã³ããããŸã
<button class="search-form__button">Search</button>
ïŒã修食åã¯ããããã¯ãŸãã¯èŠçŽ ã®å€èŠ³ãç¶æ ããŸãã¯åäœã決å®ãããšã³ãã£ãã£ã§ãïŒäŸã¯ã<button class = "search-form__button search-form__button-disabled"> Search </ button>ãšããŠå®çŸ©ãããæ€çŽ¢ãã©ãŒã ã®ç¡å¹ãªãã¿ã³ã§ãïŒã
BEMã®æ¹æ³è«ã¯ãç¹å®ã®åœåèŠåã䜿çšããŠç解ãããããåå¿è ãè€éãªæ±ºå®ãè¡ãããšãªãé©çšã§ããŸããã³ã€ã³ã®è£è¿ãã¯ãäžéšã®ã¯ã©ã¹åã¯ããªãåé·ã§ãããã»ãã³ãã£ãã¯åãæå®ããããã®åŸæ¥ã®èŠåã«å¯Ÿå¿ããŠããªãããšã§ãããã®åŸãã¢ãããã¯CSSãªã©ã®æ°ããæ¹æ³è«ãç»å Žãããã®åã«ã¯ãŸããªãã¢ãããŒãããŸã£ããæ°ããã¬ãã«ã«å°éããŸããïŒ
ã¢ãããã¯CSS
Atomic CSSæ¹æ³è«ïŒFunctional CSSãšãåŒã°ããŸãïŒã¯2014幎ã«ç»å ŽããŸãããããã¯ãèŠèŠæ©èœã«åºã¥ããååãæã€ãå°ããé«åºŠã«ç¹æ®åãããã¯ã©ã¹ãäœæãããšããèãã«åºã¥ããŠããŸãããã®ã¢ãããŒãã¯ãåè¿°ã®OOCSSãSMACSSãããã³BEMãšã¯ãŸã£ããéã§ããããŒãžäžã®èŠçŽ ãåå©çšå¯èœãªãªããžã§ã¯ããšããŠæ±ã代ããã«ãAtomic CSSã¯éåžžãããã®ãªããžã§ã¯ããç¡èŠããåå©çšå¯èœãªé«åºŠã«ç¹æ®åããããŠãŒãã£ãªãã£ã¯ã©ã¹ãé©çšããŠåèŠçŽ ãã¹ã¿ã€ã«ããŸãã代ãã
<button class="search-form__button">Search</button>
ã«ã次ã®ããã«ãªã
<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">Search</button>
ãŸãã
ãã®äŸã«å¯Ÿããæåã®åå¿ãææã§ååããããšã§ããå Žåãããªãã¯äžäººã§ã¯ãããŸãããå€ãã®äººã¯ããã®æ¹æ³è«ã確ç«ãããCSSãã¹ããã©ã¯ãã£ã¹ã®çµ¶å¯ŸéåãšèŠãªããŠããŸãããã ããå Žåã«ãã£ãŠã¯ãããã®æ £è¡ã®æå¹æ§ã«çåãæããããå€ãã®å®äœçãªè°è«ããããŸããããã®èšäºã§ã¯ãåŸæ¥ã®ã¿ã¹ã¯åé¢ãã©ã®ããã«HTMLäŸåã®CSSãäœæãããïŒBEMã®ãããªæ¹æ³è«ã䜿çšããå Žåã§ãïŒã«çŠç¹ãåœãŠããã¢ãããã¯ããŸãã¯æ©èœçã¢ãããŒãã¯CSSäŸåã®HTMLã®äœæã匷å¶ããŸããäž¡æ¹ã®ãªãã·ã§ã³ã䜿çšã§ããŸãããããèŠããšãååãšããŠCSSãšHTMLãå®å šã«åé¢ããããšã¯ã§ããŸããã
JSã®CSSã®ãããªä»ã®CSSæ¹æ³è«ã«ã¯ãå®éã«ã¯CSSãšHTMLã¯åžžã«äºãã«äŸåãããšããç解ãå«ãŸããŠããŸãããã®èªèã«ããããããŸã§ã§æãç©è°ãéžãæ¹æ³è«ã®1ã€ãäœæãããŸãã...
JSã®CSS
2014幎ã«å°å ¥ãããJSã®CSSæ¹æ³è«ãCSSã¹ã¿ã€ã«ãåå¥ã®ã¹ã¿ã€ã«ã·ãŒãã§ã¯ãªããåã³ã³ããŒãã³ãå ã§å®çŸ©ããããšã«åºã¥ããŠããŸãããã®æ¹æ³è«ã¯ãReact JavaScriptãã¬ãŒã ã¯ãŒã¯ïŒç¬èªã®HTMLãã¡ã€ã«ã§ã¯ãªãJavaScriptã§çŽæ¥ã³ã³ããŒãã³ãã®HTMLãå®çŸ©ãããšããææ§ãªã¢ãããŒããéžæããïŒã®ããã«éçºãããŸãããåœåãæ¹æ³è«ã§ã¯ãã¹ããããã¹ã¿ã€ã«ã䜿çšããŠããŸããããåŸã®å®è£ ã§ã¯ãJavaScriptãCSSã³ã³ããŒãã³ãïŒã³ã³ããŒãã³ãããšã®äžæã®ã¯ã©ã¹åïŒãçæããã¹ã¿ã€ã«ã¿ã°ãšãšãã«ããã¥ã¡ã³ãã«æ¿å ¥ããŸããã
JSã®CSSæ¹æ³è«ããã³ã³ãã³ãå ±æã«é¢ãã確ç«ãããCSSãã¹ããã©ã¯ãã£ã¹ã«å®å šã«åããŠããŸããå®éãæéã®çµéãšãšãã«ãWebã®äœ¿çšæ¹æ³ã¯åçã«å€åããŸãããåœåããŠã§ãã¯äž»ã«éçãµã€ãã§æ§æãããŠããŸãããããã§ã¯ãHTMLã³ã³ãã³ããšCSSãã¬ãŒã³ããŒã·ã§ã³ãåé¢ããããšã¯å®å šã«çã«ããªã£ãŠããŸããçŸåšãWebã¯åçãªWebã¢ããªã±ãŒã·ã§ã³ã«äœ¿çšãããŠããŸããããã§ã¯ãåå©çšå¯èœãªã³ã³ããŒãã³ããæå¹ã§ãã
JSã®CSSæ¹æ³è«ã®ç®æšã¯ãã«ãã»ã«åãããç¬èªã®HTML / CSS / JSã§æ§æãããããŒããã€ã³ãã³ã³ããŒãã³ãã®å®çŸ©ãå¯èœã«ããããã³ã³ããŒãã³ãã®CSSãä»ã®ã³ã³ããŒãã³ãã«åœ±é¿ãäžããªãããã«ããããšã§ãã Reactã¯ããããã®ã³ã³ããŒãã³ããçãå¢çã§å®£äŒããæåã®äººæ°ã®ãããã¬ãŒã ã¯ãŒã¯ã®1ã€ã§ããã圌ã®åœ±é¿ã§ãAngularãEmberãVue.jsãªã©ã®ä»ã®äžè¬çãªãã¬ãŒã ã¯ãŒã¯ã«åãã³ã³ããŒãã³ããå°å ¥ãããŸããã JSã®CSSæ¹æ³è«ã¯æ¯èŒçæ°ããããããã®åéã§å€ãã®å®éšãç¶ããããŠããããšã«æ³šæããããšãéèŠã§ããéçºè ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®ã³ã³ããŒãã³ãã®æ代ã«CSSã®æ°ãããã¹ããã©ã¯ãã£ã¹ã確ç«ããããšããŠããŸãã
éåžžã«å€ãã®ç°ãªãCSSæ¹æ³è«ã§æ··ä¹±ããã®ã¯ç°¡åã§ãããæ£ããã¢ãããŒããå¯äžã§ã¯ãªãããšãèŠããŠããããšãéèŠã§ããããªãè€éãªCSSã³ãŒãããŒã¹ãããå Žåã«äœ¿çšã§ããããŸããŸãªã¢ã¯ã»ã¹å¯èœãªããŒã«ãšããŠæ瀺ããå¿ èŠããããŸãããã®åéã§ã®ææ°ã®å®éšã¯ãã¹ãŠãé·æçã«ã¯ãã¹ãŠã®éçºè ã«å©çãããããããã«ãããŸããŸãªææ ®æ·±ãã¢ãããŒããéžæã§ãããšäŸ¿å©ã§ãã
ãããã«
ããã¯ãçŸä»£ã®CSSã®æŠèŠã§ããæã ã¯è°è«ããŠããåºæ¬çãªã¹ã¿ã€ã«ã®ããã®CSSã䜿çšããæå æ§ã®ãã¬ã€ã¢ãŠãã®CSSã䜿çšãããããŒãã䜿çšããŠããã¬ãã·ããã¯ã¹ãšã°ãªããã®ãæ°ããæ§æã®å©çšCSSããªããã»ããµå€æ°ãmixin'yã䜿çšãªã©ãæ©èœã®è»¢æã®ããã®CSS-ãã¹ãããã»ããµãªã©ã®è¿œå ãªã©ãããã³ããŒãã¬ãã£ãã¯ã¹ãšä¿¡é Œã§ããã¡ã³ããã³ã¹ã®ããã®CSSæ¹æ³è«CSSã¹ã¿ã€ã«ã®ã°ããŒãã«ãªæ§è³ªãå æããŸããé«åºŠãªã»ã¬ã¯ã¿ãŒããã©ã³ãžã·ã§ã³ãã¢ãã¡ãŒã·ã§ã³ããã©ãŒã ãåçå€æ°ãªã©ãä»ã®å€ãã®CSSé¢æ°ã詳现ã«ç解ããæ©äŒã¯ãããŸããã§ãã-ãªã¹ãã¯å»¶ã ãšç¶ããŸãã CSSã§è°è«ãã¹ãããšã¯ãããããããŸãã誰ããç°¡åã ãšèšã£ããšããŠãã圌ã¯ããããååãç¥ããªãã§ãããïŒ
çŸä»£ã®CSSã¯ãå€åãç¶ããæ¥éã«é²åãç¶ããŠãããããééããªãæ±ãã«ãããã®ã§ãããããããŠã§ããé·å¹Žã«ããã£ãŠã©ã®ããã«é²åããããšããæŽå²çèæ¯ãèŠããŠããããšã¯éèŠã§ãããŸããå€ãã®è³¢ã人ãç¹å®ã®ããŒã«ãæ¹æ³è«ã«åãçµãã§ãããæè¯ã®CSSãã©ã¯ãã£ã¹ããŠã§ããšãšãã«é²åããããšãç¥ã£ãŠããã®ã¯çŽ æŽãããããšã§ããä»ããŠã§ãéçºè ã«ãªãããã®ãšããµã€ãã£ã³ã°ãªæéã§ãããã®æ å ±ãããªãã®æ ã®å°å³ãšããŠåœ¹ç«ã€ããšãé¡ã£ãŠããŸãïŒ
-ãïŒãããããã¹ãŠã®ã¿ããªäººã¯ãŸã CSSãå«ã£ãŠããŸãããïŒ
-ç§ãèšã£ãããã«ãäžåºŠã«ãã¹ãŠã§ã¯ãããŸããïŒ
-...倧äžå€«ãå°ãªããšãã®ã§ãCSS-ããŒã ã楜ããäžããCSSã®COOL [å¢çã®ãµã€ã³ã¢ãŠã]