RalaCode

44件の記事があります

【画像のダウンロード不要】Unsplash Sourceの使い方

【画像のダウンロード不要】Unsplash Sourceの使い方
サムライエンジニアプラス

HTML、CSSの学習をしていると、<img />で画像を表示する場面があるかと思います。
でも、慣れてくるとこう思うはずです。

「画像は何でもいいのに、いちいちダウンロードとかして用意するの面倒...」

そこで便利なのが、「Unsplash Source」というシステムです。
この記事では、「Unsplash Source」の使い方を解説します。

Unsplashとは

Unsplash」というサイトがあります。
Unsplashでは、無料の画像素材がダウンロードできます。
種類も多すぎて果てしないくらいです。

Unsplashで、画像をダウンロードする方法を別記事にて解説しております。
まだ、Unsplashを利用したことない方は、参考にしてみてください。

【無料】Unsplashで画像をダウンロードする方法解説
【無料】Unsplashで画像をダウンロードする方法解説
記事を読む

Unsplash Sourceとは

Unsplash Source」は、画像をダウンロードすることなく、URLのみでHTMLに画像を埋め込むことができるシステムです。

まずは、ダウンロードした画像を使う場合です。

例えば、「mountain.jpg」という名前の画像をダウンロードしたとします。
HTMLで「mountain.jpg」を表示させることを考えます。

test html

プロジェクトの中には、「index.html」と「images」というフォルダがあるとします。
この場合、「index.html」の中で「mountain.jpg」を表示させるためには、以下のコードを書くことになると思います。

<img src="images/mountain.jpg" alt="" />

これが、通常の場合です。

Unsplashで画像を選ぶ

では、Unsplash Sourceを使ってみます。
以下のリンクから、Unsplashのサイトを開いてください。

>> Unsplashのサイトへ

キーワードを「mountain」で検索します。
検索結果から、お気に入りの画像を選びます。

select photo of mountain

今回は、こちらの画像を選びました。
画像を選んだら、そのページのURLをコピーしてください。

HTMLで使う

今回、例として使う画像のURLは以下です。

https://unsplash.com/photos/phIFdC6lA4E

HTMLで使う場合は以下のように書きます。

<img src="https://source.unsplash.com/phIFdC6lA4E" alt="" />

「src=""」の中身の書き方には注意してください。
画像のURLから「photos/」の文字を削除しています。
さらに、「https://」の後に「source.」という文字を追加します。

これで、画像をダウンロードすることなくHTMLで画像を表示させることができます。

記事は以上です。

【無料】Unsplashで画像をダウンロードする方法解説
【無料】Unsplashで画像をダウンロードする方法解説
記事を読む
【無料です】作ったWebサイトを簡単に公開する方法
【無料です】作ったWebサイトを簡単に公開する方法
記事を読む
【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る
【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る
記事を読む

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【自動整形】VSCodeでPrettierを使う方法【設定必要です】

【自動整形】VSCodeでPrettierを使う方法【設定必要です】

Netlifyのアカウントを作成する

Netlifyのアカウントを作成する

【無料です】作ったWebサイトを簡単に公開する方法

【無料です】作ったWebサイトを簡単に公開する方法

【周回はダメです】Progateの次は何をすればいいの?

【周回はダメです】Progateの次は何をすればいいの?

【初心者向け】Visual Studio Codeの使い方【図解あり】

【初心者向け】Visual Studio Codeの使い方【図解あり】

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy