稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

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

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

関連記事

no image

PS Auto Sitemapでサイトマップを自動生成(ワードプレス)

ブログやホームページを見に来られた人向けのサイトマップをワードプレスであれば自動生成してくれるプラグインがあります。今回はそんなプラグインPS Auto Sitemapのご紹介です。 関連記事: カス …

さくらからドメインを転出させる方法

さくらで取得したドメインを転出させる方法をご紹介いたします 関連記事: 管理画面でお問合せメールの確認が出来るTrust Form gmailからサクラのサーバー経由でメールが送れない エックスサーバ …

Jetpackのメール記事投稿

メールから簡単にブログの投稿をする事が出来るJetpackのメール記事投稿機能のご紹介です。 関連記事: WP-Membersのインストールと設定方法 URLを入力するだけでfacebookのようなリ …

シーサーブログの作り方

副業やお小遣い稼ぎも出来るシーサーブログの作り方の紹介です。 関連記事: エックスサーバーからさくらサーバーにドメインを移管してみた 管理画面でお問合せメールの確認が出来るTrust Form iPh …

ECCUBE4でカートに入れれない時

ECCUBE4で商品がカートに入れれない時は配送関係が関係しているかもしれません。 関連記事: カスタム投稿タイプを簡単に作れるワードプレスプラグイン ノロウイルスの治し方 ワードプレスのシンプルな営 …