ダミー画像を生成する holder.js の使い方

投稿日時:2014年8月6日 カテゴリー:JavaScript

holder.js は JavaScript を利用してダミー画像を生成する便利なスクリプトです。
非常に扱いやすく、モックアップやデザインでダミーを入れたいなどの場合にも重宝します。

事前準備

Holder.js を以下の URL からダウンロードします。

Holder.js のサイト

ダウンロード後に、「holder.js」ファイルを設置するだけ。

<script src="holder.js"></script>

これで完了、非常に簡単です。

まずは一番基本的なもの。

<img src="holder.js/200x200">

これで以下のように 200px × 200px の画像が生成されます。

テーマ作り

実は holder.js はデフォルトで sky, vine, lava, gray, industrial, social とテーマを持っています。
たとえば 「sky」 なら以下のようになります。

<img src="holder.js/200x200/sky">

実は、このテーマも自分でも作れます。

たとえば以下のようなテーマを作りたい場合は、

※検証では、「フォント」「文字の太さ」はなぜか適用されませんでした。

まずは、javascript でテーマを設定します。

<script>
Holder.add_theme("yakudo", {background:"#FF0000", foreground:"#0000FF", size:30, font: "MS Gothic", fontweight:"bold"})
</script>

設定したテーマの名前を指定して出力します。

<img src="holder.js/200x200/yakudo">

テーマを使わなくても背景色、文字色を変更

背景色や文字色はテーマを作らなくても指定できます。

<img data-src="holder.js/100x200/#FF0000:#0000FF">

この場合「src」が「data-src」になっているのに注意です。

テキスト変更

テキストを任意に設定したい場合は、以下のようにすれば、サイズから指定したテキストに変更されます。

<img data-src="holder.js/200x200/text:hello world">

背景色、文字色、テキストを変更した場合は以下

まずはテーマを設定します。「text:」の部分が出力するテキストです。

Holder.add_theme("yakudotxt", { background:"#FF0000", foreground:"#0000FF",size:11, text: "Y.A.K.U.D.O" })

続いてテーマを出力します。

<img src="holder.js/200x200/yakudotxt">

レスポンシブ編

以下で widht 100% の画像が出力されます。

<img data-src="holder.js/100%x75/social">


ブラウザの横幅画面を縮小してみてください。画像も縮小されます。

まとめ

「Holder.add_theme」テーマを設定できる。テキストも変更できるので使える幅は増えるはずです。
私は、JavaScript でスライダーを開発する際に 1 2 3 みたいに画像に番号を付けてスライダーが順番にスライドするか検証するために使ったりしています。
軽量で非常に便利なスクリプトなのでぜひ使ってみてはいかがでしょうか。


コメントを残す