常連

ボタンホバーのcssがthreads.phpのclass="button"の削除、変更ボタンにしか効かなくて困っています。
boards.phpの削除、変更ボタンには効かないです。
他のボタンにもホバーのcssを効かせたいです。
htmlは同じだからなぜ他にかからないのかがわかりません。
アドバイスもらえると嬉しいです。
```html
//boards.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="/css/styles.css">
    <meta charset="utf-8">
    <title>メインページ</title>
    <h1>掲示板へようこそ</h1>
    <h2>新規投稿</h2>
  </head>
  <body>
  <section>
    <form action="" method="post">
      <label for="title">タイトル</label><br>
      <input type="text" name="title" id="title"><br>
      <button type="submit">部屋を立てる</button>
      <input type="hidden" name="token" value="29a27366d051dfe26cea26b9a13342519343257dd8fd7e5d3dfd9f3c4a489c28">
    </form>
    <h2>投稿一覧</h2>
    <p>現在の投稿は71件です</p>
    <div class="flexbox">
      <div class="posts">
        <a href='threads.php?boards_id=143'>
            ゆうき            2020-03-04 10:21:14 <br>
            質問          </a>
      </div>
      <div class="button">
        <form action="change.php" method="get">
          <button type="submit" name="boards_id" value="143">編集</button>
        </form>
        <form action="delete.php" method="get">
          <button type="submit" name="boards_id" value="143">削除</button>
        </form>
      </div>
    </div>
  </section>
  </body>
</html>

//threads.php
<html lang="ja">
  <head>
    <link rel="stylesheet" href="/css/styles.css">
    <meta charset="utf-8">
    <title>メインページ</title>
    <h1>掲示板へようこそ</h1>
    <h2>新規投稿</h2>
  </head>
  <body>
  <section>
    <form action="" method="post">
      <textarea name="comment" rows="8" cols="80"></textarea><br>
      <input type="hidden" name="token" value="d93215f0ef7108f6b68de279972f55b20147700817314e6df1d5343448f280c0">
      <button type="submit">送信</button>
    </form>
  </section>
  <section>
    <h2>投稿一覧</h2>
    <p>現在の投稿は1件</p>
    <div class="flexbox">
      <div class="posts">
        <p>
          ゆうき            2020-03-04 10:49:35<br>
          aaaaaaaa          </p>
      </div>
      <div class="button">
        <form action="change.php" method="get">
          <button type="submit" name="threads_id" value="38">編集</button>
          <input type="hidden" name="board_id" value="143">
        </form>
        <form action="delete.php" method="get">
          <button type="submit" name="threads_id" value="38">削除</button>
        </form>
      </div>
    </div>
  </section>
  </body>
</html>

```
```css
h1,h2,form{
  text-align:center;
}

body,form{
  margin:0;
}

a{
  color:blue;
}

.error{
  text-align:center;
  color:red;
}

button{
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 1px #67c5ff;
  border-radius: 3px;
  transition: .4s;
  outline:none;
}

.button{
  display:block;
}

.button :hover{
  background: #67c5ff;
  color: white;
}

.flexbox{
  display:flex;
}

.posts{
  background-color:#ffeecc;
  width:100%;
}

.posts:hover{
  background:#ffee;
}

.posts a{
  display:flex;
  height:100%;
  justify-content:center;
  align-items:center;
}

.posts p{
  display:flex;
  height:100%;
  justify-content:center;
  align-items:center;
  margin-top: 0;
}
```
```html
//threads.php
<div class="flexbox">
  <div class="posts">
    <p>
      aaa            2020-03-04 09:59:27<br>
      あああ
    </p>
  </div>
  <div class="button">
    <form action="change.php" method="get">
      <button type="submit" name="threads_id" value="35">編集</button>
      <input type="hidden" name="board_id" value="140">
    </form>
    <form action="delete.php" method="get">
      <button type="submit" name="threads_id" value="35">削除</button>
    </form>
  </div>
</div>

//boards.php
<div class="flexbox">
  <div class="posts">
    <a href='threads.php?boards_id=140'>
     aaa            2020-03-03 18:36:55 <br>
     質問
    </a>
 </div>
 <div class="button">
   <form action="change.php" method="get">
     <button type="submit" name="boards_id" value="140">編集</button>
   </form>
   <form action="delete.php" method="get">
     <button type="submit" name="boards_id" value="140">削除</button>
   </form>
 </div>
</div>
```

ボタンのcssが一部にしか効かない

### 実現したいこと
レスポンシブ対応させた上で、テキストをSVGのパスに沿って動かしたい。
（波線のかたちでテキストが無限ループすればそれでいいので、SVG含めやり方には特にこだわらない）

### 発生している問題・分からないこと
動かすところまでは実装できたので、スマートフォン表示用にレスポンシブ対応させたい。

svgからwidthとheightを削除、コンテナで囲って親要素にwidth:100%を設定してみましたがうまくいきませんでした。


SVGのパスに沿ってテキストを動かしたい

### 実現したいこと
左カラムに<h>と<p>、右カラムに画像を配置するグリッドレイアウトをしています。
この時、左カラムの要素の文字量だけの高さにしてgapを適用したいです。

### 発生している問題・分からないこと
下記コードでは本来、<h3>は1行分だけの高さを想定していますが、間を埋めるように高さに余白ができてしまっています。
これを、本来は1行分の高さのままgapを適用するようにしたいです。
ご教授お願いします。



### 該当のソースコード

```html
<div class="container">
  <div class="grid__wrapper">
    <h3 class="grid__ttl">ダミーダミーダミーダミーダミー</h3>
    <p class="grid__txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aliquid in dignissimos. Quibusdam iste autem, repellendus corporis laboriosam ducimus repudiandae at repellat quidem ipsum, suscipit a veritatis beatae exercitationem fuga.</p>
    <div class="grid__img"><img src="https://picsum.photos/id/237/400/400"</div>
  </div>
</div>
```

```css
p,h3{
  padding:0; margin:0;
}
.container{
  width:900px;
  height:100vh;
  background:#eee;
}

.grid__wrapper{
  display:grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  padding:32px 0 40px;
  background:green;
  gap:32px 20px;
/*   align-items:start; */
}


.grid__ttl{
  background:red;
}

.grid__txt{
  background:blue;
}
.grid__img{
  grid-row: span 2;
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
align-itemsプロパティを使えば要素の文字量に応じた高さになりますが、今度はgapがその分だけ埋めてしまうようです。

### 補足
可能であればhtml構造は変えないままCSSのみで実現したいです。


グリッドレイアウトで余分な余白ができてしまう

前回の続きです。お手数ですがよろしくお願いします。

コメントに基づきコードを変えてみました。
```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>単語帳</title>
</head>

<body>
    <h1>プログラミング必須英単語600+</h1>
    <input type="text" placeholder="単語">
    <input type="text" placeholder="意味">
    <button id="btn">登録</button>
    <p id="total">全0件</p>
    <table id="table">
        <tr>
            <th>単語</th>
            <th>意味</th>
        </tr>
        <tr>
            <td colspan=2 id="class">BASIC 300</td>
        </tr>
    </table>


    <style>
        h1 {
            font-family: "Yu Gothic";
        }

        /*idにテーブルがついている要素*/
        #table {
            /* テーブルの境界線を重ねて表示し、隣接するセルの境界線を1本にまとめる */
            border-collapse: collapse;
        }

        /*td要素とth要素*/
        td,
        th {
            /*1px実践の罫線(色は#333)*/
            border: 1px solid #333;
            /*上下0 左右10pxのパディング*/
            padding: 0 10px;
            /*テキストを中央揃えにする */
            text-align: center;
        }

        th {
            background: #0000ff;
            /*文字色を白に設定*/
            color: white;
        }

        #class {
            background: pink;
        }
    </style>


    <script>
        'use strict';

        //文書が読み込み終わったら処理を実行
        window.onload = () => {
            class Word {
                //コンストラクター
                constructor(en, ja) {
                    this.en = en;
                    this.ja = ja;
                }

                //メソッド
                showInfo() {
                    return `<td>${this.en}</td><td>${this.ja}</td>`;
                }
            }

            //input要素をNodeListとして取得
            const inputs = document.querySelectorAll('input');
            //セレクタをもとに要素を取得
            const btn = document.querySelector('#btn');
            const total = document.querySelector('#total');
            const table = document.querySelector('#table');

            //空の配列を準備
            let list = [];

            //localStorageからwordsというキーがついた項目を取得
            const loadData = localStorage.getItem('words');

            //データがあれば
            if (loadData !== null) {
                //取得したJSON形式のデータをオブジェクトの配列に変換
                const words = JSON.parse(loadData);
                //配列から1件ずつwordとして取り出す
                words.forEach((word) => {
                    //listにWordインスタンスを追加
                    list.push(new Word(word.en, word.ja));
                });
                updateTable();
            }

            //btnにクリックイベントを登録
            btn.addEventListener('click', () => {
                // 入力値を取得(前後についた無駄なスペースを除去)
                const enValue = inputs[0].value.trim();
                const jaValue = inputs[1].value.trim();

                if (enValue === '' || jaValue === '') {
                    alert('単語と意味を両方入力してください。');
                    return;  // 入力が不正な場合は処理を中断
                }

                //Wordインスタンスを作成
                let word = new Word(enValue, jaValue);
                //インスタンスを配列に追加
                list.push(word);
                //すべてのinput要素を空欄にする
                inputs.forEach((input) => {
                    input.value = '';
                });
                updateTable();
                //配列の単語リストをJSON形式に変換し、localStorageに保存
                localStorage.setItem('words', JSON.stringify(list));
            });

            function updateTable() {
                //見出し行を作成
                table.innerHTML = '<tr><th>単語</th><th>意味</th></tr>';
                table.innerHTML += '<tr><td>BASIC 300</td></tr>';

                //配列から1件1件取り出しながら処理を行う(取り出した1件をwordとして扱う)
                list.forEach((word) => {
                    //tr要素を作成
                    let tr = document.createElement('tr');
                    //trの子要素をhtmlが含まれた文字列で設定
                    tr.innerHTML = word.showInfo();
                    //table要素の子要素として作成したtr要素を追加
                    table.appendChild(tr);
                });

                //total要素のテキストコンテントを設定
                total.textContent = `全${list.length}件`;
            }

            updateTable();
        };
    </script>

</body>

</html>
```
結果は以下のようになり、表の重複は解消されています。
しかし、BASIC 300のcolspan(２２行）とCSS加飾が無くなっています。
どうやったら戻せますか？
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-26/8590bcf8-1e0b-4442-b6d4-3ada12c020d3.png)

以前は
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-26/a9f9edce-d86a-45ea-ae8b-5c6a5f900d11.png)



ローカルストレージに保存可能に　続き

## テーマ、知りたいこと

HTMLコーダーに求められるスキルとその将来性

## 背景、状況

実務経験１年半のHTMLコーダーがこれからどこの会社にでも務められるようにするには、これからどのような技術を身につけたほうがよいでしょうか
もしくは、HTMLコーダーという職種はノーコードツールなどの復旧により淘汰される可能性があるでしょうか

現在自分の将来について悩んでいるHTMLコーダーです
HTML・CSSの初歩的な部分は学校で学んでいたためほぼ独学で１年半コーディングをしており、Javascriptや難しいCSSに関してはコピーペーストで済ませています
WordPressの実装も行いますが、これも会社にひな形のようなものがあり、コピーペーストで済ませています
職場はWEB制作会社ですがデザイン重視のため、コーディングについてはデザインさえ正確に表現できればいいとのことで誰かにコードを見てもらったりしたことがありません

様々なサイトのコードを見ているとSCSSを使用したり自分で考えてJavascriptを書いたりしている様子が見受けられ、HTMLとCSS以外のことが身についていない現状に焦りを感じています
また、WordPressの実装についてはサイトのコードを見るだけではわからないことも多いです
自分で色々調べてSCSSなどを取り入れてみようとも思ったのですが、「上司のコーディングのやり方を真似る」ような明確な指標がないため検索して出てきた方法を信用していいのか、これは実際に現場で使われているものなのかがわからず、尻込みしています

具体的な悩みとしては、今後のことです
今のままこの職場にいるともし今の会社が倒産した時に実力不足で同職での再就職は敵わないのではないかと不安に思っています

1.自分の力量をあげるべくコーディングに特化したWEB制作会社に転職して同職の人がいる環境に身を置きコーディングの腕をあげ、どこでも自信を持って働けるような人間になる
2.訓練校の情報を見ているとシステムエンジニアやアプリケーションエンジニアに関する訓練があることを知りました（基本情報処理などが受験できる）これを受けて自分にできることを増やすか
3.ノーコードツールやAIによってただのHTMLコーダーは必要なくなるのではないか、全く違う職種に転職するべきか

この3点で悩んでいます

現職でHTMLコーダーをされている方はどのような状況で技を磨いていますか。現状に不安はありませんか
WEB制作会社で働いている方々、HTMLコーダーの将来はどうなると思いますか

勉強方法、転職のすすめ、身につけるべきスキル、現場で求められるレベルとはどのようなものなのか、等なんでもいいのでご意見をください



HTMLコーダーに求められるスキルとその将来性

### 実現したいこと
・ハンバーガーメニュー
・押したらメニューを順番に表示するのを何度やっても問題なく挙動するようにしたい

### 前提
ハンバーガーメニューを実装中です。
ボタンを押した際に順番に表示されるようになったのですが、１度閉じて２回目に開くと文字がすでに出ている状態になります。
それを解決したいです。

### 該当のソースコード

```HTML
    <header>
        <div class="head_container">
        <div class="head_logo">
            <h1>
                タイトル
            </h1>
        </div>
        <div class="head_nav">
            <nav>
            <ul>
                <li><a href="#">メニュー１</a></li>
                <li><a href="#">メニュー２</a></li>
                <li><a href="#">メニュー３</a></li>
                <li><a href="#">メニュー４</a></li>
                <li><a href="#">メニュー５</a></li>
                <li><a href="#">メニュー６</a></li>
                <li><a href="#"><p>メニュー７</p></a></li>
            </ul>
            </nav>
        </div>
        <div class="hamburger_box">
            <button class="hamburger">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </button>
        </div>
        </div>
    </header>

  <div class="menu">
    <ul>
       　　　<li><a href="#">メニュー１</a></li>
　　　　　　<li><a href="#">メニュー２</a></li>
                <li><a href="#">メニュー３</a></li>
                <li><a href="#">メニュー４</a></li>
                <li><a href="#">メニュー５</a></li>
                <li><a href="#">メニュー６</a></li>
                <li><a href="#"><p>メニュー７</p></a></li>
    </ul>
  </div>

```

```SCSS
header {
  position: fixed;
  width: 100%;
  z-index: 2;
  background-color: white;
  .head_container {
    height: 90px;

    @media (min-width: $bp1) {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 0.6rem;
    }
    @media (min-width: $bp2) {
      margin: 0 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @media (min-width: $bp3) {
      height: 90px;
      display: flex;
      justify-content: space-between;
      margin: 0 4rem;
      padding-top: 1rem;
    }
    .head_logo {
      flex: 3.2;
      display: flex;
      align-items: center;
      h1 {
        a {
        }
      }
    }

    .head_nav {
      flex: 6.8;
      @media (min-width: $bp1) {
        display: none;
      }
      @media (min-width: $bp2) {
        display: none;
      }
      @media (min-width: $bp3) {
        display: flex;
        justify-content: end;
      }

      nav {
        height: 100%;

        ul {
          padding-left: 0;
          display: flex;
          align-items: center;
          height: 100%;
          margin: 0;
          column-gap: 1.6rem;
          justify-content: end;

          li {
            color: #222;
            list-style-type: none;

            a {
              color: #222;
              font-size: 1.5rem;
              text-decoration: none;
              position: relative;
              &::after {
                background-color: currentColor;
                bottom: -6px;
                content: "";
                height: 2px;
                left: 0;
                position: absolute;
                transform: scale(0, 1);
                transform-origin: right top;
                transition: transform 0.3s;
                width: 100%;
              }

              &:hover::after {
                transform-origin: left top;
                transform: scale(1, 1);
              }

              &:hover {
                color: #f78471; // ホバー時の色
              }
            }

            &:last-child {
              background-color: #f78471;
              border-radius: 25px;
              a {
                color: white;
                p {
                  margin: 0;
                  padding: 0.6rem 2rem;
                }
              }
            }
          }
        }
      }
    }
    .hamburger_box {
      @media (min-width: $bp1) {
        display: flex;
        align-items: center;
      }
      @media (min-width: $bp2) {
        display: flex;
        align-items: center;
      }
      @media (min-width: $bp3) {
        display: none;
      }
      .hamburger {
        position: relative;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background: none;
        padding: 0;
        @media (min-width: $bp1) {
          display: flex;
          align-items: center;
        }
        @media (min-width: $bp2) {
          display: flex;
          align-items: center;
        }
        @media (min-width: $bp3) {
          display: none;
        }
        cursor: pointer;
        .line {
          position: absolute;
          display: block;
          width: 50px;
          height: 2px;
          background-color: #000000;
          transition: all 0.15s linear;
          margin: 6px auto;
          &:nth-child(1) {
            transform: translateY(-12px) rotate(0deg); // 上の線の初期位置
          }

          &:nth-child(2) {
            transform: translateY(0) rotate(0deg); // 真ん中の線の初期位置
          }

          &:nth-child(3) {
            transform: translateY(12px) rotate(0deg); // 下の線の初期位置
          }
        }

        &.open {
          .line {
            &:nth-child(1) {
              transform: translateY(0) rotate(45deg); // 上の線が中央に移動して回転
            }

            &:nth-child(2) {
              opacity: 0; // 真ん中の線を非表示
            }

            &:nth-child(3) {
              transform: translateY(0) rotate(-45deg); // 下の線が中央に移動して回転
            }
          }
        }
      }
    }
  }
}

.menu {
  ul {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column; // 縦方向にリストを配置
    justify-content: center;
    align-items: center; // リスト項目を左寄せ
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 90px;
    left: -100vw; // 初期位置を画面左外
    width: 100vw;
    height: 100vh;
    background-color: #ffffff; // 背景色（必要に応じて変更）
    opacity: 0; // 初期状態で非表示
    transition: all 0.3s ease-in-out;
  }
  li {
    display: flex;
    align-items: center;
    justify-content: center; // 左寄せ
    padding: 1rem 2rem; // 項目の余白
    transform: translateX(-50px); // 左にオフセット
    opacity: 0; // 初期状態で非表示
    transition: opacity 0.5s ease, transform 0.5s ease; // スムーズなアニメーション

    a {
      text-decoration: none;
      font-size: 3rem;
      color: #000000; // テキスト色
      transition: color 0.3s ease-in-out;
      position: relative;
      &::after {
        background-color: currentColor;
        bottom: -6px;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform 0.3s;
        width: 100%;
      }

      &:hover::after {
        transform-origin: left top;
        transform: scale(1, 1);
      }

      &:hover {
        color: #f78471; // ホバー時の色
      }

      p {
        margin: 0; // `<p>`タグのマージンをリセット
      }
    }

    // 各項目の遅延設定
    &:nth-of-type(1) {
      transition-delay: 0.1s;
    }

    &:nth-of-type(2) {
      transition-delay: 0.2s;
    }

    &:nth-of-type(3) {
      transition-delay: 0.3s;
    }

    &:nth-of-type(4) {
      transition-delay: 0.4s;
    }

    &:nth-of-type(5) {
      transition-delay: 0.5s;
    }

    &:nth-of-type(6) {
      transition-delay: 0.6s;
    }

    &:nth-of-type(7) {
      transition-delay: 0.7s;
    }

    &:nth-of-type(8) {
      transition-delay: 0.8s;
    }
  }

  &.open {
    ul {
      left: 0; // メニュー全体を画面内に表示
      opacity: 1; // 表示状態にする
    }

    li {
      transform: translateX(0); // 左オフセットを解除
      opacity: 1; // 表示する
    }
  }

  @media (max-width: $bp2) {
    ul {
      padding: 1rem; // モバイル用の余白
    }

    li {
      width: 100%; // モバイルではリスト幅を全体にする
    }
  }
}
```

```JS
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', () => {
    toggleClasses();
});


function toggleClasses() {
  hamburger.classList.toggle('open');
    menu.classList.toggle('open');
}

const menuBtns = document.querySelectorAll('.acordion-btn');
const menuLists = document.querySelectorAll('.acordion');

menuBtns.forEach((element, index) => {
  element.addEventListener('click', function () {
    menuBtns[index].classList.toggle('is-open');
    menuLists[index].classList.toggle('is-open');
  });
});

// 順番にスライドインする関数
function slideInMenuItems() {
  menuItems.forEach((item, index) => {
    setTimeout(() => {
      item.style.opacity = '1';
      item.style.transform = 'translateX(0)';
    }, index * 100); // 各要素に100msの遅延
  });
}

// 順番にスライドアウトする関数
function slideOutMenuItems() {
  menuItems.forEach((item, index) => {
    setTimeout(() => {
      item.style.opacity = '0';
      item.style.transform = 'translateX(-50px)';
    }, index * 100); // 各要素に100msの遅延
  });
}
```

### 試したこと
当初はSCSSだけでやっていましたが、明らかに動きが悪いのでJSを使ったのですが直りませんでした。


時間差で表示をさせたいが、途中で出てきてしまう

今はフラッシュカードをやっていますが
```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            margin: 0;
            background: #e0e0e0;
            text-align: center;
            font-family: Verdana, sans-serif;
            color: #fff;
        }

        #btn {
            width: 200px;
            margin: 0 auto;
            padding: 7px;
            border-radius: 5px;
            background: #00aaff;
            box-shadow: 0 4px 0 #0088cc;
            cursor: pointer;
        }

        #btn:hover {
            opacity: 0.8;
        }

        #card {
            margin: 60px auto 20px;
            width: 400px;
            height: 100px;
            cursor: pointer;
            font-size: 38px;
            line-height: 100px;
            perspective: 100px;
            transform-style: preserve-3d;
            transition: transform 0.8s;
        }

        #card-front,
        #card-back {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            position: absolute;
            backface-visibility: hidden;
        }

        #card-front {
            background: #fff;
            color: #333;
        }

        #card-back {
            background: #00aaff;
            transform: rotateY(180deg);
        }

        .open {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div id="card">
        <div id="card-front"></div>
        <div id="card-back"></div>
    </div>
    <div id="btn">NEXT</div>


    <script>
        (function () {
            'use strict';

            let words = [
                { 'en': 'read', 'ja': '読む' },
                { 'en': 'write', 'ja': '書く' },
                { 'en': 'eat', 'ja': '食べる' },
                { 'en': 'run', 'ja': '走る' },
                { 'en': 'walk', 'ja': '歩く' }
            ];

            let card = document.querySelector('#card');
            let cardFront = document.querySelector('#card-front');
            let cardBack = document.querySelector('#card-back');
            let btn = document.querySelector('#btn');

            card.addEventListener('click', function () {
                flip();
            });
            btn.addEventListener('click', function() {
                next();
            })

            function next() {
                let num = Math.floor(Math.random() *words.length);
                cardFront.innerHTML = words[num]['en'];
                cardBack.innerHTML = words[num]['ja'];
            }

            next();

            function flip() {
                card.className = card.className === '' ? 'open' : '';
            }
        })();
    </script>
</body>

</html>
```

このまま実行したらカードの表面が表示されて、70行目にclass="open"を追加したらカードの裏面が表示されますが、110行が機能しているということで合ってます？
分かりづらいので70行目は常に<div id="card" class="open">としたいです。
デフォルトで表面が表示されたら良いと思うのですが、どうしたら良いですか？

70行目を<div id="card" class="open">にして、
110行目をcard.className = card.className === 'open' ? 'open' : '';にしても裏面が表示されます。




classNameが空文字だったらとはどういう状態？

### 実現したいこと
レスポンシブ対応前
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-01/92a65746-3ee1-47fd-bf0c-bbd506d44fbc.png)

レスポンシブ対応後
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-01/4b928215-0288-4832-8373-9a98d50b617c.png)



### 発生している問題・分からないこと
レスポンシブ対応後でもレスポンシブ対応前と同じような表を作成したのですが、どうしても、黒色の長方形の要素が変わってしまいます、どのようなコードを入力するとレスポンシブ対応前後で同じような表を作成することができるでしょうか。
また、max-width: 821;の際には表の形を他の物にした方がいいのか教えてください、よろしくお願いします。

回答のコードを入力後
[リンク内容](![url](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-01/5120c100-cf40-4730-8e2f-bd5d3d816323.png))



### 該当のソースコード

```
https://codepen.io/Yg-K-the-typescripter/pen/mdNKdeK
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
marginやpaddingを調整して要素の左端をそろえたが適用されない箇所があり微妙にそろわなくなった。

### 補足
特になし