ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webサイトは一つのデバイスだけで見るとは限りません。特に最近ではPC、タブレット、スマートフォンなどあらゆる大きさのデバイスで閲覧します。そうしたデバイスでの表示確認をすべての実機でやるのは現実的ではありません。

そこで使ってみたいのがSizzyです。多数のデバイス幅に対応したデザイン確認ツールです。

Sizzyの使い方

最初にURLを入力します。

そうすると様々なデバイス幅でサイトの確認ができます。

ズーム変更機能が便利です。

Androidデバイスだけに絞り込んだところです。

タブレットだけ。

横向きもできます。

Sizzyを使えば多彩なデバイスでの表示確認が簡単にできます。Sizzyで確認しながら進めていけばあるメディアクエリーを使った時だけデザインが崩れると言った問題もすぐに気付けるはずです。

SizzyはHTML5/JavaScript製のオープンソース・ソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Sizzy

kitze/sizzy: A tool for developing responsive websites crazy-fast

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2