Lorem Picsum【画像選びにお困りの方は必見！】

CODE
2019.10.29

こんにちは、TSUNEです。最近、サイト制作をしてます

ホームページやポートフォリオの制作に便利なサイトがあるので、ここで紹介します

「Lorem Picsum」というサイトです。

Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos

こんな人におすすめ

  • サイトに載せる画像がまだ決まってない
  • 画像がないとサイトの全体のイメージが掴めない
  • なんかカッコいい画像を探している

Lorem Picsumの使い方

まずは、Lorem Picsumのサイトにいきます

https://picsum.photos/

使い方はいたってシンプルです。URLをimgタグやCSSに記述するだけで画像が挿入され、表示されます　上の画像の赤く囲った青いURLです

使い方はこんな感じです

<img class="top" src="https://picsum.photos/200/300">
<style>
.top-image{
  background-image: url("https://picsum.photos/1000/1000");
　}
</style>

ページを更新する度に画像が変わるので、見ているだけでも楽しいです。

他にもさまざまな機能がありますのでご紹介します。

他の機能

idでお気に入りの画像を直接選ぶ

https://picsum.photos/id/234/1300/1400

idによって画像を指定できます。毎回同じ画像が表示されます。

モノクロの画像

https://picsum.photos/id/234/1300/1400?grayscale

URLの後ろに?grayscaleをつけることによって、モノクロの画像になります。

ぼやけた画像

https://picsum.photos/1300/1400?blur
https://picsum.photos/1300/1400?blur=5
https://picsum.photos/1300/1400?blur=10

URLの後ろに?blurをつけることによって、ぼやけた画像の指定になります。強度は1〜10まで指定できます。

Lorem Picsumの使い方：まとめ

ホームページやサイト制作に役立つツールの紹介をいたしました。他にも機能があるので、興味がある方は是非使ってみてください。

終わりです。

コメント