読者です 読者をやめる 読者になる 読者になる

No Hack No Life

ライフハック情報をはじめとして、どこかでだれかのタメになる情報を発信していきたいと思っています。

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

このエントリーをはてなブックマークに追加

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

Placehold.jp とは

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

使い方(基本)

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">

余談

何を隠そう、このブログのタイトル画像は
このplacehold.jpで作って保存した画像なのです!

最後に

バリバリに画像を使いたい場合は
placehold.jpに多大な負荷が掛かってしまうのでローカルに保存して使いましょうね!

広告を非表示にする