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

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

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

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

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

関連記事

ECCUBE4のメンテナンスモード画面を編集する

ECCUBE4のデフォのメンテナンスモード中の画面で結構質素ですよね 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ワードプレスのメンテナンスモード ワードプレスの分岐to …

お名前ドットコム

お名前ドットコムからドメインを移管させる方法

お名前ドットコムからドメインを移管させる方法をご紹介いたします。 はじめに お名前ドットコムの公式サイトはわかりにくかったので 注意事項 現在の方法でデザインが変わるとまた変わります。 お名前ドットコ …

no image

PDFファイルの作り方

情報商材でよくみるPDFファイル、これってどうやって作るのか・・・そんな悩みを解決致します。 関連記事: ECキューブ2.11.5のインストール方法 自動相互リンクの作り方 さくらサーバーにドメインを …

Gmailでメールの配信エラーを解消する方法

ある日急にGmailからのメールが「メールの配信エラー」と出て送信できなくなった時の対処法をご説明いたします。 関連記事: ECCUBE3をさくらにインストールしたよ Gmailとサクラのメールの連携 …

IEテスターよりも便利な開発者ツール

IEテスター重すぎてテストに環境としては悪すぎる・・・そんな人の為に開発者ツールをご紹介させて頂きます。 関連記事: 関連記事はありません。