今回はChromeのデベロッパーツールについて記事を書きます。

Chromeのデベロッパーツールを使えば、ブログを確認する際に便利ですよね。

しかし、起動出来ない場合がありますので、その対処方法を記載しておきます。

Chromeでデベロッパーツールでスマホやタブレット表記を確認する

Chromeのデベロッパーツールを使えば、ブログを確認する際に便利です。

Chromeでデベロッパーツールの起動方法は何種類かあります。

まずは、基本的な起動方法を確認しておきましょう。

F12で起動できなくても大丈夫！Chromeでディベロッパーツールを起動する方法

１．ショートカットであるF１２キー押下

　Chromeでどこかのページを表示した状態で【F12キー】を押します。

　（Macの場合はCommand＋Option＋Iキー）

【Ｆ12キー】に音量調整などの別のキー設定をしている場合は【Fnキー】を押しながら【F12キー】を押しましょう。

２．右クリックでメニューを開き、「検証（I)　Ctrl+Shift+I」をクリック

3.メニュー＞その他のツール＞デベロッパーツールをクリック

Chromeでディベロッパーツールを使ってＰＣでスマホ表示を確認しよう！

デベロッパーツールさえ開いてしまえば、スマホでの視え方をするのは簡単です。

iPohonや、Nexusなど、いろいろなバージョンが選択できますので、自分のブログがどう見えるのか確認してみましょう！

レスポンシブデザインのテーマを使っていても、動画がはみ出ていたりすることがあるのでチェックしてみましょう！

ディベロッパーツールを使わずにスマホ表示をＰＣで確認する方法

Chromeのデベロッパーツールを使用しないで確認する方法をお伝えします。

使うのは、screenflyというWebサービスです。

screenflyでスマホやタブレット表示を確認する方法

まず、http://quirktools.com/screenfly/にアクセスしましょう。

表示を確認したいURLを記入して、【ＧO】を押しましょう！

タブレット表記を確認する

タブレットマークから、任意で機種を選択して見ましょう。

スマホ表記を確認する

携帯電話のマークをクリックし、任意の機種を選択しましょう。

スクロールバーのマークを選択すれば、スクロールバーが表示されます！

まとめ：ブログの表示チェックを大切に！

勿論、自分のスマホで自分のブログをチェックするのも大切です。

しかし、iPhoneを持っていなかったり、アンドロイド機を持っていないなどあると思います。

ＰＣ画面上でスマホ表示ができるのは大変便利です。

是非活用していきましょう！