目次

HTML ページの一要素のみキャプチャ

今回の投稿は、ウェブブラウザーの Mozilla Firefox (ファイヤーフォックス)の開発ツールの機能の中の一つの「ノードのスクリーンショットを撮影」について書いていきたいと思います。

「ノードのスクリーンショットを撮影」機能を使用すると、 HTML の一要素のみを部分的に画面キャプチャ出来るようです。

目次まで戻る

準備

まずは、サンプルページとして、以下の HTML ファイルを準備してみました。

サンプルページの URL:

https://pulogu.net/wordpress/wp-content/themes/twentysixteen-bootstrap-v3-child/html/pid4277.html

サンプルページをウェブブラウザーで表示すると、以下の画像のような表示になると思います。

サンプル HTML ファイルのプレビュー
サンプル HTML ファイルのプレビュー

サンプルページの HTML ファイルのソースコードは、以下の内容になっています。 <div> 要素を高さ、幅ともに 600px で表示するように CSS 指定しています。 display プロパティに table-cell キーワードを指定して vertical-align が作用するように設定しています。

今回のテストでは、サンプルページの HTML 内の <div> 要素のスクリーンショットを撮影してみたいと思います。

HTML のソースコード:

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
display:table-cell;
vertical-align:middle;
text-align:center;
width:600px;
height:600px;
background-color:#080808;
color:#9d9d9d;
font-size:7em;
word-wrap : break-word;
word-break : break-all;
}
</style>
</head>
<body>
<div>&lt;div&gt;<br>要素</div> <!--撮影したい div 要素-->
</body>
</html>

目次まで戻る

スクリーンショット撮影

それでは、「ノードのスクリーンショットを撮影」機能を使用して、上記サンプルページの HTML 内の <div> 要素のスクリーンショットを撮ってみたいと思います。

テスト環境は、 Windows10 / Firefox 63.0.3 です。

以下、ステップ 1 - 5 までありますが、良ければご覧ください。

Step.1

まずは、スクリーンショットを撮影するサンプルページを開いてみることにします。

サンプルページ URL:

https://pulogu.net/wordpress/wp-content/themes/twentysixteen-bootstrap-v3-child/html/pid4277.html

以下のような、プレビューになると思います。

サンプルページのプレビュー
サンプルページのプレビュー

Step.2

サンプルページを開いた後に、 Ctrl + Shift + I で「開発ツール」を表示してみます。

※ Firefox > ツール > ウェブ開発 > 開発ツールを表示 からも「開発ツール」を表示可能です。

※ Firefox 右上に表示されている、横棒三本のアイコン(ハンバーガーメニュー) > ウェブ開発 > 開発ツールを表示 からも「開発ツール」を表示可能です。

以下のようなツールが表示されると思います。

Firefox の開発ツール
Firefox の開発ツール

Step.3

  1. 開発ツールの左端にある「ページから要素を選択します」アイコンをクリックしてみます。
  2. <div> 要素を選択してみます。
  3. 選択した要素が、ハイライト表示されると思います。今回は、 <div> ... </div> の部分になります。
div 要素選択中
div 要素選択中

Step.4

  1. 選択中の div 要素上でマウスを右クリックします。
  2. 表示される右クリックメニュー(コンテキストメニュー)の中の「ノードのスクリーンショットを撮影」をクリックしてみます。
ノードのスクリーンショットを撮影
ノードのスクリーンショットを撮影

Step.5

  1. そうすると、カチャッとシャッター音のような音がして、画像がダウンロード?生成?されて、 Firefox のダウンロードフォルダに、画像が保存されると思います。
    私の場合は、 C:\Users\xxx\Downloads に画像が保存されました。 xxx の部分が Windows のユーザーさん毎に違ってくると思います。
  2. PNG 形式の画像が保存されています。ツールチップに「大きさ」の項目がありますが、 600 x 600 ピクセル丁度になっています。

Win10 の画面キャプチャソフト「切り取り領域とスケッチ」を使用して、サンプルページのキャプチャを行うことも出来ると思います。切り取りサイズの指定は、マウスでになりますが、 jpg , gif 形式での保存も可能です。

遅延画面キャプチャもできる Windows10 の「切り取り領域とスケッチ」アプリが便利。 – pulogu.net
https://pulogu.net/blog/020-computer/windows/windows10-crop-area-and-sketch/
画像保存・ダウンロード完了
画像保存・ダウンロード完了

目次まで戻る

参考資料

vertical-align - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

目次まで戻る

あとがき

当ブログは WordPress (ワードプレス)で作成していますが、投稿のアイキャッチ画像を手軽に作成出来ないものかと思い、 HTML と CSS で作成したページをブラウザで表示して、そのスクリーンショットを取ることにしたのですが、 600px ✕ 600px など丁度のサイズでスクリーンショットを取るのが難しく、 Firefox 開発ツールを使用していたところ、「ノードのスクリーンショットを撮影」機能が搭載されていることが分かりました。

ちなみに、本投稿のアイキャッチ画像は、サンプルページを「ノードのスクリーンショットを撮影」で撮影して作成してみました。

以上、閲覧ありがとうございました。

目次まで戻る

[ Amazon.co.jp アソシエイト ] JavaScript 関係の本
https://amzn.to/48EoeGM

コメントを残す

  • わかる範囲でしかお答えできませんが、質問も大歓迎です。
  • * のついた項目は必須になります。
  • お名前が未入力の場合は「匿名」という名前で送信されます。
  • 投稿していただいたコメントは、当ブログ管理者の承認後に表示されます。全体的には、以下の流れになります。
    1. コメントを送信。
    2. このページに自動で戻ってきて何の変化もない状態です。
    3. 都度、管理者承認。
    4. コメントが表示されます。
*
コメント欄では、次の HTML タグと属性を使用することができます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

同じカテゴリの投稿(ブラウザ)

前後の投稿