CSSã®æŠ€è¡“çš„è² å‚µã¨ã®å‘ãåˆã„æ–¹ / How to Deal with Technical Debt of CSS (ja)RailsDM 2019 https://railsdm.github.io/#session-upinetree ãµã‚Šã‹ãˆã‚Š http://upinetree.hatenablog.com/entry/2019/03/27/233842 English version https://speakerdeck.com/upinetree/how-to-deal-with-technical-debt-of-css
Finding Dead CSS – CSS Wizardry
17 January, 2018 Finding Dead CSS Written by Harry Roberts on CSS Wizardry. During a performance workshop I was running this week, I was reminded of a technique for finding dead CSS on a live site. Note that I’m purposely not using the phrase ‘unused CSS’, but ‘dead CSS’—the specific scenario I’m describing looks a little like this: Imagine you have a large, long-running project that contains hund
ãªã‚“ã¨ãªãã§ç†è§£ã—ãªã„Webpackã®CSS周辺 - Qiita
CSS in JSã«å¤¢ã‚’見ãŸãŒã€ãªã‹ãªã‹ä¸€ç‹ç¸„ã§ã¯è¡Œã‹ãªã‹ã£ãŸã®ã§1ã€webpackã«ãŠã‘ã‚‹CSSã¨æœ¬æ°—ã§å‘ãåˆã£ã¦ã¿ãŸã€‚ ã—ã‹ã—ã¾ã ç†è§£ãŒç”˜ã„ã¨ã“ã‚ãŒã‚ã£ãŸã®ã§loader, pluginã¾ã‚ã‚Šã®é–¢ä¿‚性を整ç†ã—ãŸã€‚ （å‰ç½®ã）webpackã®åŸºç¤Žæƒ…å ± css関連ã®æœ¬é¡Œã«ã¯ã„ã‚‹å‰ã«ã€webpackã®åŸºç¤Žã‚’å†ç¢ºèªã™ã‚‹ã€‚ Webpackã®ç‰¹å¾´ webpackã®ç‰¹å¾´çš„ãªäº‹é …ã¨ã—ã¦ã€CSSã‚„ç”»åƒãªã©ã€javascriptã§ãªã„データも基本的ã«å…¨ã¦ã‚’javascriptã§æ‰±ã£ã¦ã—ã¾ã†ã€ã¨ã„ã†äº‹ãŒæŒ™ã’られる。 åŒç‰ã®å¯¾æŠ—ã¨ã—ã¦æŒ™ã’られるbrowserifyã‚„rollupã¯ã€ã‚ãã¾ã§ã‚‚「javascriptã®module解決ã€ã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã—ã¦ã„ã‚‹ã®ã«å¯¾ã—ã¦ã€webpackã¯å…¨ãé•ã†æ–¹å‘ã‚’å‘ã„ã¦ã„ã‚‹ loaderã¨pluginã®é•ã„ çµæ§‹ã‚ã‚„ãµã‚„ã«æ‰±ã£ã¦ã„ãŸãŒã€ä¸Šè¨˜ã®webpackã®åŸºæœ¬éƒ¨åˆ†ã‚’明確ã«ã—ã¦è€ƒ
グラフィックデザイナーã®ãŸã‚ã®CSSレイアウトメモTIPS「position : absoluteã«ã¤ã„ã¦ã€
CSSレイアウト[TIPS] position : absoluteã«ã¤ã„㦠「position : absoluteã€ã¯positionプãƒãƒ‘ティã®ãªã‹ã®ï¼‘ã¤ã§ã€ãƒœãƒƒã‚¯ã‚¹è¦ç´ を絶対的ãªä½ç½®ã§é…ç½®ã™ã‚‹ã€‚ position:absoluteã§æŒ‡å®šã•ã‚ŒãŸãƒœãƒƒã‚¯ã‚¹ã¯ã€ä»–ã®è¦ç´ ã¨ã®é–¢ä¿‚ã¯åˆ‡ã‚Šé›¢ã•ã‚Œåˆ¥ç‰©ã«ãªã‚‹ã€‚親ボックス以外ã®ä»–ã®ãƒœãƒƒã‚¯ã‚¹è¦ç´ ã‹ã‚‰å½±éŸ¿ã‚’一切å—ã‘ãªã„。 position:absoluteã«ã¯å¿…ãšã€Œè¦ªã€ãŒã„る。ã“ã‚ŒãŒå¤§äº‹ã€‚ 親ã«ã—ãŸã„ボックスã«ã€Œposition：staticã€ä»¥å¤–ã®position指定をã—（ãŸã„ã¦ã„ã¯relativeã§OK）ã€ãã®ãªã‹ã«åを入れã¦position:absolute指定をã™ã‚‹ã€‚「topã€ã€Œbottomã€ã€Œleftã€ã€Œrightã€ã®å€¤ã¯ã€è¦ªãƒœãƒƒã‚¯ã‚¹ã‹ã‚‰ã®è·é›¢ã€‚ 親ボックスを指定ã—ãªã‘ã‚Œã°ã€Œãƒ–ラウザウィンドウã€ãŒè¦ªã«ãªã‚‹ã€‚ çµè«–ã‹ã‚‰è¨€ã†ã¨ã€è¦ªãƒœãƒƒã‚¯ã‚¹ãŒã€Œãƒ–ラウ
リスト全体ã®ä½™ç™½ã‚’調整ã™ã‚‹
margin ã®å€¤ã«ã¯ auto（自動）を指定ã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ マージンã¨ãƒ‘ディングã®æŒ‡å®šã«ã¤ã„ã¦ã¯ã€ä»¥ä¸‹ã®ãƒšãƒ¼ã‚¸ã‚’ã”覧ãã ã•ã„。 ボックスã®ãƒžãƒ¼ã‚¸ãƒ³ï¼ˆå¤–å´ã®ä½™ç™½ï¼‰ã‚’指定ã™ã‚‹ ボックスã®ãƒ‘ディング（内å´ã®ä½™ç™½ï¼‰ã‚’指定ã™ã‚‹ デフォルトã®ä½™ç™½ã‚’å–り除ã方法 一般的ãªãƒ–ラウザã§ã¯ã€ãƒªã‚¹ãƒˆã®å‘¨å›²ã«é©åº¦ãªä½™ç™½ãŒè¨å®šã•ã‚Œã¦ã„ã¾ã™ã€‚ ã“ã®ä½™ç™½ã‚’å–り除ããŸã„å ´åˆã¯ã€ulè¦ç´ （ã¾ãŸã¯olè¦ç´ ）ã«å¯¾ã—ã¦æ¬¡ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¨å®šã—ã¾ã™ã€‚ ul { margin: 0 0 0 1em; padding: 0; } 左マージンã¯ã€å°‘ãªãã¨ã‚‚リストマーカー1ã¤åˆ†ä»¥ä¸Šã®å¤§ãã•ãŒå¿…è¦ã§ã™ã€‚（以下ã¯1ã¤ã®ç›®å®‰ã§ã™ï¼‰ ulè¦ç´ ã«è¨å®šã™ã‚‹å ´åˆ … 1em 程度 olè¦ç´ ã«è¨å®šã™ã‚‹å ´åˆ … 1.5em ～ 2em 程度 マージンã¨ãƒ‘ディングを 0 ã«ã—ã¦ã€å·¦ãƒžãƒ¼ã‚¸ãƒ³ã«ã ã‘上記ã®å€¤ã‚’è¨å®šã™ã‚‹ã€ã¨ã„ã£ãŸæ„Ÿã˜ã«ãªã‚Šã¾ã™ã€‚ 余白ã®æ¯”較 u
2015å¹´ã€Web制作者ãŒæŠ¼ã•ãˆã¦ãŠããŸã„CSSã®å„種リセットã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã€ãƒ•ãƒ¬ãƒ¼ãƒ ワークã€ã‚¢ã‚¤ã‚³ãƒ³ã®ã¾ã¨ã‚
制作時ã«æ¬ ã‹ã›ãªã„リセット用ã®CSSã€ãƒšãƒ¼ã‚¸ã®ã‚°ãƒªãƒƒãƒ‰ã‚„レイアウト・コンãƒãƒ¼ãƒãƒ³ãƒˆãŒç”¨æ„ã•ã‚ŒãŸãƒ•ãƒ¬ãƒ¼ãƒ ワークã€ã‚¯ãƒªãƒƒã‚¯ãƒ»ã‚¿ãƒƒãƒ—やホãƒãƒ¼ã‚„スクãƒãƒ¼ãƒ«ã‚’楽ã—ã¾ã›ã‚‹ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã€ãƒ¢ãƒã‚¤ãƒ«ã«ã‚‚フレンドリーãªCSSã§ã¤ãられãŸã‚¢ã‚¤ã‚³ãƒ³ãªã©ã€ã‚¼ãƒã‹ã‚‰ç”¨æ„ã™ã‚‹ã®ã¯ã‹ãªã‚Šå¤§å¤‰ãªCSSã®ä¾¿åˆ©ãªãƒ•ãƒ¬ãƒ¼ãƒ ワークを紹介ã—ã¾ã™ã€‚ リセット用ã®CSSã¯ã“ã®3種類 レスãƒãƒ³ã‚·ãƒ–対応ã®å®šç•ªãƒ•ãƒ¬ãƒ¼ãƒ ワーク Material Designã«å¯¾å¿œã—ãŸãƒ•ãƒ¬ãƒ¼ãƒ ワーク ã•ã¾ã–ã¾ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒç°¡å˜ã«å®Ÿè£…ã§ãã‚‹CSS ã‹ã‚ã„ã„アニメーションを使ã£ãŸãƒãƒ¼ãƒ€ãƒ¼ 使ã„ã‚„ã™ã„アイコンフォント・Pure CSSã®ã‚¢ã‚¤ã‚³ãƒ³ リセット用ã®CSSã¯ã“ã®3種類 HTMLã®å„è¦ç´ ã®ãƒ–ラウザã”ã¨ã«ç•°ãªã‚‹å·®ç•°ã‚’ãªãã—ã€æ„図ã—ãŸé€šã‚Šã«å®Ÿè£…ã§ãるよã†ã‚¹ã‚¿ã‚¤ãƒ«ã‚’リセットã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã€‚ Reset CSS 2.0 HTMLã®å„è¦ç´ ã®marginã‚„padd
[CSS]2012年最も人気ã®ã‚ã£ãŸCSSリセットã¨ã©ã‚Œã‚’使ãˆã°ã„ã„ã‹ã®æŒ‡é‡ã€ã¨ä¸Šæ‰‹ã«ä½¿ã†ãƒã‚¤ãƒ³ãƒˆ
ブラウザã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’åˆæœŸåŒ–ã™ã‚‹CSSリセットã®2012å¹´ã«äººæ°—ã®ã‚ã£ãŸã‚‚ã®ã¨ã€ã©ã®CSSリセットを使ãˆã°ã„ã„ã®ã‹åˆ¤æ–ã™ã‚‹ãƒã‚¤ãƒ³ãƒˆã€CSSリセットを上手ã«ä½¿ã†ãƒã‚¤ãƒ³ãƒˆã‚’紹介ã—ã¾ã™ã€‚ CSS Reset 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ 2012年人気ã®ã‚ã£ãŸCSSリセット ã©ã®CSSリセットを使ã†ã¹ãã‹åˆ¤æ–ã™ã‚‹ãƒã‚¤ãƒ³ãƒˆ CSSリセットを上手ã«ä½¿ã†ãƒã‚¤ãƒ³ãƒˆ 2012年人気ã®ã‚ã£ãŸCSS Reset ã¾ãšã¯ã€2012å¹´ã«äººæ°—ã®ã‚ã£ãŸCSSリセット ベスト5ï¼ CSS Reset経由ã§æœ€ã‚‚ダウンãƒãƒ¼ãƒ‰ã•ã‚ŒãŸã‚‚ã®ã§ã™ã€‚ Eric Meyer's "Reset CSS" 2.0 コードã¨ãƒ‰ã‚ュメント HTML5 Doctor CSS Reset コードã¨ãƒ‰ã‚ュメント Yahoo! (YUI 3) Reset CSS コードã¨ãƒ‰ã‚ュメント Universal Selector '*' Reset コ
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
CSS :hover on other element?
{{#tags}}- {{label}}
{{/tags}}