「placehold.it」でダミー画像を作成するとテストアップ時などに便利

ホームページ制作においてダミー画像などを作成する場合がありますが、「placehold.it」を利用すると便利です。
Placehold.it – Quick and simple image placeholders

バナーなどがまだ確定していない状態でホームページをテストアップする場合に、PhotoshopやFireworksなどグラフィックソフトでダミー画像を作成することがあります。
ダミー画像が多い、サイズが様々、変更が多い時などは、その作業がめんどくさいです。

そんな時に「placehold.it」を利用すれば、コードを書くだけでダミー画像が生成できるので便利です。

任意のサイズで画像を生成してみる

例えば、200×100ピクセルの画像を生成する場合は。

<img src="http://placehold.it/200x100" />

そうすると以下のように表示されます。

テキストを追加してみる

「&text=sample」などのようにすればテキストを追加することもできます。

<img src="http://placehold.it/200x100&text=sample" />

カラーを変更してみる

さらに以下のようにすると、背景色、文字色を変更することができます。

<img src="http://placehold.it/200x100/0f0/f00&text=sample" />

画像フォーマットを指定する

以下のようにして、gif、jpg、pngフォーマットを指定することもできます。

<img src="http://placehold.it/200x100.gif/0f0/f00&text=sample" />

オフラインで利用するには

上記は「src=”http://placehold.it/…」というように外部サーバに参照先にしているので、オンラインでなければ画像は表示されません。
但し、画像URLを直接ブラウザで開くと、生成した画像を保存することもできるので、それらをオフラインで利用するのもいいかもしれません。