サイトの画像や動画をダウンロード

2021-02-02サイト作成お役立ち備忘録,作成,作り方,ホームページ,ウェブサイト作成,webサイト,検証ツール,Google拡張機能,静止画ダウンロード,イラストダウンロード,ロゴダウンロード,動画ダウンロード,初心者向け

サイト作成のお役立ちワザ♬

サイトの画像や動画をダウンロード


【初心者向け】
how to ウェブサイト作成
親切丁寧にナビゲート♪

この章ではサイト作成で使えるプログラミング以外の覚書をまとめます。

今回は

サイトの画像や動画をダウンロード!

です。

静止画、ロゴのダウンロード

サイトにはたくさんの写真やロゴ、動画などの画像が使われています。
模写にはこれらの画像が必要になります。

freee株式会社コーポレートサイト

WordPress模写編の題材サイトです。

上のスクリーンショットにも

①会社ロゴ
②トップページ画像(スライドショーで4枚の画像)
③④水玉模様のイラスト

これらをダウンロードしています。

いくつかの方法があるのでご紹介します。

バディのクリス

使いやすい方法でやってみてね🐾

検証ツールから画像をコピー

プログラミングやサイト作成の学習で欠かせないのが 検証ツール です。

デベロッパーツールとも言います。
検証ツールについてはこちらの記事が参考になります。

snow

サルワカ はとてもわかりやすいプログラミング初心者向けサイトです♬
困ったら調べに行く愛用サイトです。

調べたいサイトで右クリックさせて 検証 を選択します。
すると右側の赤枠のような 検証ツール が表示されます。
これがサイトを表示させているhtmlファイルやCSS装飾のコード内容です。

①検証ツールの赤枠の記号をクリックさせて青色にします。
②ダウンロードしたい画像をクリックします。
③検証ツールでグレーに反転する部分が画像の情報部分です。

赤枠の https://corp.freee.co.jp/img/index/img-slide-03.jpg が画像ファイルですね。

上記の src="/img/index/img-slide-03.jpg" 部分で右クリックをして
Open in new tub をクリックします。

ダウンロードしたい画像が別タブで表示されました。
ここで右クリック → 名前を付けて保存 を選択します。
ご自身の任意の場所に画像を保存することができます。

snow

ロゴやイラストなども同じ方法で保存することができます。

バディのクリス

これで模写ができるね♬

Google 拡張機能の利用

Google の拡張機能を利用して画像をダウンロードする方法もあります。

Google 拡張機能 画像ダウンロード などで検索してみてください。
いくつもの拡張機能があるので興味があるものを利用してみてください。

サイトの画像を一気にダウンロードできるものなどいろいろあります。

snow

私も I’m a Gentleman や Image Downloader を利用したことがあります。

動画のダウンロード

動画が埋め込まれているサイトもあるかと思います。
こちらの記事を参考にさせていただきました。

私がダウンロードしたい動画がYouTubeだったのでこちらのサイトを利用しました。

このサイトにダウンロードしたい動画のURLを入力すると保存することができます。

アプリなしで動画ダウンロード♬

今回はここまでです。

わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。   コメント欄へ

静止画や動画のダウンロード方法のご案内でした。

バディのクリス

おつかれさま!! 模写の材料がそろったね(^_-)-☆

趣味で源氏物語を【超訳】しています。
 話し言葉でお気軽GENJI

 よかったら遊びにきてください。

小倉百人一首も【超訳】しています。
 話し言葉でお気軽 OGURA

 よかったら遊びにきてください。