BFE.dev
フロントエンド面接質問集118. Skeleton Screenとは？どう実装する？AI解答例
この解答例はChatGPTによって生成されています，正しいかは自己判断で。 皆の投稿からも解答例が見つかるかもしれませんよ。

BFE.devでのAI解答例 - フロントエンド面接質問
118. Skeleton Screenとは？どう実装する？

Skeleton Screenを実装する方法は、以下のようになります。

  1. HTMLにSkeleton Screenのマークアップを追加する。
  2. CSSで、Skeleton Screenのスタイルを定義する。
  3. JavaScriptで、Skeleton Screenを表示/非表示にする制御を行う。

具体的には、以下の手順で実装することができます。

  1. HTMLにSkeleton Screenのマークアップを追加する。
<div class="skeleton"></div>
  1. CSSで、Skeleton Screenのスタイルを定義する。
.skeleton {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f3f3f3;
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0% {
    background-color: #f3f3f3;
  }
  50% {
    background-color: #e6e6e6;
  }
  100% {
    background-color: #f3f3f3;
  }
}
  1. JavaScriptで、Skeleton Screenを表示/非表示にする制御を行う。
// Skeleton Screenを表示する
document.querySelector('.skeleton').classList.add('show');

// Skeleton Screenを非表示にする
document.querySelector('.skeleton').classList.remove('show');

以上が、Skeleton Screenを実装するための基本的な手順です。ただし、詳細な実装方法は、サイトによって異なる場合があります。