ブログで生きていくブログで生きていくことを実践している藤本陽介の個人ブログです。Webマーケティング・WordPress・SEOについてノウハウを隠すことなく解説しています。ふじもんデベロッパーツールの使い方【PCでスマートフォン表示を確認する】ツイートシェアはてブLINEPocketWebサイト開発者にとって、スマホの表示がどうなっているのか気になりますよね。この『ブログで生きていく』の訪問者は、PCが20%でスマホが80%ぐらいですから、スマホでどのように表示されているかチェックするのはとても大切なことです。今回は、PCでスマホ表示を確認する方法を紹介します。クリックできる目次デベロッパーツールの使い方デベロッパーツールとはMacでデベロッパーツールを使う方法Windowsでデベロッパーツールを使う方法デベロッパーツールの3つのおすすめ機能スマホ表示のチェックCSS(スタイルシート)のチェックページ速度のチェック使ってみることでいろいろ気づきが増えるデベロッパーツールの使い方デベロッパーツールとはデベロッパーツールとは、Webサイト開発者のための無料ツールです。サイトの見た目をチェックしたり、エラーがどこで発生しているのかチェックしたりできます。パソコン上でスマートフォンでどのように表示されるのか、確認できるので、とても便利なツールです。このように、パソコン上でスマートフォンでどのように表示されるかチェックできるので、Webサイト開発者にとってはとてもありがたいツールです。Webサイト開発者なのに、デベロッパーツールを知らないなんて、Webサイト開発者としては失格といっても良いぐらい、当たり前に使いこなした方が良いツールです。サイト開発者なら、デベロッパーツールを起動するクセをつけた方が良いですよ!Macでデベロッパーツールを使う方法Macの場合は、コマンド+オプション+『I』を同時に押すとデベロッパーツールが起動します。そのあと、コマンド+『R』を同時に押して、リロード(ページ再読み込み)をします。Windowsでデベロッパーツールを使う方法Windowsの場合は、『F12』を押すとデベロッパーツールが起動します。そのあと、『F5』を押すとリロード(ページ再読み込み)をします。コントロール+シフト+『I』を同時に押すとデベロッパーツールが起動します。そのあと、コントロール+『R』を同時に押して、リロード(ページ再読み込み)をします。MacとWindowsでデベロッパーツールの起動方法は多少違うものの、使い方などは基本的に一緒です。デベロッパーツールを起動してから、リロードする理由は、ブラウザ上に表示されている最新の情報を確認するためです。CSSを変更する際は、リロード(ページ再読み込み)をこまめにしないと、表示が崩れたりするのでリロードもクセづけるようにしましょう。デベロッパーツールの3つのおすすめ機能デベロッパーツールではいろいろなことが確認できますが、今回は代表的な3つの機能の使い方を紹介します。Webサイト開発者なら絶対に知っておくべき機能なので、ぜひチェックしてみてください。スマホ表示のチェックデベロッパーツールで、スマートフォンでどのように表示されるかチェックできます。表(table)とか、ボタンとかの表示は、PCだとなかなか分からないので、実装したら必ずチェックしています。スマートフォンも、iPhoneだけじゃなく、NexusやGalaxyなどのスマートフォン端末の表示もできますし、iPadなどのタブレット端末の表示もできます。制作会社に勤務していたら、知っている人は多いと思いますが、個人でWebメディアを運営している人はこの機能を知らない人が多かったです。Webサイト開発者だけでなく、Web関連の仕事をしている人なら、この機能を知っておくととても便利です。いますぐこの機能を使ってみてください。CSS(スタイルシート)のチェックCSSを調整したい時も、デベロッパーツールを起動させて、どこに、どんなスタイルがあたっているのかをチェックしています。色(色番号)とか、スペース(marginやpadding)を調整するのに、すぐチェックできます。赤枠で囲った部分をクリックすると、PC表示とスマホ表示が切り替えできたり、チェックしたい該当の部分を指定できます。CSSを調整するWebデザイナーなら、この機能は絶対に使いこなすべきです。CSSのmarginやpaddingがどのように設定してあるのか、チェックするのに、デベロッパーツールだとすぐに確認できるので、調整がとても簡単にできます。ページ速度のチェックデベロッパーツールでは、ソースコードの情報だけでなく、ネットワークの情報も確認できます。上の画面でいうと、右上に「>>」というマークがあるので、それをクリックすると、NetWorkが選択できます。ネットワークタブにしてから、リロード(再読み込み)をします。リロードする理由リロードすることで、そのページの読み込みにどれぐらい時間がかかっているのか、確認できます。ネットワークタブに表示されている情報を基に、サイトの表示速度の改善を考えたりできます。このデベロッパーツールのネットワークタブを使わずに、いろいろ表示速度の改善をしても、その対策は意味がないことが多いと思います。キャッシュをしっかり読み込んでいるのか?とかファイルの圧縮がしっかりできているのか?とか、こういうところはデベロッパーツールを使えばすぐにわかります。ネットワークタブは、中上級者向けな機能かもしれません。サイトの運営者でも、ネットワークタブをチェックすることで、検索エンジンの上位表示ができる可能性が大きくなるので、ぜひ使いこなして欲しい機能です。使ってみることでいろいろ気づきが増えるいかがでしょうか?デベロッパーツールはとても便利です。驚くのがデベロッパーツールは無料で使えるということです。使い方はいろいろありますが、まずはスマートフォンでどのように表示されるのかチェックするぐらいの使い方で良いと思います。デベロッパーツールに触れる機会が多くなれば、いろいろな使い方がわかってくると思いますし、ネットワークタブの重要性もわかると思います。Webサイト開発者なら、必須といっても良いツールです。Webデザイナーが良く利用するadobeソフトと同じくらい便利なツールと考えると、年間で5万円払っても使うであろうツールです。デベロッパーツールは、初心者でも無料で使えるのですから、とにかく使いまくりましょう。SEOWordPressこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ポケモンGoの横浜のイベント『ポケモンGoパーク』に行ってきた堀江貴文さんの新書『多動力』は背中を押して欲しい人におすすめ!RECOMMENDこちらの記事も人気です。SEO2019.1.12【SEO対策】Webライティングのスキルを身につける方法SEO2019.2.2SEO対策でWordPressのカテゴリをnoindexにした方が良い理由SEO2019.1.5SEOにおける検索意図の重要性とは【具体例もあわせて解説】SEO2019.1.20SEO対策のリライト方法【適当にしたら逆効果】WordPress2018.2.7WordPressの投稿やカテゴリをエクセル出力するプラグイン『Expo...WordPress2019.2.9いまさら聞けない。WordPressとは【プロが解説します】WordPress2018.8.30写真ギャラリーに特化したWordPressの有料テーマ4選SEO2018.12.28メタディスクリプションとは?【SEO対策に有効な書き方】ABOUTこの記事をかいた人ふじもんWebサイトの制作や、システム開発などしながら、ブログで生きています。運用しているWebサイトは非公開ですが、数は20サイトを超えています。WordPressの講師をたまにしています。今後は動画編集を中心に活動していきたいです。POSTこのライターの最新記事WiFi2020.1.14入院中におすすめのレンタルWiFi【D3WiFiがおすすめな理由】WiFi2019.12.28どこよりもWiFiの口コミ評判と3つのデメリットを解説します【口座振替に対応...キャンペーン2019.12.24光回線の選び方【家電量販店で選んではいけない理由】WiFi2019.12.15レンタルWiFiなのに端末返却義務が無いWiFiサービスふじもんWordPressをマスターするために、プログラミングをゼロから勉強して、なんとか書籍の執筆やセミナー講演をさせてもらえるようになりました。いまは、ブログで生きています。日本で一番詳しくWiMAXを計測しました。Reserved.ホームメニューフォローシェアおすすめトップTwitterSNSでシェアツイートシェアはてブLINEPocketCLOSE。