【ドコモのiPhoneX、iPhone8、スマホを購入したい方はこちら】Webページを閲覧する環境というのは様々で、Webサイト作成時には様々な環境での表示を考慮しなければなりません。そんな時に環境ごとに表示テストをするのは至難の業です。そこで今回は、Webサイト作成時に便利なツールを紹介していきます。ferretHTML・CSSHTMLクイックリファレンスHTMLタグを目的別、ABC順で探すことが出来るサイトです。タグを忘れてしまった時に、探すのに役立つのではないでしょうか。タグの解説とともに、それぞれのタグの使用例も書かれています。HTMLだけでなく、CSSなどについての解説も同サイト内にありますので、合わせて見るといいかもしれません。http://www.htmq.com/index.htmWebクリエイターボックスWebデザイン関連の記事を中心として執筆されているサイトです。HTMLやCSSだけでなく、デザイン関連の記事も充実しているので、非常に参考になります。HTMLカラーコード黒・白・赤などのカラーコードを実際の色とともに閲覧できるサイトです。原色にかぎらず、和色や洋色、パステルカラーなど幅広い色のカラーコードが掲載されています。Browsershots様々なブラウザ環境での表示をチェックすることが出来ます。特徴は、ブラウザのバージョンを細かく指定できることにあり、バージョンごとに細かくチェックしたい場合には便利ですね。http://browsershots.org/ブラウザキャプチャ【無料】メニューが日本語に対応している、ブラウザキャプチャが出来るサイトです。先ほどとは違い、Chrome系・Firefox・Operaと数は少ないですが非常に使いやすいです。『Linux系OSでキャプチャをしています。WindowsやMACと表示(キャプチャ結果)が異なる場合があります。』とあるように、Linuxでキャプチャされているのでデザインは多少異なる可能性もあります。https://www.cman.jp/BrowserCapture/画像圧縮TinyPNGJPEGとPNG画像を圧縮できるツールです。見た目にほとんど違いがないのに、綺麗に画像を圧縮することが出来ます。https://tinypng.com/PunyPNGJPEG、GIF、PNG画像を圧縮することが出来ます。先ほどのサイトと似ていますが、アップロード出来るファイルサイズに違いがあります。InsightsWebページの読み込み速度を計測し、改善すべき点を指摘してもらえるツールです。JavaScriptやCSS、HTMLの圧縮など、どこを改善すればいいのか提案してくれます。MinifierJavaScriptとCSSの無駄な記述を削除することにより、コードを軽量化させることによって、処理を高速化させることが出来ます。https://syncer.jp/js-minifierSEO対策ferretSEOやWebマーケティングについて学べるサイトです。