Webの勉強中であったり、サンプルサイトを制作する時にダミー画像を使いたいときがあります。
どんな画像でも良いのに、サイズの合う画像がなかなか見つからないことが多々あります。
そんな時によく利用させてもらうサービスがあります。
簡単に言えば、ダミー画像を自動で作成してくれるサービスです。
私がすごく便利だと思っているのは以下の点です。
・画像はURLで指定できるので、ダウンロードする必要が無くURLだけで指定可能
・画像サイズを1px単位で指定できるので、出来上がった画像と差し替えるのが簡単。
・URLの引数で文字サイズや色を変更できるので、とても簡単
実際に試してみたほうが理解が早いと思います！
よく使う5つのパターンをご紹介します。
サンプルも作成しています。
■1. 基本
http://placehold.jp/{幅}x{高さ}.png
|
1 2 |
<p><img src="http://placehold.jp/150x50.png"></p> <p><img src="http://placehold.jp/300x150.png"></p> |
■2. 文字色指定
http://placehold.jp/{文字色}/{幅}x{高さ}.png
|
1 2 |
<p><img src="http://placehold.jp/0000FF/150x50.png"></p> <p><img src="http://placehold.jp/FF0000/150x50.png"></p> |
■3. 背景色・文字色指定
http://placehold.jp/{背景色}/{文字色}/{幅}x{高さ}.png
|
1 2 |
<p><img src="http://placehold.jp/000000/FFFFFF/150x50.png"></p> <p><img src="http://placehold.jp/008888/880088/150x50.png"></p> |
■4. 文字サイズ・背景色・文字色指定
http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/{幅}x{高さ}.png
|
1 2 |
<p><img src="http://placehold.jp/50/000000/FFFFFF/300x200.png"></p> <p><img src="http://placehold.jp/10/008888/880088/300x200.png"></p> |
■5. テキストを変更する
http://placehold.jp/{幅}x{高さ}.png?text={表示したい文字列}
|
1 2 |
<p><img src="http://placehold.jp/800x100.png?text=タイトル"></p> <p><img src="http://placehold.jp/800x100.png?text=好きなテキストが入ります"></p> |
やり方さえ分かれば、どれも簡単にできちゃいますね。
サンプルも作成していますので、良ければ見てくださいね。
