No.063
LOADING CSSTAILWIND

Tailwind Pulse Skeleton

コンテンツ読込中のプレースホルダ。Tailwindのanimate-pulseでアバター＋テキスト行がふわっと明滅。体感速度を上げるローディングUIの定番。

DEMO

CODE

HTML
<div class="demo-stage tps-stage"><div class="tps-card"><div class="tps-avatar"></div><div class="tps-lines"><div class="tps-line w75"></div><div class="tps-line"></div><div class="tps-line w50"></div></div></div></div>
CSS
.tps-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.tps-card { display:flex; gap:1rem; width:min(360px,82%); padding:1.4rem; background:#1A1A1A; border-radius:16px; border:1px solid rgba(255,255,255,.06); }
.tps-avatar { width:48px; height:48px; border-radius:50%; background:#2c2c33; flex:none; animation:tps-pulse 1.5s ease-in-out infinite; }
.tps-lines { flex:1; display:flex; flex-direction:column; gap:.7rem; justify-content:center; }
.tps-line { height:12px; border-radius:6px; background:#2c2c33; animation:tps-pulse 1.5s ease-in-out infinite; }
.tps-line.w75 { width:75%; } .tps-line.w50 { width:50%; }
@keyframes tps-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
TAILWIND (HTML)

上のライブデモはTailwind不要のCSS等価版です。下のクラスをTailwind環境に貼ると同じ結果になります（animate-pulse が明滅を担います）。

<div class="flex gap-4 w-80 p-5 bg-gray-900 rounded-2xl animate-pulse">
  <div class="w-12 h-12 rounded-full bg-gray-700"></div>
  <div class="flex-1 space-y-3 py-1">
    <div class="h-3 bg-gray-700 rounded w-3/4"></div>
    <div class="h-3 bg-gray-700 rounded"></div>
    <div class="h-3 bg-gray-700 rounded w-1/2"></div>
  </div>
</div>

AI PROMPT

Claude Cursor v0
PROMPT
コンテンツ読込中のスケルトンUIをTailwindで作って。外枠 flex gap-4 w-80 p-5 bg-gray-900 rounded-2xl に animate-pulse を付けると中身全体がふわっと明滅する。左にアバター w-12 h-12 rounded-full bg-gray-700、右に flex-1 space-y-3 でテキスト行 h-3 bg-gray-700 rounded を3本（幅を w-3/4 / 既定 / w-1/2 と変える）。体感速度を上げるローディング表示に。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの教科書 新版 マルチデバイス時代のインターフェース設計 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

Tailwindパルススケルトン（Tailwind Pulse Skeleton）とは

コンテンツ読込中のプレースホルダ。Tailwindのanimate-pulseでアバター＋テキスト行がふわっと明滅。体感速度を上げるローディングUIの定番。この効果はTailwind CSSのユーティリティクラスを中心に構成され、クラスの組み合わせだけでアニメーションやホバー状態を表現します。

使いどころ

データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。