【画像準備とさよなら】Lorem Picsumの使い方【便利サービス】

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

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

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

Lorem Picsumってなに？

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

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

Lorem Picsumの使い方

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

1：長方形の画像挿入

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

See the Pen
mdJYzKG by notebook (@orange-notebook)
on CodePen.

2：正方形の画像挿入

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

See the Pen
oNXRQGJ by notebook (@orange-notebook)
on CodePen.

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

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

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

See the Pen
bGdyQLp by notebook (@orange-notebook)
on CodePen.

4：モノクロ画像の挿入

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

See the Pen
OJVYaEy by notebook (@orange-notebook)
on CodePen.

5：ぼかした画像の挿入

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

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

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

See the Pen
XWbwyPq by notebook (@orange-notebook)
on CodePen

おわりに

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

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