コンテンツ
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. プロフィールカードに動きを追加してみる

プロフィールカードに動きを追加してみる

JavaScript
目次

プロフィールカードに動きを追加してみる

「プロフィールカードを作ってみる」にて作成した「HTML＋CSSに、ほんの少しJavaScriptを足す」 練習をします。
難しいことはせず、押したら変わる・動くを体験するのが目的です。

今回は
「ボタンを押すとプロフィールの詳細が表示／非表示になる」
という一番わかりやすい例でいきます。

1. JavaScriptでやること

各プロフィールカードの
「詳しく見る」ボタンを押すと
説明文が切り替わるようにします。

この時点で覚えてほしいのは
JavaScriptは「操作」
HTMLは「構造」
CSSは「見た目」
という役割分担です。

2. HTMLを少しだけ変更する

index.html を 最小限だけ修正します。
変更点は3つです。

・詳細用の文章を追加
・JavaScriptで操作するためのclassを付ける
・scriptタグを最後に追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>プロフィールカード</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="wrapper">
    <section class="profile-list">

      <div class="profile-card">
        <p class="job">カフェスタッフ</p>
        <h1 class="name">みさき</h1>
        <p class="bio">
          都内のカフェで働きながら、
          接客スキルと写真撮影を勉強中。
        </p>
        <p class="detail hidden">
          ラテアートとフード撮影が好きで、
          将来は自分のカフェを開くのが夢。
        </p>
        <button class="button js-toggle">詳しく見る</button>
      </div>

      <div class="profile-card">
        <p class="job">Webデザイナー</p>
        <h1 class="name">ゆうた</h1>
        <p class="bio">
          バナーやLP制作を中心に活動。
          シンプルなデザインが得意。
        </p>
        <p class="detail hidden">
          配色と余白設計を重視し、
          見やすさを第一に考えています。
        </p>
        <button class="button js-toggle">詳しく見る</button>
      </div>

      <div class="profile-card">
        <p class="job">動画編集者</p>
        <h1 class="name">さくら</h1>
        <p class="bio">
          YouTubeやショート動画の編集を担当。
          分かりやすさを大切にしています。
        </p>
        <p class="detail hidden">
          テロップとカットのテンポを意識し、
          最後まで見てもらえる動画を作ります。
        </p>
        <button class="button js-toggle">詳しく見る</button>
      </div>

    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

ポイント
buttonに js-toggle というclassを付けています
detail は最初は隠したいので hidden を付けています

3. CSSを少し追加する

style.css の最後に下記を追加します。

.button.is-open {
  background: #e5e7eb;
  color: #111827;
}  

.detail {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 16px;
}

.hidden {
  display: none;
}

hidden クラスが付いている要素は表示されません。

4. JavaScriptファイルを作る

新しく script.js というファイルを作って（index.htmlとstyle.cssと同じ階層に作成してください）、次を貼り付けます。

const buttons = document.querySelectorAll(".js-toggle");

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const card = button.closest(".profile-card");
    const detail = card.querySelector(".detail");

    detail.classList.toggle("hidden");
    button.classList.toggle("is-open");
    
    if (detail.classList.contains("hidden")) {
      button.textContent = "詳しく見る";
    } else {
      button.textContent = "閉じる";
    }    
  });
});

5. 何をしているか超ざっくり説明

このJavaScriptは、次のことをしています。

ボタンを全部取得する
↓
ボタンがクリックされたら処理を実行
↓
同じカード内の詳細文を探す
↓
hiddenクラスを付け外しする
↓
表示に合わせてボタン文字を変える

「クリック → クラスを切り替える」
これがJavaScriptの基本形です。

6. ブラウザで確認する

index.html をブラウザで表示・更新して、ボタンをクリックしてください。

詳細が出る
↓
もう一度押すと消える
↓
ボタンの文字が変わる

これができていれば成功です。

7. 最初にやるおすすめ改造

例えば、下記のような改造も少しだけ触ってみてください。

ボタン文言を変える

button.textContent = "詳細を表示";

最初から1人だけ開いた状態にする

<p class="detail">

detailをフェード表示にする（CSS挑戦）

.detail {
  transition: opacity 0.3s;
}
JavaScript
目次