エンジニアが知っておくとよいCSS、UIデザイン情報リンク集

エンジニアが知っておくとよいCSS、UIデザインに関する情報のリンク集です。随時更新します。

#### CSSメタ言語
- [Sass](https://sass-lang.com/) ... CSS拡張言語。
- [LESS](http://lesscss.org/) ... CSS拡張言語。
- [Stylus](https://stylus-lang.com/try.html) ... CSS拡張言語。

#### ライブラリ、FW
- [BootStrap](https://getbootstrap.jp/) ... フレームワーク。
- [TailWind CSS](https://tailwindcss.com/) ... フレームワーク。
- [styled-component](https://styled-components.com/) ... CSS in JS。
- [Emotion](https://emotion.sh/docs/introduction) ... CSS in JS。
- [Material-UI](https://material-ui.com/) ... Reactコンポーネント。
- [StoryBook](https://storybook.js.org/) ... デザインシステム・ガイドライン構築ツール。
- [Fractal](https://fractal.build/) ... デザインシステム・ガイドライン構築ツール。
- [SC5](http://styleguide.sc5.io/) ... デザインガイドライン構築ツール。
- [Autoprefixer](https://github.com/postcss/autoprefixer) ... vender-prefix の自動付与。
- [CSS comb](https://github.com/csscomb/csscomb.js/) ... CSSフォーマッター。プロパティの順序自動で整理。
- [Prettier](https://prettier.io/) ... コードフォーマッター。styled-componentにも対応。
- [stylelint](https://github.com/stylelint/stylelint) ... CSSリンター。
- [CSS Stats](https://cssstats.com/) ... CSSを解析するWebツール。
- [Normalize.css](https://github.com/necolas/normalize.css) ... リセットCSS。
- [sanitize.css](https://github.com/csstools/sanitize.css) ...リセットCSS。
- [Font Awesome](https://fontawesome.com/) ... アイコン集。
- [Material Design icon](https://materialdesignicons.com/) ... アイコン集。
- [Flaction](https://www.flaticon.com/) ... フリーアイコン。

#### VSCode拡張
- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) ... CSSのインテリセンス。
- [Fabulous](https://marketplace.visualstudio.com/items?itemName=Raathigeshan.fabulous) ... GUIでCSSを記入できる。CSS-in-JSやscssも対応。
- [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) ... CSSクラスのトラッキング、"Go TO Definition" などを可能にする。

#### Chrome拡張
- [ColorZilla](https://www.colorzilla.com/chrome/) ... カラーピッカー。
- [Stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja) ... 現在のページのCSSを変更できる。
- [User CSS](https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb?utm_source&utm_medium&utm_campaign&hl=ja) ... 現在のページにカスタムCSSを適用できる。
- [CSS Pepper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk) ... 現在のページに当たっているStyleを確認できる。
- [IE Tab](https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd) ... Chrome上でIEの動作を確認できるChrome拡張。


#### CSS設計
- [FLOCSS](https://github.com/hiloki/flocss)
- [BEM](https://en.bem.info/methodology/quick-start/)
- [SMACSS](http://smacss.com/ja)
- [PRECSS](https://precss.io/ja/)
- [CSS Architecture](https://philipwalton.com/articles/css-architecture/) ... CSS設計に関するGoogleエンジニアの記事。
- [Maintainable CSS](https://maintainablecss.com/) ... CSS設計に関する記事。

#### Webエディタ
- [SassMeister](https://www.sassmeister.com/)... Webエディタ、リアルタイムで Sass=>CSS。
- [less preview](http://lesscss.org/less-preview/) ... 上記のless版。
- [Stylus](https://stylus-lang.com/try.html) ... 上記のStylus版。
- [CodePen](https://codepen.io/) ... Webエディタ。

#### 各チームのデザインガイドライン、デザインシステム 
- 企業
  - [Adobe - Spectrum](https://spectrum.adobe.com/)
  - [Apple - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
  - [Google - Material Design](https://material.io/)
  - [Microsoft - Microsoft Design](https://www.microsoft.com/design)
  - [SalesForce - Lightning Design System](https://www.lightningdesignsystem.com/)
  - [Airbnb - Airbnb Design](https://airbnb.design/)
  - [IBM - IBM Desgin](https://www.ibm.com/design/)
  - [Atlassian - Atlassian Design System](https://atlassian.design/)
  - [Shopify - Shopify Polaris](https://polaris.shopify.com/)
- 政府
  - [US: USWDS](https://designsystem.digital.gov/)
  - [UK: GOV.UK](https://design-system.service.gov.uk/)
  - [Australia: The Australian Government Design System](https://designsystem.gov.au/)
  - [Canada: Canada.ca design system](https://www.canada.ca/en/government/about/design-system.html)
  - [Singapore: Singapore Government Design System](https://www.designsystem.tech.gov.sg/)

#### UIデザインの参考になるもの
- [Drrible](https://dribbble.com/) ...UIデザインの参考になるプラットフォーム。
- [Adobe Behance](https://www.behance.net/) ... UIデザインの参考になるプラットフォーム。
- [Pinterest](http://pinterest.jp/search/pins/?q=ui) ... UIデザインの参考になるプラットフォーム。
- [CodePen](https://codepen.io/) ... 他社のUIデザインやCSSの参考にになるプラットフォーム。
- [UX MILK](https://uxmilk.jp/tag/ui) ... UI, UXの参考になる記事。
- [CSS-TRICS](https://css-tricks.com/) ... CSSに関する技術（アイデア）記事。
- [frontend horse](https://frontend.horse/) ... CSSに関する技術（アイデア）記事。
- [IKESAI.COM](https://www.ikesai.com/) ... Webデザインの参考となるWebページ集。
- [ics.media](https://ics.media/entry/category/design/) ... UIに関する技術記事。
- [graphic Mama](https://graphicmama.com/blog/) ... UIに限らずデザイン全般に関する記事。
- [Adobe Color](https://color.adobe.com/ja/create/color-wheel) ... 色の参考にになるカラー集。
- [many-pixels](https://www.manypixels.co/gallery) ... ロイヤリティフリーの画像集。
- [DESIGN FILES](https://files.design/) ... Design Kitの販売。

#### デザインツール
- [Adobe XD](https://www.adobe.com/jp/products/xd.html) ... UIデザインツール。
- [Sketch](https://www.sketch.com/) ...UIデザインツール。
- [Figma](https://www.figma.com/) ... UIデザインツール。
- [Affinity Designer](https://affinity.serif.com/ja-jp/designer/) ... UIデザインソフト。
- [Affinity Photo](https://affinity.serif.com/ja-jp/photo/) ... 画像編集ソフト。
- [Gimp](https://www.gimp.org/) ... フリーの画像編集ソフト。
- [InkScape](https://inkscape.org/ja/) ... フリーのVectorソフト。


##### この記事を書くにあたって参考・参照した文献
- [CSS設計完全ガイド](https://www.amazon.co.jp/dp/B0856YMH7L/)
- [Best Places Where You Can Find Web Design Inspiration](https://graphicmama.com/blog/best-places-find-web-design-inspiration/)
- [より良いCSSを書くための様々なCSS設計まとめ](https://uxmilk.jp/43386)