模写コーディングを始めようと思ったけど、画像はどこから入手するの?
本記事ではそのお悩みを解決していきます!
今回はgoogole chromeを使った方法で行っています。
手順1 Image Downloaderのダウンロード
まず、Googole Chromeで以下のリンクを開いてください。
すると以下のようなサイトに出るので、『Chromeに追加』を押しましょう。

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

では、次は模写するサイトに飛びましょう。
今回は模写されることの多いiSaraをモデルにしていきます。
皆さんは、模写したいサイトに飛んでください。


では、模写サイトに飛んだら
- 右上のimage downloaderのアイコンをクリックしましょう。
- すると、上記のような画面が出てくるので、select allをクリック。
- そして、右上部のdown loadをクリック。

3を行うと上記のような画面が出ますが、こちらはyesで大丈夫です。
すると、ファイルのダウンロードに画像が保存されています。
以上で、終わり!と言いたいのですが、
こちらでは、background-imageで使われている画像はダウンロードできていないので、残りは次のパートです。
手順2 デベロッパーツールでダウンロード
まずは、模写サイトのページを開いているときにデベロッパーツールを開きます。
デベロッパーツールはmacの場合 optionキー+commandキー+iで開けます。
windowsの場合はF12で開けます。
すると以下のような画面になります。

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

上記はデベロッパーツール部分を拡大したものです。
- まず、右上部の>>をクリック。
- すると、リストが出てくるのでApplicationをクリック。

すると上記のような画面に変わります。
- 一番に下にあるFramesのtopをクリック。
- そして、その中のimagesをクリック
すると、画像のファイルが出てきます。画面で言うと緑のファイルです。
こちらが画像になります。
その中から、作業1でダウンロードできなかった画像を一つずつ保存していきましょう。
作業1でダウンロードした画像も入っているので、選別して保存していってください。ここの作業は少し、面倒かもしれませんが頑張りましょう!
最後に
以上で全ての画像が入手できますので、皆さん模写コーディング 頑張ってください!
では!
コメント
[…] 模写コーディング 画像の入手方法模写コーディング に必要な画像の入手方法をまとめました!tsubasa11.com2020.05.13 […]