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

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

投稿日: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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

スマホ画面の下にPC切り替え可能なワードプレスプラグイン

スマホ用のデザインの下にPC用の切り替えボタンを簡単に導入する事が出来るワードプレスプラグインをご紹介いたします。

ECキューブで販売する為の最低限の設定その2

その1が終わったら次のこの2を見て下さいね。

カスタムフィールドのループ内でループを使う方法

Custom Field Suiteを使えば無料で簡単にループ処理が出来ます。

一つのプラグインで最低限の機能が揃うJetpack

ワードプレスには自分の好きなプラグインを入れる事ができますが、沢山いれすぎると動きが遅くなってしまいますよね。そんな方におすすめのプラグインをご紹介いたします。

【EC-CUBE】ブロックで作成したtplファイルを呼び出す方法

EC-CUBEで管理画面からブロックを読み込む簡単な方法をご紹介いたします。

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