ライブラリいらずでプレースホルダー画像を表示するWebサービス「PLACEHOLDER.COM」



 Webページに指定したサイズのプレースホルダー画像を表示できるWebサービス「PLACEHOLDER.COM」の紹介です。

 Webページを作っていると、レイアウト調整の為に 指定したサイズの要素や画像が欲しい場面があります。用途は様々ですが、ロゴ画像や作成予定のウェジェット、その他は Googleアドセンスなどの広告設置用のスペースが多いのではないでしょうか。

レイアウト途中の一例

 divタグを作成して、style要素でサイズや色を指定する方法もありますが、もう少し手軽に スペースを埋める事が出来るWebサービスが「PLACEHOLDER.COM」です。

PLACEHOLDER.COM で出来ること 

- ライブラリを読み込む必要無しに、Webページに指定したサイズや色のプレースホルダー画像を表示させることが出来る

こんなプレースホルダー画像をWebページに表示できます 


サイズ指定

 PLACEHOLDER.COMは ' img ' タグの ' src ' パラメーターに、PLACEHOLDER.COMのURLを通すだけでプレースホルダー画像を表示させることができます。

<img src="http://via.placeholder.com/728x100/>


' http://via.placeholder.com ' の第一セグメントで 表示させたいサイズを指定すると、サイズ表記されたプレースホルダーの画像が返ってきます。
 * http://via.placeholder.com/SIZE

http://via.placeholder.com/300x250
# http://via.placeholder.com/300 / 300×300の正方形の画像が作成されます

300×250のプレースホルダーを表示

色を指定

第二セグメントで、CSSのカラーhexを指定すると、色付きでプレースホルダー画像が返ってきます。
 * http://via.placeholder.com/SIZE/COLOR

http://via.placeholder.com/300x250/ccc

// 色の例
- 青色 : 0000FF
- 赤色 : DC143C
- オレンジ : FF8C00
- ピンク : FF1493
- 白色 : F8F8FF

プレースホルダーのカラーを赤色に

表示させるテキストを指定

 placeholder.com のURLに、' ?text= ' から始まる パラメーター (query string)を渡すとプレースホルダーに任意のテキストをいれることができます。
* http://via.placeholder.com/SIZE?text=Text ( 表示させる事が可能なテキストは半角英数字のみです )

# プレースホルダーに任意のテキストを入れて表示
http://via.placeholder.com/300x250?text=some space

プレースホルダー画像に表示させるテキストを指定

画像のフォーマットを指定

セグメント内に拡張子をいれると、表示させる画像のフォーマットを指定することができます。
* 対応しているフォーマット : .gif , .png , .jpeg , .jpg

# pngとしてプレースホルダー画像を表示
http://via.placeholder.com/300x250.png


Summary

 同等の機能が実現できるライブラリに ' holder.js ' が挙げられますが、 PLACEHOLDER.COMはライブラリを読み込む必要がないので 素早く指定したサイズの画像が用意できるのが特徴です。

 WEBページ全体のレイアウトを作る時や、本番環境前の広告スペースを埋めたい時など、ページのデザインをしている時に役立ちそうなサービスです。

サービスページ : PLACEHOLDER.COM

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ