「Placeholder.com」でダミー画像を瞬時に用意しよう

Placeholder.com

Placeholder.comとは

瞬時にシンプルなダミー画像を用意することができるwebサービスとなっています。また、手元に画像を用意しなくても使用することができるのが大きな特徴となっております。

使い方

使い方は至って簡単
普段の画像挿入と同じように<img src="◯◯◯">のURL部分にテンプレートに沿った任意のURLを入れてあげるだけで使うことができます。

1. サイズの指定

Template

<img src="https://via.placeholder.com/[width]x[height]">

Sample

<img src="https://via.placeholder.com/500x200">

こちらが一番の基本的な使い方になります。
URLの[width]と[height]に任意の数字を入れることによってそのサイズの画像を挿入することができます。

2. サイズの指定 (正方形)

Template

<img src="https://via.placeholder.com/[width]"> 

Sample

<img src="https://via.placeholder.com/300"> 

画像のwidthとheightとが同じ値を取るような正方形の画像を挿入する場合は[width]値のみの記入で省略をすることができます。

3. 色の指定

Template

<img src="https://via.placeholder.com/300/[背景色]/[文字色]">

sample

<img src="https://via.placeholder.com/300/79b74a/fff">

16進数表記のカラーコードを挿入することで背景色及び文字色の変更をすることも可能です。
表記方法は前が背景色、後ろが文字色となっています。

4. テキストの指定

Template

<img src="https://via.placeholder.com/500/?text=[テキスト]">

sample

<img src="https://via.placeholder.com/300/?text=text">

デフォルトでは画像サイズの表記のみですが任意のテキストへ変更することもできます。

5. フォーマットの変更

Template

<img src="https://via.placeholder.com/300.[拡張子]">

sample

<img src="https://via.placeholder.com/300.jpg">

デフォルトの拡張子はpngですがjpegに変更することも可能です。
サイズや色の指定はスラッシュで区切りますが拡張子の前はドットを入れて区切ります。

6. 全部のせ

Template

<img src="https://via.placeholder.com/[width]x[height]/[背景色]/[文字色].[拡張子]/?text=[テキスト]">

Sample

<img src="https://via.placeholder.com/500x200/79b74a/fff.jpg/?text=Qiita">

1~5までを全て合わせると上記のようになります。

おわりに

如何でしたでしょうか。このようにしてURLの一部を変更するだけで任意の画像を挿入することができます。画像を挿入する時間がないけどレイアウトを確認したい場合や必要な画像が手元にないときにもとても有用なサービスとなっていて、私自身も実際の開発でとてもお世話になっています。
この記事が、そして「Placeholder.com」がみなさまのコーディングに少しでもお役立ちになれたら思います。

リンク

placeholder.com
英語ですがplaceholder.comの使い方が記載されています。