Webの記録

レスポンシブに便利!様々な端末サイズでの見え方を確認できる「Viewport Resizer」

投稿日:2013年12月27日 更新日:

この記事は約 2 分で読めます。

viewport_resizer

レスポンシブサイトを制作途中、いろんな端末サイズでちょっと見え方を確認をします。

最終的にはやっぱり実機での確認なんですが・・・コーディング途中ではやっぱり手軽に確認したいもの。

そんな時に使える、便利なツール「Viewport Resizer」を試してみました。



「Viewport Resizer」の特徴を簡単に。

  • 導入が簡単!ブックマークレットするだけ。もちろん削除も簡単!
  • MacでもWindowsでもOK!
  • 1クリックでスマートフォンやタブレットの縦・横向きの表示確認ができる
  • カスタムサイズを柔軟に指定できる
  • しかも無料!有難い!!


導入方法。

viewport_resizer
Viewport Resizer」のサイトを開いて「CLICK OR BOOKMARK」の青いボタンをブックマークバーにドラッグして、お使いのブラウザ(Chorome、Firefox、Opera、Safari)でブックマークするだけ。

簡単に使い方。

viewport_resizer1

ブックマークバーに追加した「Viewport Resizer」を1クリック。あとは、見たいサイズのデバイスアイコンを選ぶだけ。(同じアイコンを2回押すと表示の縦横が変わります)

viewport_resizer2

見たいデバイスサイズで表示され、スクロールして1ページを見る事もできます!

デフォルトのサイズ以外でも、「Customize」の部分の値をいじると確認したいサイズで見ることができます!便利だなぁ~♪

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …

no image

WordPressでオリジナルテーマ作りにチャレンジ8【トップページ編】

この記事は約 1 分で読めます。 今回、WordPressのオリジナルテーマ作りにチャレンジしました。 ブログサイトならトップページを特別に作る必要はないのかもしれませんが、通常のサイト「index. …

no image

Facebookページに「お問い合せフォーム」を簡単設置♪

この記事は約 2 分で読めます。何気に始めたFacebookでは意外な人との繋がりが持てて、思ったより面白くて毎日開いて見てしまいます。 きっとそんな風に思っている方も多いのでしょう。 最近、Face …

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

この記事は約 1 分で読めます。 2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の …

no image

WordPressでオリジナルテーマ作りにチャレンジ5【sidebar.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「sidebar.php」の部分を作りたいと思います。 私が作りたいオリジナルテーマの「si …