エンジニアが知っておくとよいCSS、UIデザインに関する情報のリンク集です。随時更新します。
CSSメタ言語
ライブラリ、FW
- BootStrap ... フレームワーク。
- TailWind CSS ... フレームワーク。
- styled-component ... CSS in JS。
- Emotion ... CSS in JS。
- Material-UI ... Reactコンポーネント。
- StoryBook ... デザインシステム・ガイドライン構築ツール。
- Fractal ... デザインシステム・ガイドライン構築ツール。
- SC5 ... デザインガイドライン構築ツール。
- Autoprefixer ... vender-prefix の自動付与。
- CSS comb ... CSSフォーマッター。プロパティの順序自動で整理。
- Prettier ... コードフォーマッター。styled-componentにも対応。
- stylelint ... CSSリンター。
- CSS Stats ... CSSを解析するWebツール。
- Normalize.css ... リセットCSS。
- sanitize.css ...リセットCSS。
- Font Awesome ... アイコン集。
- Material Design icon ... アイコン集。
- Flaction ... フリーアイコン。
VSCode拡張
- HTML CSS Support ... CSSのインテリセンス。
- Fabulous ... GUIでCSSを記入できる。CSS-in-JSやscssも対応。
- CSS Peek ... CSSクラスのトラッキング、"Go TO Definition" などを可能にする。
Chrome拡張
- ColorZilla ... カラーピッカー。
- Stylus ... 現在のページのCSSを変更できる。
- User CSS ... 現在のページにカスタムCSSを適用できる。
- CSS Pepper ... 現在のページに当たっているStyleを確認できる。
- IE Tab ... Chrome上でIEの動作を確認できるChrome拡張。
CSS設計
- FLOCSS
- BEM
- SMACSS
- PRECSS
- CSS Architecture ... CSS設計に関するGoogleエンジニアの記事。
- Maintainable CSS ... CSS設計に関する記事。
Webエディタ
- SassMeister... Webエディタ、リアルタイムで Sass=>CSS。
- less preview ... 上記のless版。
- Stylus ... 上記のStylus版。
- CodePen ... Webエディタ。
各チームのデザインガイドライン、デザインシステム
- 企業
- 政府
UIデザインの参考になるもの
- Drrible ...UIデザインの参考になるプラットフォーム。
- Adobe Behance ... UIデザインの参考になるプラットフォーム。
- Pinterest ... UIデザインの参考になるプラットフォーム。
- CodePen ... 他社のUIデザインやCSSの参考にになるプラットフォーム。
- UX MILK ... UI, UXの参考になる記事。
- CSS-TRICS ... CSSに関する技術（アイデア）記事。
- frontend horse ... CSSに関する技術（アイデア）記事。
- IKESAI.COM ... Webデザインの参考となるWebページ集。
- ics.media ... UIに関する技術記事。
- graphic Mama ... UIに限らずデザイン全般に関する記事。
- Adobe Color ... 色の参考にになるカラー集。
- many-pixels ... ロイヤリティフリーの画像集。
- DESIGN FILES ... Design Kitの販売。
デザインツール
- Adobe XD ... UIデザインツール。
- Sketch ...UIデザインツール。
- Figma ... UIデザインツール。
- Affinity Designer ... UIデザインソフト。
- Affinity Photo ... 画像編集ソフト。
- Gimp ... フリーの画像編集ソフト。
- InkScape ... フリーのVectorソフト。