スタブ画像の生成

今日、彼らは私にスタブ画像の迅速な生成のためのクールなサービスへのリンクを投げました。 html-layoutに役立ちます。 私の意見では、これはとにかくスタブを使用する人にとって便利です-レイアウト中の時間を節約します スタブ自体の準備ができました。 画像ファイル自体に気を取られることなく、コード内の数字/文字のみを変更して、色/サイズを選択することができます-そしてすぐに効果を確認してください。 そして、検証のためにコードに戻らないように、必要に応じて書き込まれたディメンション自体を参照してください。 または、サイズの代わりにテキストを追加して、このスタブの目的を常に知ることができます（「Ban（n）ep」、「Logo」、「Photo」など）。



サービスは登録を必要としません-そして、一般的にあなたはそれを使用するためにサイトに行くことができません。 たとえば、コードにすぐに記述します。

< img src = "http://placehold.it/350x50" / >

取得：





更新する k0rv1nの努力のおかげで、 このサービスの変種が見つかりました 。

まず、キリル文字がサポートされています。 第二に、異なる言語のソースコードへのリンクがあります。

dummyimage.comの著者はplacehold.itと同じラッセル・ハイムリッチです。 Placehold.itにはもう1人の著者がいますが、彼がデザインを行ったと仮定します（そこのデザインは本当にクールですが、どうやらポンティックフォントUnicodeが登場しなかったためです）



例（Habrakatを参照）をplacehold.itからdummyimage.comに変更しました。より機能的であるためです...

例は次のとおりです。



1. スクエアスタブの場合、1つの数字で十分です。

< img src = "http://dummyimage.com/ 120 " / >

< img src = "http://dummyimage.com/ 100 " / >

< img src = "http://dummyimage.com/ 80 " / >

結果：





2. 色を変更します （常にサイズの後に設定する必要があります。そうしないと機能しません）。

< img src = "http://dummyimage.com/150x60/ c0c0c0 " / >

< img src = "http://dummyimage.com/150x60/ 00dd00 " / >

< img src = "http://dummyimage.com/150x60/ a6a6ff " / >

結果：





3. 形式を変更します （URLの任意の部分に拡張子を追加します。3つの形式がサポートされています-gif、jpg / jpeg、png）：

< img src = "http://dummyimage.com/150x60/99cccc .gif " / >

< img src = "http://dummyimage.com/150x60 .jpg / 99cccc" / >

< img src = "http://dummyimage.com/150x60/99cccc .jpeg " / >

< img src = "http://dummyimage.com/150x60 .png / 99cccc" / >

結果：





4. テキストを追加します （スペースの代わりにプラス）：

< img src = "http://dummyimage.com/150x60/99cccc.gif＆text = The + image！ " / >

< img src = "http://dummyimage.com/150x60/99cccc.jpg＆text = The + image！ " / >

< img src = "http://dummyimage.com/150x60.png/99cccc＆text = The + image！ " / >

< img src = "http://dummyimage.com/150x60.png/99cccc＆text =キリル文字 " / >

結果：





5. テキストの色を変更します （スタブ自体の色の後になります）。

< img src = "http://dummyimage.com/150x60/99cccc/ ffffff .gif＆text = The + image！" / >

< img src = "http://dummyimage.com/150x60/99cccc.jpg/ 0b0b0b ＆text = The + image！" / >

< img src = "http://dummyimage.com/150x60.png/99cccc/ aa00aa ＆text = The + image！" / >

結果：





PS 「 プレースホルダー 」という言葉の適切な翻訳を提供できるのは誰ですか？ noozeはスタブを提案しました:)



PPS placehold.itサービスの作者（ BrentとRussell ）は、誰かが少し時間を節約するために（望んでいるように）それを行ったことをそこに書き留めています。