おしブロ from STONEWEB

おしい県でWebに携わって働く人のブログ from ストーンウェブ。IT&Web界隈に関する役に立ちそうなことをまとめていきます。2013年1月運営開始。

移転しました。

約3秒後に自動的にリダイレクトします。

制作したサイトがスマホやタブレットでどんな感じに表示されるかをチェックできるツール「Screenfly」が使えそう。

f:id:lord_cashew:20140422073459j:plain

一昔前は「パソコン」「モバイル(ガラケー・ケータイ)」という二つのパターンでサイトの表示をチェックするだけで良かったのですが、 タブレットやスマホが普及した現在では、いろいろな端末(解像度)での表示をチェックする必要があります。

とは言え大企業ならまだしも、小企業やフリーランスでサイト制作している場合には、表示をチェックする為だけに全ての実機を揃えるのはコスト的に大変です。

そんな時は、いろいろな端末(解像度)での表示をチェックできる無料ツール「Screenfly」が重宝します。

 

「Screenfly」の使い方

使い方は簡単です。まずは「Screenfly」にアクセスします。

f:id:lord_cashew:20140422072615j:plain

チェックしたいサイトのURLを入力します。

f:id:lord_cashew:20140422072637j:plain

サイトが表示されます。

f:id:lord_cashew:20140422073510j:plain

上のアイコンをクリックして端末を選択します。

ノートパソコンの場合。

f:id:lord_cashew:20140422073549j:plain

タブレットの場合。

f:id:lord_cashew:20140422073614j:plain

もう一つタブレットの場合。

f:id:lord_cashew:20140422073632j:plain

スマホの場合。

f:id:lord_cashew:20140422073650j:plain

 

実機とは少しばかり表示が異なる可能性もありますが、いろんな端末(解像度)での表示をザザザッと一気にチェックするにはとても便利なツールです。

 

レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法

レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法

  • 作者: 野田一輝,加藤俊司,藤田拓人,清水豊,細川富代,野田真穂,川下城誉,根岸良樹,岩堀真吾,大竹孔明
  • 出版社/メーカー: エムディエヌコーポレーション(MdN)
  • 発売日: 2013/07/12
  • メディア: Kindle版
  • この商品を含むブログを見る
 

 

© STONEWEB