この記事では、Google Chrome 開発者ツールを使用して特定の Web ページ要素または Web ページ全体のスクリーンショットを撮る方法を紹介します。
目次:
- Google Chrome デベロッパー ツールを開く
- Google Chrome 開発者ツールを使用して Web ページから特定の要素を選択する
- Google Chrome 開発者ツールを使用して Web ページ要素のスクリーンショットを撮る
- Google Chrome 開発者ツールを使用して Web ページ全体のスクリーンショットを撮る
- 結論
- 参考文献
Google Chrome デベロッパー ツールを開く
Google Chrome 開発者ツールを開くには、Google Chrome を実行し、スクリーンショットを撮りたい Web ページにアクセスして、
Google Chrome Developer Tools を開く際にサポートが必要な場合は、次の記事をお読みください。 Google Chrome 開発者ツールを開く方法 .
Google Chrome 開発者ツールを使用して Web ページから特定の要素を選択する
Google Chrome 開発者ツールを使用して Web ページから特定の要素のスクリーンショットを撮りたい場合は、Web ページからスクリーンショットを撮りたい要素を選択できる必要があります。
Google Chrome Developer Tools の「Elements」タブから Web ページから要素を選択できます。
Google Chrome 開発者ツールの「検査」ツールを使用して、Web ページから要素を選択することもできます。
検査ツールを使用するには、
Google Chrome 開発者ツールの左上隅から。
Web ページからスクリーンショットを撮りたい要素を選択します。要素が選択されると、[要素] タブで HTML コード セクションも自動的に選択されます。
Google Chrome 開発者ツールを使用して Web ページ要素のスクリーンショットを撮る
選択した Web ページ要素のスクリーンショットを撮るには、[要素] タブから選択した HTML 親要素を右クリック (RMB) し、[ノードのスクリーンショットをキャプチャ] をクリックします。
選択した Web ページ要素のスクリーンショットを取得し、コンピューターに保存する必要があります。
ご覧のとおり、選択した Web ページ要素のスクリーンショットが正常に取得されています。
Google Chrome Developer Tools を使用して、別の Web ページ要素のスクリーンショットを撮ってみましょう。
LinuxHint 記事の 1 つにある目次を選択し、右クリック (RMB) して、[ノードのスクリーンショットをキャプチャ] をクリックして、最近行ったようにスクリーンショットを撮ります。
スクリーンショットが撮られて保存されるようになりました。
ご覧のとおり、目次のみのスクリーンショットが撮られています。
Google Chrome 開発者ツールを使用して Web ページ全体のスクリーンショットを撮る
ウェブページ全体のスクリーンショットを撮るには、Google Chrome 開発者ツールの [要素] タブに移動します。一番上までスクロールして、html タグを選択します。これにより、Web ページ全体が選択されます。
ここで、html タグを右クリック (RMB) し、「Capture node screenshot」をクリックします。
Web ページ全体のスクリーンショットを撮り、コンピューターに保存する必要があります。
ご覧のとおり、Web ページ全体のスクリーンショットが正常に取得されました。
結論
Google Chrome Developer Tools を開く方法を紹介しました。また、Google Chrome 開発者ツールの検査ツールを使用して特定の Web ページ要素を選択する方法と、Google Chrome 開発者ツールを使用して特定の Web ページ要素と完全な Web ページのスクリーンショットを撮る方法も示しました。