Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiita全国学生対抗戦Advent Calendar 2024

Day 12
@RS0823inStedTechOrganization

いいねをたくさん押してください

Posted at

このコードは、クリックするたびに「いいね！」のカウントが増え、ハートのアイコンがアニメーションで跳ねるシンプルなインタラクティブな「いいねボタン」を作成するためのものです。以下、コードを段階的に説明します。

1. HTML部分 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>いいねボタン</title>
  <style>
    /* スタイルシートが続きます */
  </style>
</head>
<body>
  <div class="like-container">
    <button class="like-button" id="likeButton">
      <span class="heart">❤️</span>
    </button>
    <div class="like-count" id="likeCount">0</div>
  </div>

  <script>
    // JavaScriptのコードが続きます
  </script>
</body>
</html>
  • <div class="like-container">: 「いいね！」ボタンとカウント表示を囲むコンテナです。
  • <button class="like-button" id="likeButton">: クリック可能な「いいね」ボタンです。ボタンの中にはハートの絵文字（❤️）があります。
  • <div class="like-count" id="likeCount">0</div>: 「いいね！」ボタンの下に表示されるカウント。最初は「0」になっています。

2. CSS部分 

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #f0f0f0;
}

.like-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.like-button {
  background-color: #ff007f;
  color: white;
  font-size: 2rem;
  border: none;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.7);
  transition: all 0.3s ease;
}

.like-button:hover {
  transform: scale(1.1);
  background-color: #ff1493;
}

.heart {
  font-size: 3rem;
  animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.like-count {
  font-size: 2rem;
  margin-top: 20px;
  color: #333;
}

@keyframes countAnimation {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

.count-animation {
  animation: countAnimation 0.3s ease-out;
}
  • body: 画面全体を中央に配置するための設定です。display: flex と justify-content: center と align-items: center で、要素を画面中央に整列させています。
  • like-container: 「いいね」ボタンとカウント表示を縦並びに配置するためのラッパーです。flex-direction: column を使って、縦方向に要素を並べています。
  • like-button: 「いいね」ボタンのスタイルです。
    • 背景色はピンク（#ff007f）、白文字、丸い形にするために border-radius: 50% を指定。
    • box-shadow でボタンにシャドウを追加して、立体感を出しています。
    • transition によって、ホバー時にボタンが少し大きくなるアニメーションを追加しています。
  • like-button:hover: ボタンにマウスが乗ったときに、色を変え、少し拡大するエフェクトを追加しています（transform: scale(1.1)）。
  • heart: ハートの絵文字（❤️）にアニメーションを追加。@keyframes bounce を使って、ハートアイコンが上下に跳ねるように設定しています。これにより、ボタンをクリックしたときに視覚的に楽しくなります。
  • like-count: カウント表示のスタイルです。font-size: 2rem として、カウントを大きめに表示し、下に余白（margin-top: 20px）を取ってボタンとの間隔を調整しています。
  • countAnimation: カウントが増える際に、カウント部分が少し拡大してリズム感を出すためのアニメーションです。

3. JavaScript部分 

const likeButton = document.getElementById('likeButton');
const likeCount = document.getElementById('likeCount');

let count = 0;
likeButton.addEventListener('click', () => {
  count++;

  // カウントを更新
  likeCount.textContent = count;

  // カウントにアニメーションを追加
  likeCount.classList.add('count-animation');

  // アニメーション後にクラスを削除
  setTimeout(() => {
    likeCount.classList.remove('count-animation');
  }, 300);
});
  • likeButton と likeCount: ボタンとカウント表示をそれぞれ取得しています。これにより、JavaScriptでボタンのクリックイベントを処理したり、カウント表示を変更したりできます。
  • count: いいねのカウントを保持する変数です。最初は 0 からスタートします。
  • likeButton.addEventListener('click', ...): いいねボタンがクリックされたときに実行される関数です。
    • count++: クリックするたびにカウントを増やします。
    • likeCount.textContent = count: 増えたカウントを画面に表示します。
    • likeCount.classList.add('count-animation'): カウントが増えた時にアニメーションを追加します。
    • setTimeout(() => { likeCount.classList.remove('count-animation'); }, 300): アニメーション終了後にアニメーションクラスを削除して、次回クリック時に新たにアニメーションを適用できるようにします。

結果

  • ユーザーが「いいね」ボタンをクリックするたびに、カウントが増えて、表示がアニメーションします（カウント部分が少し大きくなる）。
  • ハートアイコンは常に跳ねており、視覚的にボタンをクリックしたくなるようなインタラクションを提供します。
  • ボタンはホバー時に拡大し、色が変わって、さらに視覚的に楽しい効果が加わります。

以下全体のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>いいねボタン</title>
  <style>
    /* 全体のスタイル */
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #f0f0f0;
    }

    .like-container {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* いいねボタンのスタイル */
    .like-button {
      background-color: #ff007f;
      color: white;
      font-size: 2rem;
      border: none;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 0 20px rgba(255, 0, 255, 0.7);
      transition: all 0.3s ease;
    }

    /* ホバー時のエフェクト */
    .like-button:hover {
      transform: scale(1.1);
      background-color: #ff1493;
    }

    /* ハートアイコン */
    .heart {
      font-size: 3rem;
      animation: bounce 0.5s ease infinite;
    }

    /* ハートが跳ねるアニメーション */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    /* カウントの表示 */
    .like-count {
      font-size: 2rem;
      margin-top: 20px;
      color: #333;
    }

    /* いいね！のカウントが増えるアニメーション */
    @keyframes countAnimation {
      0% { transform: scale(1); }
      100% { transform: scale(1.2); }
    }

    .count-animation {
      animation: countAnimation 0.3s ease-out;
    }

  </style>
</head>
<body>

  <div class="like-container">
    <!-- いいねボタン -->
    <button class="like-button" id="likeButton">
      <span class="heart">❤️</span>
    </button>

    <!-- いいねカウント -->
    <div class="like-count" id="likeCount">0</div>
  </div>

  <script>
    // いいねボタンとカウント要素を取得
    const likeButton = document.getElementById('likeButton');
    const likeCount = document.getElementById('likeCount');
    
    // クリック時にカウントを増加させる関数
    let count = 0;
    likeButton.addEventListener('click', () => {
      count++;

      // カウントを更新
      likeCount.textContent = count;

      // カウントにアニメーションを追加
      likeCount.classList.add('count-animation');

      // アニメーション後にクラスを削除
      setTimeout(() => {
        likeCount.classList.remove('count-animation');
      }, 300);
    });
  </script>

</body>
</html>

以上です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?