【保存版】WEBサイト制作における便利なチェックツール一覧 ※随時更新中
WEBサイトをつくってると脆弱性のチェックやコードのチェックなどやらないといけないことが沢山ある。
とてもじゃないが手を動かしてチェックなんてしてる暇はないので下記にあげたツールを使うことはむしろ必須といえる。
なぜこんな記事を書くかというと、下記の記事を見たからである。
Webサイトの脆弱性を4年前から放置か、メニコン情報漏洩の原因 | 日経 xTECH（クロステック）
たまにこういう事故が起きているが、基本をやっていないから起こるわけで、
自分を含めて改めて整理しておこうと思った。
よく使うやつとか重要なやつは太字にしている。
WEB制作、ソースコード関連
英語類語 クラス名に迷ったらこれ
英語類語 - Weblio辞書
URLエンコード、URLデコード
Web便利ツール/URLエンコード・デコードフォーム - TAG index
CSSのtransitionなど、動きをGUIで指定してCSS出力できるシミュレーター
Animista
CSS妥当性チェック
https://jigsaw.w3.org/css-validator/validator.html.ja
CSSのプレフィックス自動付与（safari,IE,chromeとかいろんなブラウザに対応させる）
Autoprefixer CSS online
CSSグラデーション生成
Ultimate CSS Gradient Generator - ColorZilla.com
圧縮
画像圧縮
TinyPNG – Compress PNG images while preserving transparency
HTML、CSS、Javascript圧縮ツール
TM - WebTools
生成
フォントファミリー生成
Font-familyメーカー：標準フォント一覧からサクッと指定
Favicon生成
様々なファビコンを一括生成。favicon generator
メタタグ自動生成
https://metatags.io/
テスト、チェックツール
構造化チェック
構造化データ テストツール
ページスピード改善（Googleによる解析提案）
PageSpeed Insights
Googleモバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja
Googleページスピードチェック
PageSpeed Insights
リンク切れチェック
リンク切れチェックツール-調査結果
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール
Fonty: the new way for testing web fonts
差分チェックツール
Pretty Diff - The difference tool
difff《ﾃﾞｭﾌﾌ》
メタタグチェック
HEY META - Website Meta Tag Check
HTML妥当性チェック
https://validator.w3.org/unicorn/
Javascript検証用
Create a new fiddle - JSFiddle
Babel（JavaScriptをブラウザで実行テスト）
Babel · The compiler for next generation JavaScript
SSLチェック（A判定など）
https://www.ssllabs.com/ssltest/
ライブラリ関連
イカしたポップアップウィンドウ
SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
SNS関連
FacebookOGPデバッガー
https://developers.facebook.com/tools/debug/og/object/
Twitterカードデバッガー
Login on Twitter
インフラ関連
サイトの安全性チェック
https://www.ssllabs.com/ssltest/
Favicon Generator for all platforms: iOS, Android, PC/Mac...
サブネットマスク計算（IP許可時などに利用）
サブネットマスク計算(IPv4)／サブネット一覧（早見表）
インフラ構成図作成ツール
https://cloudcraft.co/app
