Tailwind CSSでアニメーション付きのスケルトンスクリーンをスタイリングする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ2の1日目を担当します。

qiita.com

今回は、Tailwind CSSでスケルトンスクリーンをスタイリングする方法をご紹介します。

スケルトンスクリーンとは
Tailwind CSSでのスタイリング方法
- 骨組みをつくる
- アニメーションを追加する
さいごに

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

冒頭、スケルトンスクリーンとは何かを整理します。

スケルトンスクリーンは、読み込み中にコンテンツの代替となる図形を表示して、処理が実行中であることなどをユーザーに示すUXテクニックの一つです。

この記事では、以下の画像のようなフィードUIでのスケルトンスクリーンのスタイリング方法をご紹介します。

Tailwind CSSでのスタイリング方法

Tailwind CSSでは、スケルトンスクリーンに有用なアニメーション用のUtility classが標準で搭載されています。

スタイリング方法を順を追って説明します。

骨組みをつくる

まずは骨組みをつくります。

この時点ではアニメーションはありません。

See the Pen Tailwind CSSでスケルトンスクリーン by AyumuSaito (@ayumusaito-excite) on CodePen.

<div class="p-4 rounded bg-white border border-slate-300">
    <div class="flex gap-3">
        <!-- プロフィール画像のプレースホルダー -->
        <div class="w-12 h-12 aspect-square rounded-full bg-slate-300"></div>

        <div class="flex flex-col gap-2">
            <!-- 文字のプレースホルダー -->
            <div class="h-6 w-24 rounded bg-slate-300"></div>
            <div class="h-6 w-40 rounded bg-slate-300"></div>
            <div class="h-6 w-80 rounded bg-slate-300"></div>
        </div>
    </div>
</div>

アニメーションを追加する

今回のようなフィードUIのスケルトンスクリーンのために、animate-pulseというアニメーション用のUtility classが用意されています。

animate-pulseがプレースホルダー用の図形要素をラップする要素に指定します。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen.

<div class="p-4 rounded bg-white border border-slate-300">
    <!-- 図形のラッパーにanimate-pulseを追加 -->
    <div class="animate-pulse flex gap-3">
        <!-- プロフィール画像のプレースホルダー -->
        <div class="w-12 h-12 aspect-square rounded-full bg-slate-300"></div>

        <div class="flex flex-col gap-2">
            <!-- 文字のプレースホルダー -->
            <div class="h-6 w-24 rounded bg-slate-300"></div>
            <div class="h-6 w-40 rounded bg-slate-300"></div>
            <div class="h-6 w-80 rounded bg-slate-300"></div>
        </div>
    </div>
</div>