ã³ã¼ãã¨ãã£ã¿ã¼ã«ã¯HTMLã»CSSãå¹çè¯ãç·¨éããæ¹æ³ã§ãæ¸ããããã«ãã³ã¼ãã®èªåè£å®ãªã©ã®æ©è½ãåãã£ã¦ãã¾ãããããã®æ©è½ã使ããã¨ã§å¹çè¯ãã³ã¼ããè¨è¿°ãããã¨ãã§ããã®ã§ãããããã§ã¯ããã«å¹çã¢ããã§ããEmmetã使ã£ã¦ã¿ã¾ãã Emmetã使ãã¨HTMLã¿ã°ãè¨è¿°ããéã«å¿ è¦ãª< >ãªã©ãçç¥ããããé·ãHTMKæ§é ããã£ãæ°è¡ã§æ¸ããã¨ãã§ããããã«ãªãã¾ããæ £ããã¨ãã以å¤ã§æ¸ãã®ãããã©ããããªãã¨ãããã¡ãªãããããã¾ãããã¨ã«ããå¹çè¯ãè¨è¿°ã§ããã®ã§ã¾ã 使ã£ã¦ãªãäººã¯æ¯é使ã£ã¦ã¿ã¦ä¸ããã Emmetã«ã¯HTMLã¨CSSãããã¾ãããããã§ã¯HTMLã®è¨è¿°æ¹æ³ãç´¹ä»ãã¾ãã CSSç·¨ã¯ãã¡ã -> CSSãå¹çè¯ãæ¸ãï¼Emmetã®æ¸ãæ¹ã»ä½¿ãæ¹ã¾ã¨ã Emmetã®ã¤ã³ã¹ãã¼ã«æ¹æ³ ã³ã¼ãã¨ãã£ã¿ã¼ã«Emmetãã¤ã³ã¹ãã¼ã«ãã Emmetã¯ã³ã¼ãã¨ãã£ã¿ã¼
11:10ï½ èª²é¡ãã¼ã¸ã®ç¢ºèªï¼PageSpeed Insightsã®å®è¡ç®çï¼ãã¥ã¼ãã³ã°å¯¾è±¡ã®ã¦ã§ããµã¤ãã®æ¹åã®ä½å°ãèª¿æ» ä¸è¨ã®gruntãã©ã°ã¤ã³ãã¤ã³ã¹ãã¼ã«ãã npm install ã³ãã³ããå®è¡ããªããããã©ã¦ã¶ãIDEã§ãã¥ã¼ãã³ã°å¯¾è±¡ã®ã¦ã§ããµã¤ãã確èªãå§ãã¾ããã å°ãè¦ãã ãã§ãCSSã®æ§æã¨ã©ã¼ããã£ããã使ã£ã¦ããªãJavaScriptã©ã¤ãã©ãªãã¤ã³ãã¼ãããã¦ãããâ¦ã ã¾ãã§ç¡è¶ãªéç¨ãæ°ã¶æç¶ãããã®ãããªãã«ãªã¹ãªãã¡ã¤ã«ç¾¤ã§ããã ããã§å®è¡ãã PageSpeed Insights ã«ç»åãµã¤ãºã®æé©åããªã¹ã¹ã¡ãããã®ã§ãã¾ãã¯ããããè¡ããã¨ã«ãã¾ããã 11:20ï½ ç»åãã¡ã¤ã«ã®æé©åç®çï¼ç»åãã¡ã¤ã«ãµã¤ãºã®åæ¸ 30 x 30pxã§è¡¨ç¤ºãã¦ããç»åãã¡ã¤ã«ãå®éã«ã¯150 x 150pxã§ä¿åããã¦ãããããç»åããããããã£ãã®
[ããã³ãã¨ã³ã] ãã©ã¦ã¶ã¬ã³ããªã³ã°ã®ä»çµã¿ãçè§£ãã¦ããã©ã¦ã¶ã«åªããJavaScriptãæ¸ãã ããã«ã¡ã¯ã@yoheiMuneã§ãã ãã©ã¦ã¶ã®ã¬ã³ããªã³ã°ã®ä»çµã¿ã¯HTML5 RocksãHow browsers workã§è©³ãã解説ããã¦ãã¾ãããããããããã¯ã¨ã¦ã詳細ã§ãèªç ´ãã¦çè§£ããã®ã¯å¤§å¤ã§ãã ä»åã®ããã°ã§ã¯æè»½ã«ã¬ã³ããªã³ã°ã®æ¦è¦ãçè§£ã§ããããã«å¿ããã¾ãããã¾ããã詳ããå¦ã¹ããããªãªã³ã¯ãè¨è¼ãã¾ããã ããã¦ãã©ã¦ã¶ã®ã¬ã³ããªã³ã°ã®ä»çµã¿ãçè§£ããä¸ã§ãã©ã®ãããªJavaScriptãæ¸ãã¹ããã«ã¤ãã¦ãè¨è¼ãã¾ããã ç®æ¬¡ ãã©ã¦ã¶ã®ã¬ã³ããªã³ã°ã®ä»çµã¿ ãã®ç« ã§ã¯ãHTMLã¨CSSãèªã¿è¾¼ã¾ãã¦ããç»é¢ã«è¡¨ç¤ºãããã¾ã§ã®éã«ããã©ã¦ã¶ãã©ã®ãããªå¦çãè¡ã£ã¦ãããã説æãã¾ãã ãã¡ã¤ã«èªã¿è¾¼ã¿ãã表示ã¾ã§ã®ä¸é£ã®æµãã¯ä»¥ä¸å³ã®éãã§ãã [1]
ã¹ã¿ã¤ã«ã·ã¼ãã§å®è£ ããã¬ã¹ãã³ã·ãç¨ã®ããã²ã¼ã·ã§ã³ã表示ãã7種é¡ã®ã¢ãã¡ã¼ã·ã§ã³ã®ã¨ãã§ã¯ããç´¹ä»ãã¾ãã ã³ã³ãã³ããã¹ã©ã¤ããã¦æ¨ªããããã²ã¼ã·ã§ã³ã表示ããOff Canvasã®ã¹ã¿ã¤ã«ã¯ãå»å¹´ãããããæ°å¤ãã®ãµã¤ãã§è¦ãããããã«ãªãã¾ãããã Pure CSS Responsive Nav HTML ãã¼ã¹ã¨ãªãHTMLã¯ãä¸è¨ã®ããã«ã·ã³ãã«ã§ãã <nav id="pushLeft"> <body> <nav id="pushLeft"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> </nav> <div class="container">ã³ã³ãã³ã</div> </body> ãã¢ã§ã¯7種é¡ã®ã¨ãã§ã¯ããæ¥½ããã¾ããã¹ã©ã¤ããããã®ãã¯ããããºãã£ã¨
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}