PCのブラウザで要素を画像化する方法を記載します。Chromeでの方法を記載しますが、ほかのブラウザでもほとんど同じです。
手順
1. F12を押す、またはメニュー>その他のツール>デベロッパーツールを選択して、デベロッパーツールを開く。
またはCtrl+Shift+Cを押下する(この場合は手順2をスキップできる)。
![](https://tetorachaos.com/wp-content/uploads/2023/10/dev-image5-1-1024x670.png)
2. 要素(Element)タブを開き、左上の点線の四角と矢印のマークをクリックする。
![](https://tetorachaos.com/wp-content/uploads/2023/10/dev-image1-1024x620.png)
3. マウスカーソルを画像化したい要素に合わせる。
![](https://tetorachaos.com/wp-content/uploads/2023/10/dev-image2-1024x620.png)
4. 要素タブで対応する要素が選択されているので、右クリックして「ノードのスクリーンショットをキャプチャ」(Capture node screenshot)を選択する。
![](https://tetorachaos.com/wp-content/uploads/2023/10/dev-image3-1024x620.png)
以下の画像が保存できる。
![](https://tetorachaos.com/wp-content/uploads/2023/10/dev-image1-1.png)
5. ほしい画像と範囲が異なっている場合は、要素タブで上下キーを押下して要素を変え、4の手順を再実施する。
![](https://tetorachaos.com/wp-content/uploads/2023/10/dev-image4-1024x620.png)
コメント