前回「自主学習1-5」でレスポンシブデザインについて学習しましたが、パソコンでスマホ表示を確認する方法について書き忘れていたので今回の補足でまとめます。
ゴミコ
肝心なことを書いていなかったよね。ごめんなさい。
contents
パソコンでスマホ表示を確認するには？
制作途中のサイトをブラウザに表示させて見た目を確認する方法
ローカル環境でファイルをタブルクリックすることでブラウザに表示させることができますが、この時にスマホ表示についても同時に確認することができます。
スマホからの見た目を確認する方法
使用ブラウザによって操作方法は異なるものの、おおむね以下の手順で確認することができます。
- 確認したいファイルをブラウザで表示させ、ページ上で右クリック
- chromeなら「検証」、Firefoxなら「要素を調査」を選択
- デベロッパーツールが起動します
- ツールの中に表示画面をPC⇔スマホで切り替えるアイコンがあるので、これを押すことで各端末での表示確認ができるようになります
Firefoxでの表示手順
①「要素を調査」を選択
②右下の切り替えアイコンを選択
③スマホ表示に切り替わります（再度押せばパソコン表示に戻ります）
chromeでの表示手順
①「検証」を選択
②切り替えアイコンを選択
③スマホ表示に切り替わります（再度押せばパソコン表示に戻ります）
デベロッパーツールを活用しよう
このようにブラウザにはデベロッパーツールが標準装備されていますので活用していきましょう。
デベロッパーツールのメニュー解説（Chrome）
- Element…HTMLのソースをツリー表示。
- console…エラーやログを確認する。
- Styles…スタイルの表示。
- Network…ブラウザ上で発生した通信の確認。
- timeline…ページのダウンロードにかかった時間を表示。
- sources…コードの行番号を選択することでブレイクポイントを設置。（実行中のスクリプトを一時停止させるための機能）
- pretty print…圧縮されて読みにくいコードを改行、インデント付きに成形。
- application…現在のページを構成するファイルのほかにストレージ、クッキーを確認。
Chromeのデベロッパーツール画面
様々なWEBサイトをデベロッパーツールで確認することができる
ローカル環境で自作サイトを表示させる以外にも、インターネットに接続されたページも同じ手順でツールを起動させることができます。企業サイトがどのようにサイト構築されているか調べてみることもできます。
ゴミコ
この機能が無料で利用できるのすごい…。これは活用しない手はないね！
自主学習1-5【補足】について、講師の評価
デベロッパーツールの機能は上記以外にも色々ありますね。
サーバサイドへPOST送信するパラメータを確認したり、HTTPヘッダーの生データを確認したり、JavaScriptを扱う時はDOMの状態やオブジェクトの状態を確認したり、などなど。
これらはWebアプリケーション開発において様々なシーンで役立つツールです。
（今は意味が分からない言葉があってもいいので、雰囲気だけ感じてくれればOKですが）他にも便利な機能がないかどうか、調べながら使い方をマスターしていきましょう。
byゴミリョ
次回の記事
にほんブログ村
