◎ Mac の Safari で、通常のスクリーンショットではできない縦長 web ページ全体を一度で撮る方法

2020年10月28日水曜日

macOS web ツール

Mac のブラウザで、 縦に長い web ページ全体を撮りたいとき、通常のスクリーンショットではスクロール先の画像までは撮れない。スクロールしながら複数枚のスクリーンショットを撮り、Photoshop などを使って繋げることはできるがとても面倒くさい。それを Mac 標準の Safari を使って解決する。

 

縦長 web ページ全体を一度で撮る方法

Safari の web インスペクタには、縦長 web ページ全体を一度に撮る機能が付いているので、それを利用する。

Safari で全体のスクリーンショットを撮るwebページを表示する(サンプルは当サイトのトップ)。


[ option ]+[ command ]+[ I ]キーを同時押し(キーボードショートカット)する。

 

web インスペクタ」が開くので、[要素]タブを選ぶ。「要素」が開いたら、<body>(body要素の開始タグ)を確認する。選択されていなければ、選択する。

<body>が選択された状態で、右クリック(または、[ control ]を押しながら左クリック)し、[スクリーンショットを取り込む]を選ぶ。

保存ダイアログが開くので、保存場所と名称を決めて保存すればでき上がり。

 

保存した縦長スクリーンショット。

 

web インスペクタの別な開き方

キーボードショートカットではなく、 Safari のメニューバー[開発]からも web インスペクタを開くことができる。

 

スクリーンショットを撮るwebページを表示した後、メニューバーの[開発]をプルダウンし、[ webインスペクタを表示]を選ぶ。すでに表示している場合は、同じ場所が[ webインスペクタを閉じる]に変わる。

 

なお、Safari のメニューバーに[開発]が無い場合、メニューバーの[ Safari ]から[環境設定]を選び、次に[詳細]を選んで最下段の[メニューバーに"開発"メニューを表示]にチェックを入れる。