今年ã®ãƒãƒ¼ãƒŸãƒ³ã‚°ãƒ«ãƒ¼ãƒ« #CSSè¨è¨ˆ
CSS Architecture Advent Calendar 2014 1日目ã®è¨˜äº‹ã§ã™ã€‚ CSSã®è¨è¨ˆã‚’ã—ã¦ã„ã上ã§å¤§äº‹ãªãƒãƒ¼ãƒŸãƒ³ã‚°ãƒ«ãƒ¼ãƒ«ã€‚ 今年僕ãŒé–¢ã‚ã£ãŸãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã®ãƒãƒ¼ãƒŸãƒ³ã‚°ãƒ«ãƒ¼ãƒ«ã‚’ゆるã紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚
BEMã§å‘½åã™ã‚‹æ™‚ã«å½¹ã«ç«‹ã¡ãã†ãªå˜èªž
BEM Advent Calendar 2013ã®10日目ã®è¨˜äº‹ã§ã™ã€‚ ã¡ã‚‡ã£ã¨BEMツールã®ã“ã¨ã¯1æ—¥ãŠä¼‘ã¿ã€‚明日やã‚ã†æ˜Žæ—¥ã€‚ BEMツール㮠Full stack quick startã‚’ã‚„ã£ã¦ãŸè»Œè·¡ã¯ä»¥ä¸‹ã§ã™ã€‚ サンプルプãƒã‚¸ã‚§ã‚¯ãƒˆã‚’使ã£ã¦ã¿ã‚‹ï¼šBEMツールã«è§¦ã‚Œã¦ã¿ã‚‹ï¼ˆ1） ブãƒãƒƒã‚¯ãƒ©ã‚¤ãƒ–ラリを使ã£ã¦ã¿ã‚‹ï¼šBEMツールã«è§¦ã‚Œã¦ã¿ã‚‹ï¼ˆ2） ブãƒãƒƒã‚¯ã‚’作ã£ã¦ã¿ã‚‹ï¼šBEMツールã«è§¦ã‚Œâ€¦
BEMツールã«è§¦ã‚Œã¦ã¿ã‚‹(3)
BEM Advent Calendar 2013ã®8日目ã®è¨˜äº‹ã§ã™ã€‚ 今回作ã£ãŸã‚µãƒ³ãƒ—ルプãƒã‚¸ã‚§ã‚¯ãƒˆã¯githubã«åˆ¥ã®ãƒ–ランãƒã‚’切ã£ã¦ã€ã‚¢ãƒƒãƒ—ã—ã¦ã‚ã‚Šã¾ã™ã€‚ å‰å›žã¾ã§ã®BEMツールå‰å›žã‚‚ã€BEMã®å…¬å¼ã‚µã‚¤ãƒˆã«ã‚ã‚‹Full stack quick startを見ãªãŒã‚‰ã€BEMãŒæä¾›ã—ã¦ã„るブãƒãƒƒã‚¯ãƒ©ã‚¤ãƒ–ラリを使用ã—ã¤ã¤CSSを上書ãã™ã‚‹æ–¹æ³•ã‚’試ã—ã¦ã¿ã¾ã—ãŸã€‚ ã¨ã„ã†ã“ã¨ã§ã€ã¾ãŸãƒˆãƒ©ã‚¤ã‚¢ãƒ³ãƒ‰ã‚¨ãƒ©ãƒ¼ã—ãªãŒã‚‰ã€å‰å›žã®ç¶šãを進ã‚ã¦ã„ã“ã†ã¨æ€ã„ã¾ã™ã€‚ 今回ã¯ã€Œãƒ–ãƒãƒƒã‚¯ãƒ©ã‚¤ãƒ–ラリã®HTMLを書ãæ›ãˆã¦ã¿ã‚‹ã€è‡ªåˆ†ã§ãƒ–ãƒãƒƒã‚¯ã‚’定義ã—ã¦ã¿ã‚‹ã€æ–¹æ³•ã‚’試ã—ã¾ã™ã€‚ ※やりãªãŒã‚‰æ°—ã¥ã„ã¦ã‚‹ã¨ã“ã‚ã‚‚ã‚ã‚‹ã®ã§ã€é–“é•ã„ãŒã‚ã£ãŸã‚‰ã™ã¿ã¾ã›ã‚“… BEMHTMLã‚’å†å®šç¾©ã™ã‚‹pageã¨ã„ã†ãƒ–ãƒãƒƒã‚¯ã‚’å†å®šç¾©ã—ã¾ã™ã€‚ page ã¯ãƒšãƒ¼ã‚¸ã®ã‚¹ã‚±ãƒ«ãƒˆãƒ³ã§ã™ã€‚標準ã§ç”¨æ„ã•ã‚Œã¦ã„ã‚‹ã€htmlè¦ç´ ã€headè¦ç´ ã€bodyè¦ç´ ã®ãƒšãƒ¼ã‚¸ã®åœŸå°ã¨ãª
BEMツールã«è§¦ã‚Œã¦ã¿ã‚‹(2)
BEM Advent Calendar 2013ã®5日目ã®è¨˜äº‹ã§ã™ã€‚ 今回作ã£ãŸã‚µãƒ³ãƒ—ルプãƒã‚¸ã‚§ã‚¯ãƒˆã¯githubã«åˆ¥ã®ãƒ–ランãƒã‚’切ã£ã¦ã€ã‚¢ãƒƒãƒ—ã—ã¦ã‚ã‚Šã¾ã™ã€‚ å‰å›žã¾ã§ã®BEMツールå‰å›žã€BEMã®å…¬å¼ã‚µã‚¤ãƒˆã«ã‚ã‚‹Full stack quick startを見ãªãŒã‚‰ã€Blockを作るã¨ã“ã‚ã¾ã§ã‚’ã‚„ã‚Šã¾ã—ãŸã€‚ トライアンドエラーã—ãªãŒã‚‰ã€å‰å›žã®ç¶šãを進ã‚ã¦ã„ã“ã†ã¨æ€ã„ã¾ã™ã€‚ 今回ã¯èª°ã‹ãŒä½œã£ãŸãƒ–ãƒãƒƒã‚¯ã‚’使用ã—ã¤ã¤ã€å¿…è¦ã«å¿œã˜ã¦CSSを上書ãã™ã‚‹æ–¹æ³•ã‚’試ã—ã¾ã™ã€‚ ※やりãªãŒã‚‰æ°—ã¥ã„ã¦ã‚‹ã¨ã“ã‚ã‚‚ã‚ã‚‹ã®ã§ã€é–“é•ã„ãŒã‚ã£ãŸã‚‰ã™ã¿ã¾ã›ã‚“… ブãƒãƒƒã‚¯ãƒ©ã‚¤ãƒ–ラリを使ã†æ™®æ®µè‰¯ã作るã€ãƒã‚´ç”»åƒã‚’表示ã™ã‚‹ãƒ–ãƒãƒƒã‚¯ã‚„ã€æ¤œç´¢ãƒ•ã‚©ãƒ¼ãƒ ãªã©ã®æ±Žç”¨çš„ã«ä½¿ãˆã‚‹ãƒ–ãƒãƒƒã‚¯ã¯bem toolså´ã§ç”¨æ„ã—ã¦ãã‚Œã¦ã„ã¾ã™ã€‚ （Full stack quick startã«æ›¸ã„ã¦ã‚ã‚‹ã¨ãŠã‚Šã ã¨ä½•ã‚‚ã—ãªãã¦ã‚‚使ãˆã‚‹é¢¨ã ã£ãŸã®ã§ã™ãŒä½¿ãˆãª
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}