簡単！Macでデベロッパーツールを使って全画面スクリーンショットを撮る方法【5分で解決】

ウェブページの全体をスクショしたいけど、どうやるんだろう？」そんな疑問を持ったことはありませんか？

特にMacユーザーにとって、スクリーンショット機能は便利ですが、ページ全体を撮影するとなると、ちょっと手間がかかりますよね。

でも大丈夫！今回はMacのデベロッパーツールを使って、誰でも簡単にウェブページ全体のスクリーンショットを撮る方法をお教えします。

たった５分！全画面スクリーンショット手順

手順は以下の４つです。

• デベロッパーツールの起動
• 『︙』縦三点リーダーを押して「コマンドを実行」
• 「スクリーンショット」と入力
• 「フルサイズのフルスクリーンチャプタ」を左クリック

慣れてしまえば１分もかからずスクリーンショットができるようになるでしょう！

早速画像を使って紹介します。

手順１：デベロッパーツール（検証モード）の起動方法

スクリーンショットと取りたいページを開き、「左クリック」を押します。

次に「検証」をクリックします。

手順２：『︙』縦三点リーダーを押して「コマンドを実行」

『︙』縦三点リーダーをクリックします。

次に「コマンドを実行」をクリックします。

手順３，４：画面全体をスクリーンショット

入力欄に「スクリーンショット」と入力します。

最後に「フルサイズのフルスクリーンチャプタ」をクリックします。

すると、自動で画像が保存されるのでこれで完了です。

【小ネタ】PCが初期の状態だと、スクリーンショットを保存するとデスクトップに保存されるので、スクリーンショット専用のフォルダーを作って、そのフォルダーに保存していくと画面が整理されるのでおすすめです。

【まとめ】ホームページのスクリーンショットでもう迷わない！

いかがだったっでしょうか？「デベロッパーツールなんて使ったことなかったよ」といった方もいるかも知れませんが、これを知っていると表示された画面を１枚ずつスクリーンショットをする手間が省けます。

この方法を使えば、手軽にウェブデザインやデバッグ作業を効率よく進めることができますので是非覚えておいてくださいね。