Webプロジェクトでレイアウトを構成する際、一時的なダミー画像で処理することがあるはずです。GIFPNGはダミー画像を容易に作成することが可能なため、Photoshopのような画像編集ツールを利用する必要がなくなります。
概要
基本的な使用方法
使い方は非常に簡単です。下のHTMLタグのようにURLの後ろにお好みの画像の大きさと属性を作成し、タグのsrc属性に値としてURLを指定すれば、目的のサイズのダミー画像が出力されます。
画像サイズ
画像サイズは、URLの最初に入るオプションでなければなりません。また、高さが指定されていない場合は画像は正方形にます。
<img src="http://gifpng.com/{横幅}">
<img src="http://gifpng.com/{横幅}x{高さ}">
カラー
カラーはURLオプションとパラメータをサポートしています。カラーは16進数コード(例: #FFFFFF → 白)で表現されています。最初のオプションは背景カラーで、その次のオプションはテキストカラーです。 デフォルトの背景色は#ccccccで、デフォルトのテキストの色は、#666666です。
<img src="http://gifpng.com/300/{背景カラー}/{テキストカラー}">
<img src="http://gifpng.com/300/?background-color={背景カラー}&color={テキストカラー}">
その他の指定可能な値はrandomです。
<img src="http://gifpng.com/300/random/ffffff">
例
<img src="http://gifpng.com/300">
<img src="http://gifpng.com/300/333333/ffffff">
<img src="http://gifpng.com/random/ffffff">
<img src="http://gifpng.com/random/random">
境界線パラメータ
境界線の太さ
境界線の太さのプロパティの値を数値で入力する必要があります。0よりも大きい場合は出力されます。 デフォルト値は1です。
<img src="http://gifpng.com/300/?border-width=2">
境界線カラー
カラーは、16進数コードで表現されています。 デフォルト値は#7e7e7eです。
<img src="http://gifpng.com/300/?border-color=ff6600">
境界線タイプ
境界線タイプの指定可能な値はrectangle, thickです。 デフォルト値はthickです。
<img src="http://gifpng.com/300/?border-type=rectangle">
例
<img src="http://gifpng.com/300/?border-width=2">
<img src="http://gifpng.com/300/333333/ffffff/?border-color=ffc000&border-width=2">
<img src="http://gifpng.com/300/?border-width=10&border-type=rectangle&border-color=555555">
<img src="http://gifpng.com/300/?border-width=0">
テキストパラメータ
テキスト
画像にテキストを描画する際は、この値を指定する必要があります。値を指定しない場合、他のすべてのテキストのパラメータは無効になります。UTF-8文字列を含む様々な言語や絵文字に最適な文字セットをサポートしています。
<img src="http://gifpng.com/300/?text={テキスト}">
改行
特殊な記号を付けた時点から1行分文字列を送り、次の行の先頭から表記されます。サポートされている値は、\n, \r, \r\nです。
<img src="http://gifpng.com/300/?text=1行目{\n}2行目">
左右の配置
画像に表示されるテキストの横方向の配置を設定します。サポートされている値は、left, center, rightです。 デフォルト値はcenterです。
<img src="http://gifpng.com/300/?text={テキスト}&text-align=center">
上下の配置
画像に表示されるテキストの縦方向の配置を設定します。サポートされている値は、top, middle, bottomです。 デフォルト値はmiddleです。
<img src="http://gifpng.com/300/?text={テキスト}&vertical-align=middle">
余白
要素の中に空白処理を指定する属性です。文字列が長すぎる場合は、次の段落で出力されます。サポートされている値は、normal, nowrapです。 デフォルト値はnormalです。
<img src="http://gifpng.com/300/?text={テキスト}&white-space=nowrap">
行間隔
インライン要素の高さを設定する値である行間隔を設定して上の行と下の行の間隔を調節します。設定値は数値で入力する必要があります。 デフォルト値は1.5です。
<img src="http://gifpng.com/300/?text={テキスト}&line-height=2.5">
フォントサイズ
境界線の太さのプロパティの値を数値として、0よりも大きい際に出力されます。 デフォルト値は20です。
<img src="http://gifpng.com/300/?font-size=10">
例
<img src="http://gifpng.com/300/?text=English">
<img src="http://gifpng.com/300/?text=한국어&line-height=2.5">
<img src="http://gifpng.com/300/?text=中國語&text-align=right">
<img src="http://gifpng.com/300/?text=日本語&vertical-align=bottom">
追加パラメータ
お好みのダミー画像を作成するために利用可能な追加パラメータです。新しいパラメータは常に開発していますが、もしご希望の機能があれば是非リクエストしてください。
ダウンロード
一般的に画像リンクをクリックすると、ブラウザで画像を直接表示します。この属性を指定すると、<a>タグをクリックした際、ブラウザから画像をダウンロードさせることが可能です。
<a href="http://gifpng.com/300/?download">ダウンロード</a>