デザイン作成時に仮で画像を置いておきたい時は Placeholder.com を使おう!

デザインの画像を用意するのが地味に面倒

皆様、デザインはしますか?

例えば、シンプルなギャラリーページをつくるとしましょう。

こんな感じで。

画像で作ってるときにはこんな風にさくっとやればいいのですが、
実際に HTML で Web サイトのように動くようにしていく中で、ちょっと面倒なのが画像ですね。

今回のようにサイズが一つだけであれば、適当に画像を用意してもいいのですが、
数種類のサイズの画像が必要だったりすると、ちょっと面倒。

そんな、微妙に面倒な部分を誰か解決してくれないかなーと思っていたら、
すごいもので、やっぱりあるんですよね。

それが今回ご紹介する、 Placeholder.com です!

Placeholder.com を使ってみる

では早速つかってみましょう。
とは言っても、とても簡単。

https://via.placeholder.com/200

ここにアクセスするだけ。

正確に言えば、 https://via.placeholder.com/ の後ろに、数字をくっつけると、
そのサイズの画像を生成して返してくれます。

今回の場合は、 200 とつけたので、 一辺 200 ピクセルの画像が生成されました。

あとは、それをコピーや保存して使うなり、
デザイン調整中であれば外部からのアクセスもなく、たいした呼び出し回数にもならないでしょうから、
直接 img タグの src に URL をうめこんでもしまってもいいですね。

また、画像の中にサイズが記載されているのも、
ちょっと使いやすいポイントだったりします。

さらに色々な指定の仕方

もちろん、生成できる画像は正方形だけではありません。

https://via.placeholder.com/600×300

こんな感じで 横x縦 で書けば、長方形だって生成できますし………

https://via.placeholder.com/200?text=this+is+text!

後ろに ?text=(書きたい文字) とすれば、サイズ表示の文字部分を
任意の文字で置き換えることだってできます。

https://via.placeholder.com/200/FFFFFF/000000

サイズの後ろに (背景色)/(文字色) をカラーコードで設定すれば、
色も変えられますよ。

https://via.placeholder.com/200.jpg

通常生成される画像は png 形式ですが、
末尾に拡張子をつけることで、 jpg, png, gif や webp にも対応しています!

知っておくと便利な画像プレースホルダー、是非使ってみて!

こういったサービスは頻繁に使う物ではありませんが、
やはり知っておくといざというときに、面倒なところをさっと解決できていいですね!

皆さんも是非覚えておいて、使ってみてくださいね!

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!



最近のネタ!

  1. 最高級牛ハラミ2.2kg

    2019-11-21

    屋外アグレッシ部~秋BBQ~

    2019/11/4(月・祝)に、記念すべき第1回屋外アグレッシ部の活動がありました! 今回は大井ふ…
  2. 2019-11-18

    第1回映画部開催@TOHOシネマズ日比谷 ~映画部始めました❤

    こんにちは😊😊とても久しぶりの投稿となりました、エージェントグロ…
  3. 2019-11-18

    1年半、毎週ブログを書き続けた私の、ブログのタネの探し方

    ちょっとした前置き こんにちは、江嵜です。 定期的にこのブログをご覧になってくださっている方はお…
  4. 2019-11-14

    2019年10月度社員総会&懇親会@Osaka

    2019年10月8日(火)、大阪社員総会&懇親会が開催されました! その様子をお届けします! 社員…
  5. 2019-11-11

    デザイン作成時に仮で画像を置いておきたい時は Placeholder.com を使おう!

    デザインの画像を用意するのが地味に面倒 皆様、デザインはしますか? 例えば、シンプルなギャラリー…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。