などの疑問や悩みを解決してまいります。
検証ツールはWeb開発において必須ツールです。
その中でも代表的な機能がレスポンシブデザインを確認できるという点です。
つまりiPhoneサイズ、iPadサイズの画面幅に設定してWebページを確認することができます。
その確認方法を解説していきます。
レスポンシブ幅でWebページを確認しよう
検証ツールの大きな機能の１つでもありますが、PCサイズの画面幅だけではなくてタブレット、スマホ幅でWebページを確認することができます。
Web開発者においてレスポンシブ対応はマストなので、ぜひ検証ツールでの確認方法を学び活用していただきたいと思います。
検証ツールで画面幅を設定するには以下のアイコンがクリックされているか確認します。
アイコンがクリックされているとWebページ上にレスポンシブパネルが表示されます。
このパネルで画面幅を設定することができます。
デバイス幅に設定してみよう
レスポンシブ設定にはスマホやタブレットなどがありますが、具体的にどれぐらいの幅なのかパッと出てきませんよね。
検証ツールを使えば簡単にその幅に設定することが可能です。
レスポンシブパネルの中の「Dimensions：○○」の箇所をクリックします。
クリックすると各デバイスの名称がズラッと表示されます。
ここから簡単に選択したデバイスの画面幅に設定することが可能です。
今回は例としてiPhone 12 Proを選択してみましょう。
すると・・・
iPhone 12 Proの画面サイズに変更することができました。
このようにデバイスを選択することで簡単にそのデバイス幅に設定することができます。
数値を入力して画面幅を設定しよう
数値を入力することで好きな画面幅に設定することもできます。
例えばデザインカンプの画像の横幅に合わせて設定したいときなんかは数値入力がいいでしょう。
設定は簡単で○○×○○の箇所に好きな数値を入力するだけです。
例えば横幅1000pxにしてみます。
まずはDimensions：Responsiveに設定します。
デバイスを選択したままでは数値が変更できないのでDimensions：Responsiveに設定する必要があります。
設定したら横の数値を1000pxに変更します。
入力してEnterを押すとその画面幅に変更されます。
画面倍率を変更しよう
大きなディスプレイならいいですが、ノートパソコンでは検証ツールで確認できる画面幅に制限があります。
右側に検証ツールパネルがあるためWebページの内容が狭くなってしまうということです。
このような状態ではPCサイズのデザインを確認しづらいです。
なので画面倍率を変更して対応します。
現在「100％」となっている箇所をクリックします。
するとドロップダウンメニューが表示されますので例として「50％」を選択してみます。すると…
同じ990pxの画面幅設定ですが、先程と違い左右の余白に余裕ができましたね。
このようにすることでPCサイズを簡単に確認することができるようになります。
余裕があるので画面幅を伸ばしてみましょう。
2000pxまで拡げることができました。
このようにして倍率を調整することで画面幅をより大きい数字に変更することができるようになります。
以上が検証ツールでレスポンシブデザインを確認する方法でした。
レスポンシブデザインを扱う場合は必ずといっていいほど使うことになる機能だと思いますので、何でもいいのでWebページで検証ツールを開いてレスポンシブデザインを確認してみてください。
