Webサイトを構築していく上で、画像などの素材が全て揃っていれば問題ないのですが、お客様によっては写真素材の提供が遅れてしまうこともあります。
そんなときはグレーの枠を入れておくなど、コーダーとしては色々とやりようがあるのですが、なんとなくそれだけでは味気ない。。。
そこで今回は、サイトの中にカンタンにダミー画像を表示できるサービスをご紹介します。
Lorem Picsum
こちらは、ダミー画像提供サービスの中でも、有名な方ではないでしょうか。
画像のURLに横幅、高さを指定するだけで、ダミー画像を参照できるようになります。
<img src="https://picsum.photos/200/300"> <!-- 横幅200px 高さ300pxの画像が表示されます。 -->
See the Pen
mdJWmwz by TAKASHI (@takashi1107)
on CodePen.
このように、picsum.photos/ の後ろに「横幅」「高さ」の順に指定するとそのサイズの画像が表示されるようになります。
どんな画像が表示されるかはランダムとなっていますが、指定することも出来ます。
<img src="https://picsum.photos/id/237/200/300"> <!-- id237の横幅200px 高さ300pxの画像が表示される -->
See the Pen
KKpWmvp by TAKASHI (@takashi1107)
on CodePen.
このようにid/XXX と指定すると、その指定したidの画像が指定したサイズで表示されます。
idと画像の対応は、下記のページから確認することが出来ます。
https://picsum.photos/images
Placehold.it
こちらもダミー画像提供サービスですが、先程のLorem Picsumと異なるのは、写真ではなく、色付きの枠で表示されるというところです。
<img src="http://placehold.it/200"> <!-- 横幅200px 高さ200pxのグレーのダミー画像が表示される -->
See the Pen
XWbMRaM by TAKASHI (@takashi1107)
on CodePen.
このように、写真ではなくグレーのいかにもダミーという画像が表示されます。
パっと見でダミー画像と分かるので、公開時にチェック漏れがなくて済みそうです。
また、背景色はグレーだけではなく、自分の好きな色を指定することも出来ます。
<img src="http://placehold.it/200x300/00ff00/fff"> <!-- 横幅200px 高さ300px 背景色#00ff00 文字色#fffのダミー画像が表示される -->
See the Pen
qBdrmXp by TAKASHI (@takashi1107)
on CodePen.
このように、自分の指定した色でダミー画像が表示されます。
まとめ
今回は、Webサイト構築に欠かせない画像、その中でもダミー画像をカンタンに表示できるサービスをご紹介しました。
本番用の画像が来るまでのつなぎの画像として使用するのもよし、お客様への確認用に入れておくもよし、色々な使い方ができるかと思いますので、ぜひ一度使ってみてください。
