【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Web制作者必見!ブラウザの横幅を簡単に確認できるChrome拡張機能

Web制作者必見!ブラウザの横幅を簡単に確認できるChrome拡張機能

GoogleChrome

(2014年1月15日 追記しました)

注意:2014年1月14日、Window Resizerにはマルウェアが含まれていることが発覚しています。現在Chromeウェブストアからダウンロード出来なくなっています。
GIGAZINE
Chromeの拡張機能Window Resizerがマルウェアを含んでいたことが発覚

Google プロダクト フォーラム
http://productforums.google.com/forum/#!msg/chrome/mlAD1ygc0v0/9-EJU6pjuN4J

※Necoさん、ご指摘ありがとうございます。

レスポンシブサイトのコーディングを進める際に、コンテンツの動作確認を毎回iPhoneなどのスマートフォンで実機確認をするよりも、PCのブラウザを広げたり狭めたりして確認をする方が手っ取り早い時があります。

ただ@mediaで設定したブレイクポイントでのブラウザサイズが分からずに、「このコンテンツ表示はこの横幅で合ってたんだっけ?」という時がままあったりして困ります。

今回はそんな時に便利なGoogle Chromeのエクステンション、Window Resizerが便利だったのでご紹介。

Window Resizerをインストール

まずはChromeウェブストアにアクセスします。
https://chrome.google.com/webstore/category/extensions?hl=ja

左上のストアを検索で「Window Resizer」と検索。
左の窓から検索します

 

拡張機能の欄にwindow resizerが表示されるので、「Chromeに追加」をクリックしてエクステンションを追加します。
Window ResizerをChromeに追加

 

Window Resizerの使い方

Window Resizerが有効化されているのを確認して、通常のウェブサイトを表示しブラウザの端をドラッグアンドドロップで広げたり狭めたりすると、図のように右下にウィンドウサイズが表示されます。
右下にウィンドウサイズが表示される

 

またブラウザツールバー右上のWindow Resizerのアイコンで、あらかじめ決められたウィンドウサイズ(iPhoneやデスクトップなど)に一気に設定することができます。
一気にリサイズ

指定するブラウザサイズはユーザー側で任意に設定することも可能です。

 

終わりに

探してみると、FirefoxにもWindow ResizerがあったのでFirefoxメインでお使いの方も利用できますね。
Firefox:Window Resizer

レスポンシブサイトのCSSを調整する時に、リアルタイムでブラウザの横幅を確認できるのでコーディングもサクサク進めることができます。無料なので、Chrome(Firefoxも)ユーザーはマストで入れたい拡張機能です。

ただしPCブラウザと、スマートフォンやタブレットでの表示は異なります。実機確認は必ず行うようにしましょう。

上林

photo credit: rwentechaney via photopin cc

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+