ワイヤーフレームからデザインカンプを起こす際に、正確なサイズの画像を使ってサイトの構成を考えたいときがあります。
そういったときには、ちょうどよいサイズの画像を配置していくと、CSSの具合が見やすいです。
表示サイズで変更していってもいいのですが、もともとそのサイズで表示じている画像を配置すれば、表示サイズ調整をする必要がありません。
こんなときに便利なのが、Placehold.jpです。
使い方をみてみましょう。
*板とそのサイズ
サイズを指定して使う
Placehold.jpでは、URLでサイズを指定することで画像を使うことが可能です。
たとえば、640×480のサイズがほしい場合、
http://placehold.jp/640x480.png
と書きましょう。
これだけで次の画像を使えます。
aタグのソースに書けばこれでダミー画像を使えます。
色を変えてみる
次に文字サイズの色、背景色を変更する方法を見てみます。
サイズの前にrgbで色を指定することで文字サイズの色をまずは変更できます。
先程の画像サイズを入れたURLの前にスラッシュで区切ってrgbを加えましょう。
https://placehold.jp/ff0000/640x480.png
結果はこちらの通りです。
ちゃんと赤くなっていますね。
ちなみに、HTMLでredなどとして色を指定できますが、こちらではだめです。
このようなコードです。
https://placehold.jp/red/640x480.png
実行しても、文字サイズの色の指定がないのと状況が変わらないです。
これに加えて、背景の色も変更できます。
FFE5E5あたりのピンクっぽい色を背景にします。
この場合、先程FF0000として赤色のURLを入れたところの前にスラッシュで、FFE5E5を加えます。
こうです。
https://placehold.jp/FFE5E5/ff0000/640x480.png
結果を実行すると、背景色がピンクになっています。
文字サイズを変えてみる
さらにフォントサイズを指定できます。
背景色に指定した内容の前にスラッシュで文字のフォントサイズ入れ込みます。
例えば、32を入れ込むとこんなURLです。
https://placehold.jp/32/FFE5E5/ff0000/640x480.png
結果として、フォントサイズが32になりました。
上記の例示よりも小さめです。
このように画像を指定できれば、わざわざひとつひとつをつくらなくても、コードを頭の中で書けば画像の背景色やサイズなど簡単に指定できます。
ささっとコードを仕上げたいときに、上手に使ってみてください。