模写コーディング 　画像の入手方法

模写コーディングを始めようと思ったけど、画像はどこから入手するの？

本記事ではそのお悩みを解決していきます！

今回はgoogole chromeを使った方法で行っています。

手順１　Image Downloaderのダウンロード

まず、Googole Chromeで以下のリンクを開いてください。

Image Downloader

Browse and download images on a web page.

chrome.google.com

すると以下のようなサイトに出るので、『Chromeに追加』を押しましょう。

すると画面右上にimage downloaderのマークが出てきます。これでダウンロードされたことになります。

では、次は模写するサイトに飛びましょう。

今回は模写されることの多いiSaraをモデルにしていきます。

皆さんは、模写したいサイトに飛んでください。

iSara[イサラ]｜バンコクのノマドエンジニア育成講座

iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。

isara.life

では、模写サイトに飛んだら

1. 右上のimage downloaderのアイコンをクリックしましょう。
2. すると、上記のような画面が出てくるので、select allをクリック。
3. そして、右上部のdown loadをクリック。

３を行うと上記のような画面が出ますが、こちらはyesで大丈夫です。

すると、ファイルのダウンロードに画像が保存されています。

以上で、終わり！と言いたいのですが、

こちらでは、background-imageで使われている画像はダウンロードできていないので、残りは次のパートです。

手順２　デベロッパーツールでダウンロード

まずは、模写サイトのページを開いているときにデベロッパーツールを開きます。

デベロッパーツールはmacの場合　optionキー+commandキー+iで開けます。

windowsの場合はF12で開けます。

すると以下のような画面になります。

このデベロッパーツールから画像を取得していきます。

上記はデベロッパーツール部分を拡大したものです。

1. まず、右上部の>>をクリック。
2. すると、リストが出てくるのでApplicationをクリック。

すると上記のような画面に変わります。

1. 一番に下にあるFramesのtopをクリック。
2. そして、その中のimagesをクリック

すると、画像のファイルが出てきます。画面で言うと緑のファイルです。

こちらが画像になります。

その中から、作業１でダウンロードできなかった画像を一つずつ保存していきましょう。

作業１でダウンロードした画像も入っているので、選別して保存していってください。ここの作業は少し、面倒かもしれませんが頑張りましょう！

最後に

以上で全ての画像が入手できますので、皆さん模写コーディング 頑張ってください！

では！