Webページに指定したサイズのプレースホルダー画像を表示できるWebサービス「PLACEHOLDER.COM」の紹介です。
Webページを作っていると、レイアウト調整の為に 指定したサイズの要素や画像が欲しい場面があります。用途は様々ですが、ロゴ画像や作成予定のウェジェット、その他は Googleアドセンスなどの広告設置用のスペースが多いのではないでしょうか。
divタグを作成して、style要素でサイズや色を指定する方法もありますが、もう少し手軽に スペースを埋める事が出来るWebサービスが「PLACEHOLDER.COM」です。
- ライブラリを読み込む必要無しに、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の正方形の画像が作成されます
第二セグメントで、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
同等の機能が実現できるライブラリに ' holder.js ' が挙げられますが、 PLACEHOLDER.COMはライブラリを読み込む必要がないので 素早く指定したサイズの画像が用意できるのが特徴です。
WEBページ全体のレイアウトを作る時や、本番環境前の広告スペースを埋めたい時など、ページのデザインをしている時に役立ちそうなサービスです。
サービスページ : PLACEHOLDER.COM
