ブーストストラップで作成する際にどれぐらいのサイズだったか確認する方法です。サイズ表みたいなのがあれば良いなと考えた際にそれぞれのカラムに画像を入れてそこにサイズが表示できたら良いな、そーいうのないかなと探しました。みつかりましたよ。
Holder.js – client side image placeholders これがそうなんです。これはダミー画像に数値が載せられるのですがこれが良いのは自動で画像サイズをとってくれているところです。ですので幅を狭めるとその画像を取得してくれます。
これを利用してブートストラップのサイズ表が出来そうなので作りました。ビジュアルで見ながら作れるのが良いですね。
スポンサーリンク
使い方
Bootstrapの可変サイズとは関係ないですがholder.jsの一応簡単な使い方です。ダミー画像としても使えますね。ダウンロードしてきたholder.min.jsを通して後は
imgタグのdata-srcでholder.js/100×100でダミー画像が完成です。簡単ですね。&をつけてオプションを足してつけることが出来ます。幅サイズを100%にしたい場合は100pとすれば100%になります。
<script src="/path/js/holder.min.js"></script> <img data-src="holder.js/300x200">
300pxと200pxのサイズのダミー画像が配置されます。
OPTION
theme: テーマオプションを使用することでそのテーマにそったカラーを使用することが出来ます。
例：<img data-src="holder.js/300x200?theme=sky">
sky, vine, lava, gray, industrial, socialのテーマが使用できます。
random: テーマをランダムに使用することが出来ます。
例：<img data-src="holder.js/300x200?random=yes">
bg: 背景カラー ウェブカラーを指定
例：<img data-src="holder.js/300x200?bg=2a2025">
fg: テキストカラー
例：<img data-src="holder.js/300x200?fg=ffffff">
text: カスタムテキスト
例：<img data-src="holder.js/300x200?text=Hello">
size: テキストサイズ
例：<img data-src="holder.js/300x200?size=50">
font: フォント指定
例：<img data-src="holder.js/300x200?font=Helvetica">
outline: アウトライン
例：<img data-src="holder.js/300x200?outline=yes">
上記を複合したもの 例：<img data-src="holder.js/100px200?fg=fff&bg=000&text=holder-js&size=30">
