サイトの画像や動画をダウンロード
サイト作成のお役立ちワザ♬
サイトの画像や動画をダウンロード
【初心者向け】
how to ウェブサイト作成
親切丁寧にナビゲート♪
この章ではサイト作成で使えるプログラミング以外の覚書をまとめます。
今回は
サイトの画像や動画をダウンロード！です。
静止画、ロゴのダウンロード
サイトにはたくさんの写真やロゴ、動画などの画像が使われています。
模写にはこれらの画像が必要になります。
WordPress模写編の題材サイトです。
上のスクリーンショットにも
①会社ロゴ
②トップページ画像（スライドショーで４枚の画像）
③④水玉模様のイラスト
これらをダウンロードしています。
いくつかの方法があるのでご紹介します。
使いやすい方法でやってみてね🐾
検証ツールから画像をコピー
プログラミングやサイト作成の学習で欠かせないのが 検証ツール です。
デベロッパーツールとも言います。
検証ツールについてはこちらの記事が参考になります。
https://saruwakakun.com/html-css/basic/chrome-dev-tool
サルワカ はとてもわかりやすいプログラミング初心者向けサイトです♬
困ったら調べに行く愛用サイトです。
調べたいサイトで右クリックさせて 検証 を選択します。
すると右側の赤枠のような 検証ツール が表示されます。
これがサイトを表示させているhtmlファイルやCSS装飾のコード内容です。
①検証ツールの赤枠の記号をクリックさせて青色にします。
②ダウンロードしたい画像をクリックします。
③検証ツールでグレーに反転する部分が画像の情報部分です。
赤枠の https://corp.freee.co.jp/img/index/img-slide-03.jpg が画像ファイルですね。
上記の src="/img/index/img-slide-03.jpg" 部分で右クリックをして
Open in new tub をクリックします。
ダウンロードしたい画像が別タブで表示されました。
ここで右クリック → 名前を付けて保存 を選択します。
ご自身の任意の場所に画像を保存することができます。
ロゴやイラストなども同じ方法で保存することができます。
これで模写ができるね♬
Google 拡張機能の利用
Google の拡張機能を利用して画像をダウンロードする方法もあります。
Google 拡張機能 画像ダウンロード などで検索してみてください。
いくつもの拡張機能があるので興味があるものを利用してみてください。
サイトの画像を一気にダウンロードできるものなどいろいろあります。
https://bookyakuno.com/batch-download-image/私も I’m a Gentleman や Image Downloader を利用したことがあります。
動画のダウンロード
動画が埋め込まれているサイトもあるかと思います。
こちらの記事を参考にさせていただきました。
https://www.ivyhc.com/?p=29545私がダウンロードしたい動画がYouTubeだったのでこちらのサイトを利用しました。
https://www.thxyoutube.com/watch/このサイトにダウンロードしたい動画のURLを入力すると保存することができます。
アプリなしで動画ダウンロード♬
今回はここまでです。
わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。 コメント欄へ
静止画や動画のダウンロード方法のご案内でした。
おつかれさま！！ 模写の材料がそろったね(^_-)-☆
趣味で源氏物語を【超訳】しています。
話し言葉でお気軽GENJI
よかったら遊びにきてください。
小倉百人一首も【超訳】しています。
話し言葉でお気軽 OGURA
よかったら遊びにきてください。
