模写コーディングする際の、画像取得について。

Question

模写コーディングする際の、画像取得について。

Aribnbのサイトを模写しようと思って、img素材の取得をしています。
サイトの左上にあるロゴマークの画像が、検証ツールを使っても取得できません。
どのようにすれば取得可能でしょうか？

https://www.airbnb.jp/host/homes

また、画像なのか、cssデザインなのか、検証ツールでその判断は可能でしょうか？
教えてくださると幸いです。よろしくお願いいたします。

Answer 1

また、画像なのか、cssデザインなのか、検証ツールでその判断は可能でしょうか？

検証ツールを使えば、ソースを読んで、色んな所の設定値を確認して、さらにいろいろ書き換えてみたりしたりすることができます。それで、なるほどこうやって画像を出すのかとか理解して初めて模写の成果が出たと言えるわけです。

「可能でしょうか？」ではなく、可能にするのが模写の目的でしょう。その役に立つかという問いなら、当然イエスです。

Comments

[Goethe]

他の素材は取得できるのですが、ロゴマークだけどうしても取得できないので、質問させていただきました。
imgタグの記述はできますが、イメージダウンローダでも認識できない画像を、検証ツールで取得しようとしています。模写自体は3サイトほどしているのですが、今回のサイトだけどうしても取得できません。

[KojiDoi]

検証ツールを使ってソースをたどっていくと、そのロゴマークのイメージがsvg形式で埋め込まれているのが発見できるはずです。

[Goethe]

svgタグで囲ってあることは理解できました。imgだとページにとんで画像が取得できるのですが、svgはどうやって取得すればいいのでしょうか？

[KojiDoi]

取得も何も、そこに書いてあるでしょう。もしかしてSVGが何なのか理解してない？

Answer 2

svgをHTMLにインラインで記述してますので、それをコピーして作成中のHTMLに貼り付けるだけです。

具体的な手順は、ロゴマークを右クリックして[検証]をクリックして、検証ツールで選択されているsvgタグを右クリック→[Copy]→[Copy element]をクリックして、作成中のHTMLのロゴマークを表示したい位置に貼り付けてください。