2014年5月21日

Webページのデザインをしていると、「ここにちょっと画像が欲しいな…」と思うことがよくあります。画像フォルダから適当に引っ張ってくるのもアリですが、手頃な画像をいちいち探すのも面倒です(どうせ後で変えるわけですし)。

何か良いサービスは無いものかと探していたら、やはりありました。ダミー画像を手軽に作成してくれる「Dynamic Dummy Image Generator」です。

使い方

使い方はとても簡単で、imgタグのリンクにURLを書くだけです。

<img src="http://dummyimage.com/300x200/999/fff" alt="">

そうすると、以下のような画像が生成されます。

たったコレだけです。画像は以下の5つのパラメータを変更することができます。

  • 横幅
  • 高さ
  • 背景色
  • 文字色
  • 表示する文字

変更方法ですが、以下のようなルールに合わせてURLを変えることで、好きな画像を取得することができます。いくつか試してみましょう。

<img src="http://dummyimage.com/横幅x高さ/背景色/文字色&text=文字" alt="">

例えば、幅と高さを変えてみます。

<img src="http://dummyimage.com/400x150/999/fff" alt="">

背景色を変えてみます。

<img src="http://dummyimage.com/400x150/f66/fff" alt="">

文字色を変えて見ます。

<img src="http://dummyimage.com/400x150/f66/333" alt="">

表示される文字を変えてみます。

<img src="http://dummyimage.com/400x150/f66/333&text=Hello,World! alt="">

恐ろしく便利ですね!これで画像フォルダを漁る手間が省けます!

まとめ

同じ機能を持ったサービスにplacehold.itというのもあります。使い方はまったく同じなので、気分に合わせてお使いください。

CATEGORIES