placeholders - ダミー画像やテキストを生成するWeb Components
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