副業で稼ぐ仕組みの作り方

パソコンでスマホ用デザインを確認する方法

投稿日:2014年11月1日 更新日:

パソコンからでもスマホ用のレスポンシブデザインやスマホ用デザインを確認する方法があります

はじめに

ホームページのデザインを制作する際にレスポンシブデザインやスマホ対応のみデザインを確認をする時にスマホでいちいち確認するのって非常に面倒ですよね。

もともとfirefoxの を使っていたのですが、iphoneの3Gのままだったので、さすがにもう使えないなと感じ色々と探している時に見つけました。

注意事項

google chromeをインストールして下さい。

google chromeのバージョンによって表示させる方法が違ってくるようです。

google chromeのバージョン

バージョン 37.0.2062.124 m

google chromeでスマホ対応のサイトにアクセスする

まずは、スマホ用のデザインを確認したいホームページにアクセスしてみます。

smhd01

そして右上にある

smhd03

このマークをクリックし、

smhd02

ツール > デベロッパーツール

をクリックします。もし、この流れが面倒であればキーボードのF12をクリックするとショートカットが出来ます。

Consoleがない場合

デベロッパーツールをクリック後にConsoleの列がない場合は

smhd05

この「>三」マークの部分をクリックすると表示されます。

smhd06

次はEmulationをクリックしスマホのマークが表示されていればそのアイコンをクリックします。

smhd07

 

DeviceのModel内のSelect modelをクリックすると色々な種類のスマホ、タブレットのデザインを確認出来ます

smhd08

 

その後にModelの横にあるSelect modelをクリックします。
するとその中に表示できるものが出てきます。

  • Amazon Kindle
  • Apple iPad
  • Apple iPhone
  • BlackBerry
  • Google Nexus
  • HTC
  • LG
  • Motorola
  • Nokia
  • Samsung Galaxy
  • Sony Xperia
  • Generic notebook
  • Notebook

これらのデバイスで表示させた時のデザインを確認する事が出来ます。

レスポンシブデザインのサイトで確認してみる

レスポンシブデザインの場合は各デバイスをに合わせる事でデザインの違いが見えてきます。

PCで見た時のデザイン
smhd01
Apple iPhoneで見た時のデザイン
smhd10

このように簡単に見る事が出来ます。

スマホ専用デザインがうまく表示されない場合
smhd11

各デバイスを選択したのにレスポンシブデザインであっても、スマホ専用のデザインであってもPC用のデザインの見え方がこのように小さくなってしまった。なんて悩みはありませんか?

こうなってしまっている場合は

デバイスを選択後に更新ボタンかF5を押して

頂けるとスマホ専用のデザインでも見る事が出来ました。

これでかなりWEB関係のお仕事がはかどりますね!

さいごに

PC上で出来る素晴らしさ

とにかくスマホ対応デザインをわざわざスマホを持っていないと確認出来ないと言うのは非常に面倒な事ですよね。
そうなれば、スマホを持っていない人はホームページの制作をするなと言わんばかりですしね笑

今までgoogle chromeを使っていたのは純粋に立ち上がりが早いからと言う理由でのみ使用していましたが、この機能を発見してからは、もっと他にも出来る事があるんじゃないなかと色々と使ってみようと思いました。

ただ、問題としては種類が多すぎるので慣れるまでが少し面倒ですね。

-副業で稼ぐ仕組みの作り方

執筆者:


comment

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

関連記事

特定のユーザーのみ反映するカスタマイズ方法

ワードプレスでは管理画面の情報をいじると全てのユーザーが影響を受けてしまいますがカスタマイズする事で管理者は影響を受けないように出来ます。

ECCUBE2で一覧ページの表示件数を変更する方法

一覧ページは本当に簡単に変更する事が出来ますよ

スマホ画面の一番下にふわっとコンテンツを表示させる方法

スマートフォンでホームページを見た際に常に一番下に表示されているふわっとした広告枠の出し方を紹介いたします。

ECCUBEのポイント関連のバグ

最終保持ポイントがマイナス表示にならないように調整して下さい。って出てる人向けのバグ修正方法

ふわっと表示したらごっつカッコええやん

スクロールしたらふわっと表示されるやつ作ってみたよ

人気の副業記事(24時間で更新)