Firefox でブラウザの幅を指定してサイトを表示する

ウェブサイトを作成している時や動作確認する場合にブラウザの幅をしたい時があるが、ブラウザの機能を使えば幅指定してウェブサイトを表示させることができる。

1.幅を指定してウェブサイトを表示する利用シーン


日常生活ではブラウザの幅を指定してウェブサイトを表示することはあまり無いだろう。
利用シーンとしては、まずウェブサイトの製作現場が挙げられる。
最近ではパソコンだけでなくスマホやタブレットといった携帯端末用のサイトデザインも不可欠なため、ブラウザの幅に応じて作成したウェブサイトがどのように見えるかチェックし、適したレイアウトになるように修正しなければならないのでブラウザの幅がすぐに指定できると重宝する。

もう1つは資料作成の際にブラウザの指定が役立つ。
画面の操作説明書や、ウェブサイトの紹介などブラウザで表示されているものを資料に貼り付ける場合に、幅がバラバラだと資料の見栄えも良くなく、見易さも損なわれる。
そこでブラウザを幅指定することで貼り付ける画像の幅が統一されるので資料の出来に大きく左右される要因となる。

2.ブラウザの幅を指定してウェブサイトを表示する


ブラウザの幅を指定するためには、ブラウザ「Firefox」を利用する。
Firefox でウェブサイトを表示し、キーボードで Ctrl + Shift + M を押すとサイズ指定できる入力欄と、サイズに合わせた幅でウェブサイトが再表示される。
下図は横 360px x 縦 480px でウェブサイトを表示した場合の見え方となる。

幅360pxの場合


3.ブラウザの幅を変更する


ブラウザの幅を変更するには、ウェブサイトが表示されている上部になる入力欄の数値を書き換えるとリサイズされて表示される。
横幅を 360px から 760px にすると下図のように変化する。

幅760pxの場合


図では横幅が 360px の時も 760px の時も横スクロールが発生しているので、スマホやタブレットでは見づらいのがわかる。

4.表示されているウェブサイトを画像に保存する


表示したウェブサイトを画像に保存(スクリーンショット)するには、画面上部のカメラマークをクリックすると PNG 形式の画像で保存することができる。
保存時の画像にはブラウザの枠などがなく、ウェブサイトの掲載情報のみが画像化されるので資料に貼り付ける際には余計な情報が入らなくて済む。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント