

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

販売店比較早見表
店舗名 |
詳細 |
キャッシュバック最高額を保証してくれます |
|
キャリア公式オンラインショップ |
|
ソフトバンクショップ, auショップ, ドコモショップ |
|