2014.04.20
design

任意サイズのサンプル画像が超簡単に作成できるオンラインサービス

placehold.itという大変便利なサイトを紹介します。

サンプル画像を好きなサイズで作成してくれるサイトですが、嬉しいポイントは、作成した画像をダウンロードする必要がなくそのままリンクが作成されるので手間がかかりません。
web_screenshot062
ウェブデザインをしていて一時的に適度なサイズの画像を入れたいけど作成するの面倒・・・とりあえずdivでも入れておくか・・・なんて多いかと思います。

でもdivタグからimgタグに最終的に変更したり何かと不便だったりします。

本当、こんなものが欲しかったと感動したウェブ作成でとっても便利なサイトです。

サンプル画像作成、使い方

下記のリンクでは、350×150の画像が表示されます。
HTMLソース

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

350×150となっている部分を好きなサイズに変更するだけです。

表示例

これだけでも十分便利なのに、さらにちょっとした機能もあります。

色が選べる

HTMLソース

<img src="http://placehold.it/350x150/00ced1/ffffff">

hex codeで色を指定します。(ffffffだったら白)
最初の色は背景色で2番目の色はテキストの色になります。

MEMO:
Webで色を指定するときに使う#プラス6桁の英数字の色のことをhex color codeと言うそうです。

表示例

正方形イメージはもっと簡単に作れる

HTMLソース

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

これで350×350のイメージができます。heightを省略することができるのです。

表示例

画像のフォーマットが選べる

HTMLソース

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

デフォルトではgifだそうです。
その他、png、jpeg、jpgが可能。
上記のように一番最後に.pngと付けることができます。

表示例

下記のように、色の指定後に.pngを付けてもOKだそうです。
どのオプションの最後につけても良いということですね。
HTMLソース

<img src="http://placehold.it/350x150/00ced1.png/ffffff">
<img src="http://placehold.it/350x150/00ced1/ffffff.png">

任意のテキストを入れることが可能

HTMLソース

<img src="http://placehold.it/350x150&text=Put+an+image+here!">

&text=のあとに好きな文字を。+はスペースになります。
ただ英語のサイトなので日本語は文字化けしてしまいます・・・。

表示例

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP