今必è¦ãªCSSアーã‚テクãƒãƒ£
下記勉強会ã®ç™ºè¡¨è³‡æ–™ã§ã™ã€‚ --------------------------------------------------------- 使ã„ãŸããªã‚‹ UI ã‚’ã¤ãã‚‹ï¼ ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------
BEMã«ã‚ˆã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®è¨è¨ˆ | 第1回 基本概念ã¨ãƒ«ãƒ¼ãƒ«
BEMã«ã‚ˆã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®è¨è¨ˆ 第1回 基本概念ã¨ãƒ«ãƒ¼ãƒ« ã“ã®è¨˜äº‹ã§ã¯ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®è¨è¨ˆæ–¹æ³•ã€ŒBEMã€ã‚’紹介ã—ã¾ã™ã€‚第1回目ã¯BEMã®ã‚‚ã£ã¨ã‚‚基本ã¨ãªã‚‹Blockã€Elementã€Modifierã®æ¦‚念ã¨ã€classåã®å‘½åルールを解説ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚㫠最近フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ç•Œéšˆã§ã€ã€ŽBEMã€ã¨ã„ã†è¨€è‘‰ã‚’見ã‹ã‘ã‚‹ã“ã¨ãŒå¢—ãˆã¦ãã¾ã—ãŸã€‚BEMã¨ã¯ã€Blockã€Elementã€Modifierã®ç•¥èªžã§ã™ã€‚Webサイトã®ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆåŒ–ã®ãŸã‚ã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰è¨è¨ˆæ–¹æ³•ã®ã²ã¨ã¤ã§ã€åŽ³æ ¼ãªclassåã®å‘½åルールãŒç‰¹å¾´çš„ãªæ‰‹æ³•ã§ã™ã€‚ 第1回ã¯ã€BEMã‚’ã¾ã£ãŸã知らãªã„æ–¹å‘ã‘ã®å…¥é–€ç·¨ã§ã™ã€‚ ãªãœBEMãŒå¿…è¦ãªã®ã‹ ç§ãŸã¡ã¯HTMLã¨CSSを使ã†ã“ã¨ã§ã—ã‹ã€Webサイトを作るã“ã¨ãŒã§ãã¾ã›ã‚“ãŒã€HTMLã¨CSSã«ã¯ãƒ—ãƒã‚°ãƒ©ãƒ çš„ãªæ©Ÿèƒ½ãŒå‚™ã‚ã£ã¦ã„ã¾ã›ã‚“。ãã®ãŸã‚ã«ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã¯æ¬¡ã®ã‚ˆã†ãª
SMACSSã«ã‚ˆã‚‹CSSã®è¨è¨ˆ | å‰ç·¨ ベースã¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ
ã¯ã˜ã‚ã« SMACSSã¨ã¯ã€Scalable and Modular Architecture for CSSã®ç•¥èªžã§ã€ã€Œã‚¹ãƒžãƒƒã‚¯ã‚¹ã€ã¨èªã¿ã¾ã™ã€‚ SMACSSã¯CSSã®è¨è¨ˆæ‰‹æ³•ã®ã²ã¨ã¤ã§ã€CSSã®ãƒ«ãƒ¼ãƒ«ã‚’5種類ã«ã‚«ãƒ†ã‚´ãƒ©ã‚¤ã‚ºã—ãŸä¸Šã§ã€ãã‚Œãžã‚Œã®è€ƒãˆæ–¹ã‚„記述ルールãŒå–り決ã‚られã¦ã„ã‚‹ã®ãŒç‰¹å¾´çš„ãªæ‰‹æ³•ã§ã™ã€‚ SMACSSã®è€ƒãˆæ–¹ CSSã®ã‚«ãƒ†ã‚´ãƒ©ã‚¤ã‚º SMACSSã§ã¯ã€CSSã®ãƒ«ãƒ¼ãƒ«ã‚’次ã®5ã¤ã®ã‚«ãƒ†ã‚´ãƒªã«åˆ†é¡žã—ã¦ã„ã¾ã™ã€‚ ベース：è¦ç´ ãã®ã‚‚ã®ã®ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã‚¹ã‚¿ã‚¤ãƒ« レイアウト：ページをエリアã”ã¨ã«åˆ†å‰² モジュール：å†åˆ©ç”¨å¯èƒ½ãªãƒ‘ーツ 状態（ステート）：レイアウトやモジュールã®ç‰¹å®šã®çŠ¶æ…‹ã‚’示㙠テーマ：サイトã®ãƒ«ãƒƒã‚¯ï¼†ãƒ•ã‚£ãƒ¼ãƒ«ã‚’定義 ãã‚Œãžã‚Œã®å…·ä½“çš„ãªè§£èª¬ã¯ã€ä»¥é™ã§è¡Œã„ã¾ã™ã€‚ SMACSSã§è¨è¨ˆã™ã‚‹ç›®çš„ 書ç±ã€ŽScalable and Modular Architecture for CSS（日
メンテナブルCSS | æ ªå¼ä¼šç¤¾ã‚µã‚¤ãƒãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆ
1. åºè«– CSSã¯è¨˜è¿°ãƒ«ãƒ¼ãƒ«ãŒç°¡ç´ ã§ã‚ã‚Šã€å°‘ã—ã®å¦ç¿’コストã§ã™ãã«è¨˜è¿°ãŒã§ãる手軽ãªãƒ„ールã§ã™ã€‚ ã—ã‹ã—ã€å¤§è¦æ¨¡ãªã‚¢ãƒ—リケーションã§è¤‡æ•°äººã§é–‹ç™ºã™ã‚‹ã‚±ãƒ¼ã‚¹ç‰ã§ã¯ã€è¦‹æ „ãˆã ã‘ã—ã‹è€ƒãˆãšã«èº«å‹æ‰‹ã«ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã—ã¦ã—ã¾ã†ã¨ã€ éžå¸¸ã«ãƒ¡ãƒ³ãƒ†ãƒŠãƒ³ã‚¹ã‚³ã‚¹ãƒˆãŒã‹ã‹ã‚‹è² ã®éºç”£ãŒä½œã‚‰ã‚Œã¦ã—ã¾ã„ã¾ã™ã€‚ ãã®ãŸã‚CSSã®å“質をä¿ã¤ãŸã‚ã«æ§˜ã€…ãªãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ã€CSSã®å®šç¾©ãƒ«ãƒ¼ãƒ«ãŒæ±ºã‚られã¦ã„ã¾ã™ã€‚ 本稿ã§ã¯ä¸€èˆ¬çš„ãªCSSã®å®šç¾©ãƒ«ãƒ¼ãƒ«ã¨ã€ãã®ãƒ«ãƒ¼ãƒ«ãŒãªãœä½œã‚‰ã‚ŒãŸã®ã‹ã‚’åˆã›ã¦å ±å‘Šè‡´ã—ã¾ã™ã€‚ ã¾ãŸã€CSSã®ãƒ«ãƒ¼ãƒ«ã‚’é©ç”¨ã™ã‚‹ã«ã‚ãŸã£ã¦ã€æ‰‹å‹•ãƒ»ç›®è¦–ã§ãƒ«ãƒ¼ãƒ«ã®é©ç”¨ã‚’ãƒã‚§ãƒƒã‚¯ã™ã‚‹ã®ã¯éžå¸¸ã«ã‚³ã‚¹ãƒˆãŒé«˜ã„作æ¥ã§ã™ã€‚ ã“れらルールã®é©ç”¨ã‚’補助ã™ã‚‹ãƒ„ール群をã€åˆã›ã¦å ±å‘Šè‡´ã—ã¾ã™ã€‚
CSSã®åŸºæœ¬ã‹ã‚‰ç†è§£ã‚’æ·±ã‚一ã¤ä¸Šã®ã‚¹ã‚ルを身ã«ã¤ã‘ã‚‹ã€ä»–書ã¨ã¯ã²ã¨å‘³ã‚‚ãµãŸå‘³ã‚‚ç•°ãªã‚‹ã‚ªã‚¹ã‚¹ãƒ¡ã®æœ¬ -CSSè¨è¨ˆã®æ•™ç§‘書
ãã®å ´é™ã‚Šã®CSSを使ã†ã®ã§ã¯ãªãã€CSSã®åŸºæœ¬ã‹ã‚‰ã—ã£ã‹ã‚Šã¨ç†è§£ã‚’æ·±ã‚ã€é‹ç”¨æœŸé–“ãŒé•·ãã¦ã‚‚安心ã—ã¦ä½¿ãˆã‚‹CSSã€å¤§è¦æ¨¡ãªã‚µã‚¤ãƒˆã§ã‚‚管ç†ã§ãã‚‹CSSを身ã«ã¤ã‘ãŸã„人ã«å½¹ç«‹ã¤ä¸€å†Šã‚’紹介ã—ã¾ã™ã€‚ å˜ã«ã‚³ãƒ¼ãƒ‰ã‚’書ãã ã‘ã§ã¯ãªãã€è¨è¨ˆãƒ»ç®¡ç†ãƒ»é‹ç”¨ã‚’考ãˆãŸã€Žã¡ã‚ƒã‚“ã¨ã—ãŸCSSã€ãŒå¾¹åº•çš„ã«è§£èª¬ã•ã‚ŒãŸè‰¯æ›¸ã§ã™ã€‚ Googleエンジニアã®Philip Waltonæ°ã«ã‚ˆã‚‹ã¨ã€ã‚ˆã‚Šè‰¯ã„CSSã®ã‚´ãƒ¼ãƒ«ã¨ã—ã¦æ¬¡ã®4ã¤ã®ãƒã‚¤ãƒ³ãƒˆãŒé‡è¦ã§ã™ã€‚ 予測ã—ã‚„ã™ã„ 記述ã—ãŸã‚¹ã‚¿ã‚¤ãƒ«ãŒä»–ã®ã‚¹ã‚¿ã‚¤ãƒ«ã«å½±éŸ¿ã•ã‚Œãšã€æœŸå¾…通りã®è¦‹æ „ãˆã«ãªã‚‹ã€‚ å†åˆ©ç”¨ã—ã‚„ã™ã„ スタイルã®å®šç¾©ãŒæ©Ÿèƒ½ã”ã¨ã«ç®¡ç†ã•ã‚Œã¦ãŠã‚Šã€ä¼¼ãŸUIã®åˆ¥ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã«ã‚‚利用ã§ãる。 ä¿å®ˆã—ã‚„ã™ã„ ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¿½åŠ ãƒ»ä¿®æ£ã—ãŸéš›ã«ã€æ—¢å˜ã®ã‚‚ã®ã«å½±éŸ¿ã‚’与ãˆãªã„。 æ‹¡å¼µã—ã‚„ã™ã„ サイトã®è¦æ¨¡ãŒå¤§ãã複雑ã«ãªã£ã¦ã‚‚ã€å¯¾å¿œã§ãる。 å‚考：CSS Architecture（翻訳版） ã“ã‚Œ
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}