※当サイトにはプロモーションが含まれています。
WEBサイトを作成する時など、一旦、適当な画像を設定しておき、あとで画像を作成するといった事があるかと思います。
例えば、下記のような感じの画像をはめておき、あとで画像を作成する感じです。
今回は、自分がよく利用する「ダミー画像を生成する」サービスを紹介したいと思います。
なお、利用は無料、会員登録なども必要ありません。
ダミー画像を生成するサービス
自分がよく利用するのは、「https://via.placeholder.com/」というサービスです。
ちなみに、https://via.placeholder.com/をそのまま入力しても何も表示されません。
基本的な使い方について
URL:の「https://via.placeholder.com/」の後にサイズなどを指定します。
例えば、横300ピクセル、高さ200ピクセルのダミー画像を生成する場合は、
https://via.placeholder.com/300x200の様に指定します。
もし、画像を確認したい場合は、上記のURLをクリックもしくは、アクセスすれば見ることができます。
また、一つのサイズのみを指定すると正方形の画像が生成されます。
https://via.placeholder.com/300カスタマイズオプションについて
背景色やテキスト色を変更することもできます。
背景が赤（#ff0000）、テキストが白（#ffffff）の300×200ピクセルのダミー画像を生成。
https://via.placeholder.com/300x200/ff0000/ffffffまた、任意の文字列を追加することもできます。
背景が赤（#ff0000）、テキストが白（#ffffff）の300×200ピクセルのダミー画像で、「Hello World」というテキストが表示。
https://via.placeholder.com/300x200/ff0000/ffffff?text=Hello+Worldちなみに、URLの?記号はクエリストリングの始まりを示しており、ウェブサーバーに追加のパラメータを渡すために使用されます。
フォーマットの変更について
画像のフォーマット（例: .jpg, .png, .gif）を指定することもできます。
300×200ピクセルのPNG形式のダミー画像。
https://via.placeholder.com/300x200.png実際の使用例
実際の使用例です。
<img src="https://via.placeholder.com/400x300" alt="ダミー画像">
<img src="https://via.placeholder.com/400x300/00ff00/000000?text=Sample+Image" alt="カスタムテキスト付きダミー画像">
<img src="https://via.placeholder.com/150x150.jpg" alt="JPEGフォーマットのダミー画像">これらの例をHTMLコードに埋め込むことで、ウェブページ上で簡単にダミー画像を使用できます。
