ダミー画像を生成する方法

• Placehold.jpを使ってダミー画像を生成する方法
  • ダミー画像生成サービス
  • 使用方法
    • 基本の書き方と使用例
    • テキストの変更
    • 色の変更
    • 画像種別の変更
  • まとめ

Placehold.jpを使ってダミー画像を生成する方法

htmlでモックページを作成中にとりあえずの画像を入れたい時に、ダミーの画像を作りたい時があると思います。
そんな時の為に、下記に紹介するダミー画像生成のサービスがとても便利です。

ダミー画像生成サービス

ダミー画像生成のサービスの有名どころとして、以下の２つがあります。

• Placehold.jp
• Placehold.it

ほぼほぼ、同じ昨日を提供してくれていて、大きな違いは日本語か英語かの違いぐらいです。
多少なりと使い方に違いはあるものの、日本人なので、Placehold.jpを使っています。
今回の説明も、Placehold.jpを対象としています。

使用方法

サイトにも書いてあるので、簡単な説明にとどめます。

基本の書き方と使用例

書き方

http://placehold.jp/幅x高さ.png

例

http://placehold.jp/400x300.png

とすると。以下のように400x300pxのダミー画像を作ってくれます。

後は、そのまま

imgタグに埋込んでしまっても大丈夫です。

 <img src="http://placehold.jp/400x300.png", alt='dumy'>

テキストの変更

画像に表示される文字を変更したい場合は、
textパラメータを使用します。

書き方

http://placehold.jp/幅x高さ.png?text=テキスト

例

http://placehold.jp/400x300.png?text=dumy+400x300

とすると。以下のようになります。

色の変更

色の変更の変更は、パスを区切る事で変更できます。
パスの指定方法は以下の通りです。

書き方

http://placehold.jp/背景色/文字色/400x300.png
http://placehold.jp/文字色/400x300.png

例

http://placehold.jp/ff00ff/00ff00/400x300.png
http://placehold.jp/ff0000/400x300.png

それぞれ以下のようになります。

画像種別の変更

上記のサンプルでは、すべてpng を指定していますが、
画像種類は、以下の指定が可能です。

• png
• jpg

書き方

http://placehold.jp/400x300.拡張子

例

http://placehold.jp/400x300.png
http://placehold.jp/400x300.jpg

とすると。以下のようになります。
違いは感じずらいと思いますが。

png

jpg

まとめ

あとは、上記の使い方の組み合わせになります。
サイト作成時にバナー画像等がもらえない時などにとりあえず入れておく時に最高に便利です。