みなさんこんにちは!おさかなです!
今回は「Placehold.jp」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・フリーのダミー画像を探している方
・Web制作で、ダミー画像を使いたい方
・画像サイズを指定したい方
「Placehold.jp」って何?
「Placehold.jp」とは、テスト用のダミー画像生成サイトのことです。
サイズは「px」で指定可能で、Web制作中に「ちょうど良い画像がない…!」という場合に、おすすめです!(これは助かる〜✨)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/5ddfd56b731aa0668ff707b1d90a5c36.png)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-top-160x90.png)
実際に使ってみよう!
ダミー画像を生成しよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/07/placehold.png)
まずは「幅(よこ)」「高さ(たて)」のサイズをピクセルで指定します。(よしっ!)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-size.png)
ちなみに「100×100」や「800×600」など、よく使用するサイズはこちらから指定することも可能です!
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-yokutukau.png)
ちなみに、英語にも対応しているようです。(ハロー♪)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-en.png)
サイズが指定できたら「画像を生成する」を押しましょう!(おりゃー!)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-seiseibtn.png)
一瞬何も表示されないので焦りますが、「URL」がきちんと生成されているのでご安心ください。
![](https://osakanav.com/wp-content/uploads/2022/07/dami-link.png)
↓今回生成されたURLはこちら
http://placehold.jp/640×480.png
生成されたURLをコピーして開くと……?こんな感じで、画像のプレビューが表示されます。
![](https://osakanav.com/wp-content/uploads/2022/07/dami-urlseisei.png)
![](https://osakanav.com/wp-content/uploads/2021/12/go-taxi-top-160x90.png)
カスタマイズしよう!
ページを少しスクロールすると、「Advanced」というより高度なカスタマイズが可能なページがあります。(おお!)
![](https://osakanav.com/wp-content/uploads/2022/07/placehol-ad.png)
先ほどの「Basic」とは違い、画像フォーマット(png,jpg)や、文字サイズも設定できます。
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-format.png)
他にも、16進数のカラーコードで「文字色・背景色」が指定可能です!(ありがたい✨)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-color.png)
(一気に印象が変わった🍊)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-thanks.png)
さらに「表示文字」の変更もできます!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-moji.png)
試しに「サンプル」という文字列を入れてみました。
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-text.png)
スタイルシートの「利用する」にチェックを入れるだけで、CSSの記述も可能に…!
もっと細かく編集したいという方におすすめです🌱
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-csa.png)
CSSを使うと、グラデーションにしたり、角を丸くしたりといった具合に、よりオリジナリティのある画像にできます。(便利だ!)
![](https://osakanav.com/wp-content/uploads/2022/07/dami-gazou.gif)
ちなみに「URLを直接入力」して画像を作成する機能もあります。
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-url.png)
(あともう少し…🚩)
保存しよう!
保存するときは、まずURLをコピーして開きます。
![](https://osakanav.com/wp-content/uploads/2022/07/dami-copy.png)
そこで、マウスを右クリックして「名前を付けて画像を保存」を押せばOKです。
是非みなさんも、ダミー画像を作ってみてください!(お疲れさま🌸)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-save.png)
↓実際に作成したものがこちら
![](https://osakanav.com/wp-content/uploads/2022/07/osakanav-dami-.png)
![](https://osakanav.com/wp-content/uploads/2022/07/placehold-thankyou.jpg)
![](https://osakanav.com/wp-content/uploads/2022/07/320x240.png)
![](https://osakanav.com/wp-content/uploads/2022/07/sample.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
これで、本番用のデータに入れ替えやすくなるね!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
もしかして僕たち、入れ替わってる〜?!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/03/riju-top-160x90.png)