Lorem Picsumは、ランダムな画像を提供するサービスで、ウェブ開発やデザインの際に便利です。以下に、Lorem Picsumの使い方を紹介します。
基本的な使い方
特定のサイズの画像を取得するには、次のURL形式を使用します。
例として、300x200ピクセルの画像を取得するには、以下のURLを使用します。
https://picsum.photos/300/200
コード例
HTMLに直接画像を埋め込む場合。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例：Lorem Picsum画像</title>
</head>
<body>
<h1>ランダムな画像を表示</h1>
<img src="https://picsum.photos/300/200" alt="ランダムな画像">
</body>
</html>
特定の画像を取得
特定の画像を取得したい場合、画像IDを指定します。
例えば、IDが237の画像を300x200ピクセルで取得するには、以下のURLを使用します。
https://picsum.photos/id/237/300/200
グレースケールの画像
グレースケールの画像を取得するには、URLに?grayscaleを追加します。
https://picsum.photos/300/200?grayscale
コード例（グレースケール画像）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例：グレースケール画像</title>
</head>
<body>
<h1>グレースケールのランダムな画像を表示</h1>
<img src="https://picsum.photos/300/200?grayscale" alt="グレースケールのランダムな画像">
</body>
</html>
以上のようにして、Lorem Picsumを使ってランダムな画像を取得し、ウェブページに表示することができます。