Web制作やデバッグ、デザイン確認の際に「ページ全体のスクリーンショットを取得したい！」と思ったことはありませんか？
MacのSafariにもWebページをPDFとして保存する機能がありますが、できれば画像データとして保存したいという気持ちもあります。
そこで、Safariだけでページ全体のスクリーンショットを取得する方法を解説します。
【準備】Safariの開発者ツールを有効化する
※既に有効化されている方は次の項目にお進みください。
まず、Safariで開発者ツールを使うには、事前に設定で有効化しておく必要があります。
- Safariを開きます。
- メニューバーから「Safari」→「設定」（または「環境設定」）を選択。
- 上部のタブから「詳細」をクリック。
- 一番下にある「Webデベロッパ用の機能を表示」にチェックを入れます。
これでメニューバーに「開発」メニューが表示され、開発者ツールが使えるようになります。
ページ全体のスクリーンショットを取得する方法
次に、実際にページ全体のスクリーンショットを撮影します。
- スクリーンショットを取得したいページをSafariで開きます。
Option + Command + Iで開発者ツールを開きます。- <html>タグで右クリックし、「スクリーンショットを取り込む」をクリック。
- Finderの画面が開き、任意のフォルダに保存する。
※SafariのバージョンやmacOSのバージョンによって、表示が若干異なる場合があります。
ページ全体のスクリーンショットの活用例
実際の活用シーンとして、以下のような用途があります。
ページ全体のスクリーンショットは、Web制作者にとって非常に強力な武器になります。
特にSafariユーザーはぜひ使いこなしましょう。
まとめ
今回はSafariの開発者ツールを使ったページ全体のスクリーンショットについて解説しました。
ぜひ実際に試してみて、制作や検証に役立ててください！
コメント