みなさんこんにちは!おさかなです!
今回は「Placehold.jp」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・フリーのダミー画像を探している方
・Web制作で、ダミー画像を使いたい方
・画像サイズを指定したい方
「Placehold.jp」って何?
「Placehold.jp」とは、テスト用のダミー画像生成サイトのことです。
サイズは「px」で指定可能で、Web制作中に「ちょうど良い画像がない…!」という場合に、おすすめです!(これは助かる〜✨)


実際に使ってみよう!
ダミー画像を生成しよう!
それでは早速サイトにアクセスしましょう!

まずは「幅(よこ)」「高さ(たて)」のサイズをピクセルで指定します。(よしっ!)

ちなみに「100×100」や「800×600」など、よく使用するサイズはこちらから指定することも可能です!

ちなみに、英語にも対応しているようです。(ハロー♪)

サイズが指定できたら「画像を生成する」を押しましょう!(おりゃー!)

一瞬何も表示されないので焦りますが、「URL」がきちんと生成されているのでご安心ください。

↓今回生成されたURLはこちら
http://placehold.jp/640×480.png
生成されたURLをコピーして開くと……?こんな感じで、画像のプレビューが表示されます。


カスタマイズしよう!
ページを少しスクロールすると、「Advanced」というより高度なカスタマイズが可能なページがあります。(おお!)

先ほどの「Basic」とは違い、画像フォーマット(png,jpg)や、文字サイズも設定できます。

他にも、16進数のカラーコードで「文字色・背景色」が指定可能です!(ありがたい✨)

(一気に印象が変わった🍊)

さらに「表示文字」の変更もできます!(おー!)

試しに「サンプル」という文字列を入れてみました。

スタイルシートの「利用する」にチェックを入れるだけで、CSSの記述も可能に…!
もっと細かく編集したいという方におすすめです🌱

CSSを使うと、グラデーションにしたり、角を丸くしたりといった具合に、よりオリジナリティのある画像にできます。(便利だ!)

ちなみに「URLを直接入力」して画像を作成する機能もあります。

(あともう少し…🚩)
保存しよう!
保存するときは、まずURLをコピーして開きます。

そこで、マウスを右クリックして「名前を付けて画像を保存」を押せばOKです。
是非みなさんも、ダミー画像を作ってみてください!(お疲れさま🌸)

↓実際に作成したものがこちら





これで、本番用のデータに入れ替えやすくなるね!

もしかして僕たち、入れ替わってる〜?!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
