簡単にダミー画像やモック画像を作成できるPlacehold.jp

今日は私が常日頃利用させて頂いているPlacehold.jpをご紹介。

Placehold.jp とは

<a href="http://placehold.jp/">Placehold.jp | 簡単！ダミー画像作成</a>

とあるように、非常に簡単にダミー用やモック用の
画像が作成できるサイトとなっています。

使い方(基本)

http://placehold.jp/#basic-tab

※下記の内容は入力フォームに入力することで設定可能です。

http://placehold.jp/{幅}x{高さ}.png 上記形式でそのサイズの画像を作成することができます。

例) <img src="http://placehold.jp/150x50.png">

例の場合このようになります。

使い方(背景や文字の色サイズを変更)

http://placehold.jp/#advanced-tab

※下記の内容は入力フォームに入力することで設定可能です。

http://placehold.jp/{文字色}/150x100.png
http://placehold.jp/{背景色}/{文字色}/150x100.png
http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png
※背景色・文字色はRGBの16進数表記
例) <img src="http://placehold.jp/24/cc9999/993333/150x100.png">

例の場合このようになります。

ファイルフォーマットを変更する
PNGとJPGの2種類が利用可能です。
※JPGにすると透明度情報は失われます。CSSで半透明機能を利用している場合はご注意ください。

テキストを変更する
http://placehold.jp/250x50.png?text={表示したい文字列}
上記形式でテキストを変更することができます。
例) <img src="http://placehold.jp/24/cccccc/ffffff/250x50.png?text=placehold.jp">

例の場合このようになります。

使い方(上級者向け)

http://placehold.jp/#advanced-tab

※利用するには左メニューAdvanced内タブのスタイルシートを利用する、にチェックを入れる。

CSSが利用可能です。
例) http://placehold.jp/250x50.png?&css={JSON化したCSSパラメータ文字列}
利用するには左メニューAdvanced内タブのスタイルシートを利用する、にチェックを入れる。

こちらはサンプルが使い方には書いてなかったので例を記載しておきます。

<img src="http://placehold.jp/3d4070/ffffff/150x150.png?css=%7B%22border-radius%22%3A%2215px%22%2C%22background%22%3A%22%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20from(%23666666)%2C%20to(%23cccccc))%22%7D">

いくつかサンプル的に貼り貼り。

<img src="http://placehold.jp/500x100.png">と
<img src="http://placehold.jp/3d4070/ffffff/150x100.png">

<img src="http://placehold.jp/32/69faa3/ffffff/350x100.png?text=No%20Hack">と
<img src="http://placehold.jp/32/f1f77b/ffffff/300x100.png?text=No%20Life">