Webコーディングで必要なツールとプラグイン、リソースまとめ

コーダーの必要な基本的なツールとプラグイン、リソースまとめ

エディタ

Visual Studio Code

Visual Studio Code – コード エディター | Microsoft Azure

VSCode プラグイン

• Japanese Language Pack for Visual Studio Code

• Auto Rename Tag

• Live Sass Compiler

• Live Server

• Sass (.sass only)

• vscode-icons

• IntelliSense for CSS class names in HTML

Chrome プラグイン

• CSS Peeper

• CSS無効化くん

• Wappalyzer - Technology profiler

• WhatFont

• モバイルシミュレーター-レスポンシブテストツール

• Image Size Info

• UI Build Assistant

• GoFullPage - Full Page Screen Capture

• ウェブページ全体をスクリーンショット - FireShot

• ColorZilla

• Pasty

リファレンス

MDN Web Docs

W3Schools Online Web Tutorials

ブラウザ・画面サイズシェア率

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

Browser Display Statistics

CSS対応チェック

Can I use... Support tables for HTML5, CSS3, etc

サイトパフォーマンス診断

PageSpeed Insights

W3C構文チェック

The W3C Markup Validation Service

CSSフレームワーク

Bootstrap

Google font

Browse Fonts - Google Fonts

Font Awesome

Font Awesome

エディタ 文字加工

EmEditor (テキストエディタ) – Windows用のおすすめテキストエディター、コードエディター、CSVエディター、巨大ファイルエディター (フリー版もあります)

参考

Apple ヒューマンインターフェイスガイドライン

https://developer.apple.com/jp/design/human-interface-guidelines/

Material Design

Material Design