スマホからの表示確認を一瞬でする方法、と中級者テクニック

スマホ確認

最近では、スマホからの検索・アクセスがほとんど。
おそらく、どのサイトも70~80%ほどは、スマホからの検索です。

だからこそ、大切なのは、スマホから自分のサイトがどのように表示されるか?ということ。
パソコンからよりも、スマホからの見え方について、注意を払う必要があります。

で、ブログ記事など書く場合は、パソコンから書くことが多く、ぶっちゃけ「記事を書いた後に、スマホからの確認なんてメンドクセー・・・・」と思うことはないでしょうか?

まぁ、SHOはそうです(笑)
(・・・・文字を読み返して誤字脱字チェックもめんどくさいw)

だから、パソコン(chrome)から、しれっとスマホ表示を確認できる方法をご紹介します。

 

chromeの検証機能で、一瞬でスマホ表示チェックができる

使うWEBプラウザはchromeです。
IEやFIREFOXなど他は出来るかどうか知りません(笑)

WEBプラウザがchromeでない人は、ダウンロードしてくだせぇ。
https://www.google.com/intl/ja_ALL/chrome/

で、ダウンロードし終わった後は、超簡単。

スマホ表示を確認したいサイトを開いて「右クリック」→「検証」を押すだけ。

キャプチャーはこちらから。

検証はここ

「検証」を押したら、こんな画面に映ります。

検証クリックしたらスマホ確認

こんな風に簡単にスマホ表示を確認できます。

ね?簡単っしょ!?(軽いw)

画面左上をクリックすると、「iPhoneシリーズ」での表示、「iPhone+」での表示、「Galaxy」での表示、「タブレット」での表示など、デバイス別に表示確認でもできる。

またまた、画面右上の赤枠部分をクリックすると、パソコンでの表示切り替えも可能。
この機能を使えば、パソコン、タブレット、スマホからの表示確認もめちゃくちゃ簡単に分かる。

 

中級者テクニック|他のサイトのデザインも一瞬で分かる

ここからは、中級者用のテクニックになります。
WEB関係が苦手な人は、スルーしてください(笑)

検証ですが、まだまだ使える機能があります。
それは「このデザインいいなー」「この見出しいいなー」「この吹き出しいいなー。」
と思ったときのCSS情報も一瞬で分かること。

例えば、SHOのサイトの見出しがええなぁと思ったします。(どこにでもあるデザインですが 笑)

すると、該当の箇所にカーソルを合わせて「検証」を押すと、そのCSS情報が丸わかり。
あとは、そのCSS情報を自分サイトのCSSに変更・追加をすれば、あっと言う間にデザインを変えられる。

CSS丸わかり

まぁ、これはCSSの基礎知識がなければ、なんのこっちゃ分からへん話やと思いますが、CSS基礎知識がある人は是非お試しを。

まとめ

つまり、スマホ表示確認は一瞬できます。しかも、スマホと言ってもサイズはバラバラなのも簡単に表示チェック可能。
しかし実機で見ると多少の差分があるので、実機で見ることももちろん大切。

ただ、毎回毎回、実機で確認するのもシンドいので、これを覚えておけばお手軽に確認できますよっ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA