html:本アップ前の確認で役に立つ、便利なサイトまとめ

コーディングの時によく使用するコードやサイトをまとめました。随時更新予定です。

01. 画像圧縮サイト

画像を軽くする その①

TinyPNG

他の形式でも圧縮してくれるけれど、特にpngの圧縮に特化した画像圧縮サイト。複数の画像を一括で書き出してくれます。

画像を軽くする その②

Squoosh

Googleが提供しているという画像圧縮サイト。現状のものと圧縮後の画質の比較がその場でできるので、重宝しています。難点があるとすれば、1枚ずつでしか書き出せない点。上記のtinypngと使い分けをすると良さそうです。

02. 読み込み速度やマークアップのチェックサイト

サイトの読み込み速度のチェックをする

PageSpeed Insights

サイトのコンバージョンに関わるサイトの読み込み速度を、URLを入力するだけで評価してくれます。

HTMLチェッカー

Ready to check

こちらもURLを入力するだけで、サイトのマークアップ等の問題点を検証できます。

03. ファビコンやそのほかアイコンを作成

ファビコン以外の各種アイコンを作成する

Favicon Generator for all platforms

ファビコンは別サイトで作成した方が良さげです。それ以外のアイコンはすべてこちらで生成。260x260の画像を1枚作成し、ブラウザに読み込ませて手順通りに設定をしていくだけでOKです。コードが自動で生成されるので、favicon以外はコピペすれば良いので簡単です。

マルチアイコンを作成する

半透過マルチアイコンやファビコン(favicon.ico)作成

16x1632x3248x4896x96128x128でアイコンを作成。こちらもブラウザに読み込ませて設定をしていくだけで簡単に作成することができます。

04. ブラウザチェックで役立つサイト

mac環境でIEの表示確認を行う

Browserling

Windows7 IE11でのチェックとなるので利用できるシーンは限られて来ますが、Chromeなど他のブラウザからアクセスしてIEの確認ができます。ただし1回の利用で3分間、また1日に利用できる回数制限があるので注意が必要です。

QRコードを作成

QRコード作成 【無料】

スマホ表示の確認用に。URLを入力するだけで、QRコードが生成されます。かなり原始的ですが、役立っています。

URLをコピーする