デザインの画像を用意するのが地味に面倒

皆様、デザインはしますか？

例えば、シンプルなギャラリーページをつくるとしましょう。

こんな感じで。

画像で作ってるときにはこんな風にさくっとやればいいのですが、
実際に HTML で Web サイトのように動くようにしていく中で、ちょっと面倒なのが画像ですね。

今回のようにサイズが一つだけであれば、適当に画像を用意してもいいのですが、
数種類のサイズの画像が必要だったりすると、ちょっと面倒。

そんな、微妙に面倒な部分を誰か解決してくれないかなーと思っていたら、
すごいもので、やっぱりあるんですよね。

それが今回ご紹介する、 Placeholder.com です！

Placeholder.com を使ってみる

では早速つかってみましょう。
とは言っても、とても簡単。

https://via.placeholder.com/200

ここにアクセスするだけ。

正確に言えば、 https://via.placeholder.com/ の後ろに、数字をくっつけると、
そのサイズの画像を生成して返してくれます。

今回の場合は、 200 とつけたので、 一辺 200 ピクセルの画像が生成されました。

あとは、それをコピーや保存して使うなり、
デザイン調整中であれば外部からのアクセスもなく、たいした呼び出し回数にもならないでしょうから、
直接 img タグの src に URL をうめこんでもしまってもいいですね。

また、画像の中にサイズが記載されているのも、
ちょっと使いやすいポイントだったりします。

さらに色々な指定の仕方

もちろん、生成できる画像は正方形だけではありません。

https://via.placeholder.com/600×300

こんな感じで 横x縦 で書けば、長方形だって生成できますし………

https://via.placeholder.com/200?text=this+is+text!

後ろに ?text=(書きたい文字) とすれば、サイズ表示の文字部分を
任意の文字で置き換えることだってできます。

https://via.placeholder.com/200/FFFFFF/000000

サイズの後ろに (背景色)/(文字色) をカラーコードで設定すれば、
色も変えられますよ。

https://via.placeholder.com/200.jpg

通常生成される画像は png 形式ですが、
末尾に拡張子をつけることで、 jpg, png, gif や webp にも対応しています！

知っておくと便利な画像プレースホルダー、是非使ってみて！

こういったサービスは頻繁に使う物ではありませんが、
やはり知っておくといざというときに、面倒なところをさっと解決できていいですね！

皆さんも是非覚えておいて、使ってみてくださいね！