HTMLでのプレースホルダー画像の使用方法

以下に、プレースホルダー画像を表示するためのいくつかの方法とコード例を示します。

1. <img>要素とsrc属性を使用する方法: 最も基本的な方法は、<img>要素を使用してプレースホルダー画像を表示することです。src属性には、プレースホルダー画像のURLを指定します。

   <img src="https://via.placeholder.com/300">

   上記の例では、src属性にhttps://via.placeholder.com/300というURLを指定しています。このURLは、幅300ピクセルのプレースホルダー画像を提供するサービスです。

2. data: URLスキームを使用する方法: もう1つの方法は、data: URLスキームを使用して直接画像データを埋め込む方法です。この方法では、外部の画像ファイルをダウンロードする必要がありません。

   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAD5gGQD0n1FwAAAABJRU5ErkJggg==">

   上記の例では、src属性にdata:image/png;base64,から始まるデータURIを指定しています。このデータURIにはプレースホルダー画像のデータが直接埋め込まれています。

3. CSSのbackground-imageプロパティを使用する方法: もう1つの方法は、CSSのbackground-imageプロパティを使用してプレースホルダー画像を表示する方法です。この方法は、要素の背景としてプレースホルダー画像を設定します。

   <div style="background-image: url('https://via.placeholder.com/300'); width: 300px; height: 200px;"></div>

   上記の例では、<div>要素のstyle属性を使用して、背景画像としてプレースホルダー画像を指定しています。

これらは、HTMLでプレースホルダー画像を表示するためのいくつかの方法の一部です。必要に応じて、画像のサイズやスタイルを調整してください。また、プレースホルダー画像の提供元によっては、さまざまなサイズやスタイルの画像を生成できる場合もありますので、それぞれのドキュメントを参照してください。