Lorem Picsumの使い方【便利サービス】

https://orange-log.com/lorem-picsum

練習でサイトや部分的なパーツを作ったり、
チュートリアルにそってコーディングしたりするとき、
画像の準備がすこし面倒だなと感じてしまうことってありませんか？

練習で画像そのものにこだわりがないときなんか特に。。

そんなとき力強い味方になってくれる
「Lorem Picsum」という便利なサービスを紹介したいと思います。CLOSE

クリックできる目次

• Lorem Picsumってなに？
• Lorem Picsumの使い方
  • 1：長方形の画像挿入
  • 2：正方形の画像挿入
  • 3：指定した画像の挿入(id)
  • 4：モノクロ画像の挿入
  • 5：ぼかした画像の挿入
• おわりに

スポンサーリンク

Lorem Picsumってなに？

URLと画像の大きさを指定するだけでランダムに画像を出してくれるサービス。

特定の画像を指定していない限り
ページをリロードするたびに画像も変わるのでみているのも楽しいです。

Lorem Picsum：https://picsum.photos/

Lorem Picsumの使い方

公式ページのままではありますが、使い方をまとめてみます。

1：長方形の画像挿入

長方形の画像を挿入する方法です。
画像の幅と高さを指定することでサイズを調整することができます。

書きかた：https://picsum.photos/幅/高さ

具体例：https://picsum.photos/300/200
→幅300px、高さ200pxの画像が挿入されます。

https://codepen.io/orange-notebook/embed/mdJYzKG?height=265&theme-id=dark&default-tab=css%2Cresult&user=orange-notebook&slug-hash=mdJYzKG&pen-title=mdJYzKG&name=cp_embed_1

2：正方形の画像挿入

正方形の画像を挿入する方法です。
正方形のため、1辺の長さを指定するだけで、大きさの調整ができます。

書きかた：https://picsum.photos/辺の長さ

具体例：https://picsum.photos/200
→200pxの正方形の画像が挿入されます。

https://codepen.io/orange-notebook/embed/oNXRQGJ?height=265&theme-id=dark&default-tab=css%2Cresult&user=orange-notebook&slug-hash=oNXRQGJ&pen-title=oNXRQGJ&name=cp_embed_2

3：指定した画像の挿入(id)

Lorem Picsumの画像のIDを指定することで、指定した画像を挿入できます。
1の長方形のときと同様に、幅と高さを指定できます。

書きかた：https://picsum.photos/id/id名/幅/高さ

idに紐づいた画像のリストはこちらから。

具体例：https://picsum.photos/id/1/300/200
→idが1の画像が幅300px、高さ200pxで挿入されます。

https://codepen.io/orange-notebook/embed/bGdyQLp?height=265&theme-id=dark&default-tab=css%2Cresult&user=orange-notebook&slug-hash=bGdyQLp&pen-title=bGdyQLp&name=cp_embed_3

4：モノクロ画像の挿入

画像をモノクロにすることもできます。
モノクロの場合は、幅と高さを指定したあとに「?grayscale」を追加します。

書きかた：https://picsum.photos/幅/高さ?grayscale

具体例：https://picsum.photos/300/200?grayscale
→幅300px、高さ200pxのモノクロ画像が挿入されます。

https://codepen.io/orange-notebook/embed/OJVYaEy?height=265&theme-id=dark&default-tab=css%2Cresult&user=orange-notebook&slug-hash=OJVYaEy&pen-title=OJVYaEy&name=cp_embed_4

5：ぼかした画像の挿入

ぼかした画像を挿入することもできます。
方法の書きかたは下記の2パターンあります。

2つ目の書き方では、ぼかし具合を調整することもできます。

書き方：

1. https://picsum.photos/幅/高さ/?blur
2. https://picsum.photos/幅/高さ/?blur=数字(1~10)

そのため、ただぼかした写真を使いたいときは1つ目の書き方、
ぼかし具合を自分で調整したいときは2つ目の書き方で対応するのがよいかなと思います。

具体例：https://picsum.photos/300/200/?blur
→幅300px、高さ200pxのぼかした画像が挿入されます。

https://codepen.io/orange-notebook/embed/XWbwyPq?height=265&theme-id=dark&default-tab=css%2Cresult&user=orange-notebook&slug-hash=XWbwyPq&pen-title=XWbwyPq&name=cp_embed_5

おわりに

いかがでしょうか。
すぐに画像を埋めることができるのでとても便利なサービスですよね。
気になった方はぜひ使ってみてください。

以上、Lorem Picsumの使いかたでした。