

### 実現したいこと

Framer.comを使って、アメコミ（Marvel）キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。  
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで１０キャラクターを表示するのではなく、containerの設定により、キャラクターのカードをクリックするとカードが一枚一枚表示されるような動作にしたいです。

### 試したこと

デフォルトのCSSで、flextDirectionが"column"だったので、"row"にすると、表示が横から縦型に切り替わることに気づきました。  
overflowに"scroll"と言う言葉を思いつきで入れてみると、スクロールされるようになりました。  
そのため、他にも見え方を設定できる言葉があるのかな、と思っているのですが、  
どのように設定できる内容を探せばよいのかプログラミング学習初心者のためわかりません。  
英語力のためか、ブラウズしても探したい内容に行き着くことができませんでした。  
どうぞよろしくお願いいたします。

[code]

    const containerStyle = {
        height: "100%",
        display: "fixed",
        flexDirection: "row", 
        justifyContent: "center",
        alignItems: "center",
        overflow: "scroll", 
        gap: 12,
    }
    
[/code]


CC BY-SA 4.0
2023-01-15T07:57:05.983
93356
2023-01-17T11:47:26.720
2023-01-15T16:27:10.853
3060
56574
question
javascript css reactjs
Framerで、JavascriptのCSSに設定できる内容は、どのように確認したらよいでしょうか？


以下の解決方法も例として挙げます。

1.各キャラクターカードに対して、クリックイベントを発火させるためのイベントリスナーを設定

[code]

    const characterCards = document.querySelectorAll(".character-card");
    
    characterCards.forEach(card => {
        card.addEventListener("click", () => {
            // カードの表示切り替えのロジックをここに記述
        });
    });
    
[/code]

2.クリックされたカードのみを表示するようにするために、他のカードを非表示にする処理

[code]

    characterCards.forEach(card => {
        card.addEventListener("click", () => {
            characterCards.forEach(otherCard => {
                if (otherCard !== card) {
                    otherCard.style.display = "none";
                }
            });
            card.style.display = "block";
        });
    });
    
[/code]

3.表示されているカードに対して、「戻る」ボタンを設置し、そのボタンをクリックした際に全てのカードを再度表示する処理を追加

[code]

    const backButton = document.querySelector("#back-button");
    
    backButton.addEventListener("click", () => {
        characterCards.forEach(card => {
            card.style.display = "flex";
        });
    });
    
[/code]


CC BY-SA 4.0
2023-01-17T11:47:26.720
93415
2023-01-17T11:47:26.720
56628
93356
answer