Webデザインを行っていて、画像の部分にプレイスホルダーとなるダミー画像を適用することがあります。大抵画像サイズだけが表示されていたり、目的(ロゴなど)の文字を書いていたりします。 プレイスホルダー画像を提供するサービスもありますが、今回はローカルでも使えるプレイスホルダー画像を作るWeb Components、placeholdersを紹介します。

placeholdersの使い方

を使います。

色をカスタマイズした版。

文字を変えた版。

さらに も用意されています。

文字の高さを変更できます。

placeholdersを使うことで、画像やテキスト部分にダミーコンポーネントを適用できます。画像はバイナリではなく、SVGで生成されますので、色やテキスト変更などのカスタマイズが容易になっています。

placeholdersはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

Collection of web components used as placeholders phuoc-ng/placeholders: SVG-based placeholders in web components