• HOME
  • 簡単に指定サイズのダミー画像を挿入出来る「Placeholder.com」の使い方

簡単に指定サイズのダミー画像を挿入出来る「Placeholder.com」の使い方

  • 2019年3月27日
  • Web制作

今回は簡単に使えるダミー画像のご紹介です。
WEB制作会社で7年半働いてましたが、よく利用していた、地味に使えるツールです。
というのも、画像編集ソフトや、何かをダウンロードする必要もなく、ただ、

<img src="https://via.placeholder.com/350x150">

と書くだけでオッケー。
これで350×150ピクセルの画像を挿入することが出来ます。実際挿入してみると、こんな感じ

WEB制作の現場では、

・デザインほぼオッケーだけど写真は選定中
・イメージ画像でデザイン作成してて、システム組み込み後に正式な画像を投稿していく

なんて場合がありました。
そういう場合、デザインデータから画像をいちいち書き出しても、作業が無駄になっちゃうので、こういったツールを使うと時間も手間も省けます。

サイズや色、表示される文字も設定できるので、使い方を紹介していきます。

サイズの変更

サイズは、末尾の数字を変更することで、任意のサイズを指定できます。

<img src="https://via.placeholder.com/500x250">

とすれば、横500pピクセル、縦250ピクセルの画像になります。

<img src="https://via.placeholder.com/250x500">

とすれば、横250ピクセル、縦500ピクセルの画像になります。

色の変更

画像の色とテキストの色も任意に変更可能です。

<img src="https://via.placeholder.com/350x150/0000cc/f0f0f0">

とすると、画像の色が「#0000cc」、テキストの色が「#f0f0f0」に指定されます。

任意のテキストを表示する

画像にはサイズが表示されていますが、任意のテキストを表示させることも出来ます。

末尾に「?text=」を追加し、続けて表示したい文字を入れるだけ。

<img src="https://via.placeholder.com/350x150/0000cc/f0f0f0/?text=dummy+image">

とすると、

スペースを入れたい場合は「+」でつなぎます。

残念ながら日本語は表示できません。

画像フォーマット形式の指定

画像フォーマットも指定することが出来ます。
デフォルトではgifになっており、対応しているのは

・gif
・jpg
・jpeg
・png

の4種類。

<img src="https://via.placeholder.com/350x150.jpg/0000cc/f0f0f0">
<img src="https://via.placeholder.com/350x150/0000cc.jpg/f0f0f0">
<img src="https://via.placeholder.com/350x150/0000cc/f0f0f0.jpg">

このように、オプションの合間のどこかに入れて使うことが出来ます。

何かの都合で、フォーマット形式を明示しておきたいときにも使えます。

背景画像に使う

CSSを使って背景画像にも指定できます。

div {
	background:url(https://via.placeholder.com/350x150) center no-repeat;
	background-size:cover;
}

などとしてやると、div要素に背景画像として表示させることが出来ます。

ちなみに本家のサイトはこちら

Placeholder.com: Placeholder Images Done For You [JPG, GIF & PNG]
https://placeholder.com/#How_To_Set_Image_Size

ダミー画像で時間を浪費している方は、ぜひ使ってみてください。

関連記事