Tailwind CSS だけでスケルトンスクリーンを作る

スケルトンスクリーンとは

スケルトンスクリーンは、ページの読み込み中に表示される、コンテンツの骨組みだけを表示する UI です。コンテンツが読み込まれるまでの間、ユーザーに待っていることを感じさせないために使われます。

アバターとテキスト

アバターとテキストのスケルトンスクリーンでは、アバター部分に円形のプレースホルダーを使用し、テキスト部分に矩形のプレースホルダーを配置しています。shrink-0 を用いて、フレックスアイテムが縮小されないようにします。

ブログアイテム（横）

横向きのブログアイテムでは、画像とテキストを並べて配置するスケルトンスクリーンを作成します。rounded-lg クラスを使って角丸にし、shrink-0 で画像部分が縮小されないようにしています。

ブログアイテム（縦）

縦向きのブログアイテムのスケルトンスクリーンでは、画像を上部に配置し、下にテキストプレースホルダーを並べています。このレイアウトは、ブログの一覧や記事の詳細ページに使うのに適しています。

まとめ

Tailwind CSS だけを使って、簡単にスケルトンスクリーンを実装することができます。animate-pulse クラスを使うことで、ページの読み込み中に動きのあるプレースホルダーを表示し、ユーザーにコンテンツが準備中であることを伝えることができます。JavaScript を使わずに CSS だけで実装できるため、軽量で手軽にスケルトンスクリーンを追加できます。

参考