LoginSignup
0
1

More than 5 years have passed since last update.

モバイルサイト全体のスクリーンショットを撮る一番楽な方法(たぶん)

Posted at

モバイルサイトの全体のスクショを撮りたい!

業務を行う中でサイト全体のスクショが欲しいという機会がたまにですがあります。
ただ全体的に縦に長いサイトの場合切れてしまい、全体のスクショが取れず、何回もキャプチャしてつなげるといったいやな作業が発生していました。

news.google.co.jp-(Nexus 6P).png
(↑一部しか取れない)

救世主はFirefox Developer Edition

そんな私の前に颯爽と現れたのはドラえもんと似たような色のFirefox Developer Editionです!

firefox.png

1.インストールして起動してみましょう。

firefox1.png

2.「開発ツールを表示」をクリックして開発ツールをクリックします。

firefox2.jpg

3.適当なサイトを開きます。

firefox4.png

4.レスポンシブルモードにします。

firefox5.jpg

5.リストを編集をクリックします。

firefox6.jpg

6.縦を9000というような大きい値にしたサイズにし、UAをモバイル用のものにしておきます。

firefox7.jpg

例えばiPhoneのUAだと↓になります。

Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A344 Safari/601.1

7.カスタム端末を選択します。

firefox8.png

8.カメラアイコンをクリックし、スクショをとります。

firefox9.jpg

9.こんな感じで撮れます。

下の方は余白ができてしまいますが、もうそこは切り取るしかないかなと思います。

スクリーンショット 2017-05-19 21.44.11.png

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1