常連

### 実現したいこと
クリック1回目に要素を180度右回りに回転させて、クリック2回目は180度右回りで元の状態に戻り、これを繰り返しできるようなアニメーションを実現したいです。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-11/8df1c682-fd76-4770-8ffa-5d23d907ca2f.png)

### 発生している問題・分からないこと
1回目のクリック時に180度回転はできましたが、そこからさらにクリック2回目に180度回転させる方法が分からない状態です。



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

```html、css
<!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="styles.css">
  <style type="text/css">
    /* 回転アニメーションの定義 */
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* 回転する要素のスタイル */
.rotate-box {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: 50px auto;
  cursor: pointer;
}

/* チェックボックスがチェックされたときに回転アニメーションを適用 */
#rotateToggle:checked + .rotate-box {
  animation: rotateAnimation 1s ease-in-out forwards;
}
  </style>
</head>
<body>
  <div>
    
    <input type="checkbox" id="rotateToggle" hidden>
  
    
    <label for="rotateToggle" class="rotate-box">testtest</label>
  </div>
</body>
</html>
```

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

##### 上記の詳細・結果
2回目をクリックするとアニメーションなしで元の状態に戻るので、1回目の回転した角度を記憶させる？ようなコードを作るんでしょうか？

### 補足
特になし

クリック時に要素を回転させる

現在ウェブデザイン勉強中の初学者なのですが、勉強の方法に悩んでいます。
udemyの講座を受けているんですが概念や書き方を学んでもすぐに忘れてしまうため、練習問題などで実践的に書いて定着させたいと考えていますが自分のレベルにあった問題が載ったサイトをなかなか見つけられません。

例えばテーブルタグの書き方を学んだらその問題を解くというようにひとつずつ学校の勉強のように基本的なことから初めて徐々にレベルを上げて進めようと考えていますが丁寧すぎだと思いますか？

無料有料問わず実践的に初人者向けの数をこなせる本やサイトはありますか？

皆さんはどのように学習しましたか？


HTML　CSSの勉強方法

### 実現したいこと
ハンバーガーメニュー内のドロップダウンメニューをクリックした際に、サブメニューが表示されるようにしているのですが、これを動きのある感じにしたいです。
イメージとしては、PC画面でのドロップダウンメニューをホバーした際に表示されるサブメニューの動きをハンバーガーメニュー内でも同じ動きを加えたいです。

### 発生している問題・分からないこと
クリックした際に表示されるまではできましたが、動きを加えるにはどこをどう書き加えればいいのでしょうか？



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

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="css/destyle.css"> 
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
 
  <header class="l-header p-header">
    <div class="p-header__inner">
      <img src="img.png" class="header_logo">
      <div class="p-header__hamburger">
        <button class="c-hamburger">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <nav class="p-header__nav p-nav">
        <div class="p-nav__inner">
          <ul class="p-nav__list">
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>
            <li class="p-nav__item p-nav__item--acMenu">
              <p href="" class="p-nav__link">
                メニュー
              </p>
              <ul class="p-nav__middle">
                <li class="p-nav__middleItem">
                  <a href="" class="p-nav__link p-nav__middleLink">メニュー</a>
                </li>
                <li class="p-nav__middleItem">
                  <a href="" class="p-nav__link p-nav__middleLink">メニュー</a>
                </li>
              </ul>
            </li>
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>

          </ul>
        </div>
      </nav>
    </div>
  </header>

  <main>
    メインコンテンツ
  </main>
  <footer>フッター</footer>
</body>
<script type="text/javascript" src="js/javascript.js"></script>
</html>
```

```css
main {
  background-color: skyblue;
  width: 100%;
  height: 1000px;
}

footer {
  width: 100%;
  height: 100px;
  background-color: rgb(249, 205, 121);
}

.header_logo{
  width: 5rem;
}

/* パターン3 */
.l-header {
  display: block;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: #333;
}


.c-hamburger {
  position: relative;
  width: inherit;
  height: inherit;
  margin: 0;
  border: transparent;
  background-color: transparent;
  cursor: pointer;
}


.c-hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 24px;
  height: 2px;
  transform: translateX(-50%);
  background: black;
  transition: all 0.4s;
}

.c-hamburger span:nth-of-type(1) {
  top: -4px;
}

.c-hamburger span:nth-of-type(2) {
  top: 1px;

  transform: translateX(-0.45deg);
}

.c-hamburger span:nth-of-type(3) {
  top: 6px;
  transform: translateX(-0.45deg);
}



.c-hamburger.is-active span:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
}

.c-hamburger.is-active span:nth-of-type(2) {
  opacity: 0;
}

.c-hamburger.is-active span:nth-of-type(3) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
}




.p-header__nav {
  display: flex;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;

  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: transparent;
  opacity: 0;
  transition: opacity .3s;
}

.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  padding-left: 20px;

}




.p-header__hamburger {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: 95px;
  height: 100%;
}

.p-header__nav.is-active {
  position: fixed;
  top: 0;
  right: 0;
  opacity: 1;
  background-color: #fff;
}



.p-nav__list {
  display: block;
  padding-right: 20px;
  padding-left: 20px;


}

.p-nav__item {
  display: inline-block;
  position: relative;
  transition: .4s;
}


.p-nav__link {
  color: #fff;
  display: block;
  padding: 20px;
  cursor: pointer;

}

.p-nav__item.p-nav__item--acMenu>.p-nav__link {
  position: relative;
}

.p-nav__item.p-nav__item--acMenu>.p-nav__link::after {
  position: absolute;
  content: "▼";
  right: 0;
  top: 50%;
  transform: translateY(-50%);

}


.p-nav__middle {
  display: none;
}

.p-nav__middleItem a::before {
  margin-right: 8px;
  margin-left: 8px;
  content: "-";
}


.p-nav__item.is-open .p-nav__middle {
  display: block;
}

@media screen and (min-width: 768px) {

  .p-header__hamburger {
    display: none;
  }

  .p-nav__inner {
    margin-right: auto;
    margin-left: auto;
    max-width: initial;
    width: 100%;

  }

  .p-header__nav {
    position: static;
    opacity: 1;
    height: inherit;
    width: initial;
    width: 100%;
    max-width: fit-content;
  }

  .p-nav__list {
    padding-right: 0;
    padding-left: 0;
    display: flex;
    flex-direction: row;

  }
  .p-nav__item {
    padding: 0 1rem;
  }
  .p-nav__item ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 0;
  }
  .p-nav__list .p-nav__item:last-child{
    background: #081231;
  }
  .p-nav__list .p-nav__item:last-child a{
    color: #fff;
  }


  .p-nav__item ul li {
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 0.1s;
  }

  .p-nav__item ul li a {

    display: flex;
    align-items: center;
    padding: 13px 20px 13px 10px;
    color: #fff;
  }
  
  .p-nav__list .p-nav__item:hover{
    background: #1b3a72;
  }
  .p-nav__item:hover>ul>li {
    height: 48px;
    overflow: visible;
    background-color: rgba(44, 192, 255, 0.6);
  }

  .p-nav__item:hover>ul>li:not(:first-child) {
    border-top: 1px solid #fff;
  }

  .p-nav__item:hover>ul>li.p-nav__middleItem:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .p-nav__item:hover>ul>li.p-nav__middleItem:hover a {
    color: #2C2C2C;
  }

  .p-nav__middle {
    display: block;
    text-align: left;
  }

  .p-nav__middleItem {
    position: relative;
  }

  .p-nav__middleItem a {
    position: relative;
    white-space: nowrap;
  }

}

@media screen and (max-width: 767px){
  .p-nav__inner{
    display: flex;
    justify-content: center;
  }
  .p-nav__list {
    width: 50%;
  }
  .p-nav__item {
    width: 100%;
  }
  .p-nav__link {
    color: #2e61b3;
  }
}
```

```JavaScript
document.addEventListener('DOMContentLoaded', function () {
  const hamburger = document.querySelector('.c-hamburger');
  const headNav = document.querySelector('.p-header__nav');


  if (!hamburger) {
    return false;
  }

  hamburger.addEventListener('click', () => {
    if (hamburger.classList.contains("is-active")) {
      hamburger.classList.remove('is-active');
      headNav.classList.remove('is-active')
    } else {
      hamburger.classList.add('is-active');
      headNav.classList.add('is-active')
    }

  });

  headNav.addEventListener('click', () => {
    hamburger.classList.remove('is-active');
    headNav.classList.remove('is-active')
  });
});




document.addEventListener('DOMContentLoaded', function() {

  const acMenuItems = document.querySelectorAll('.p-nav__item--acMenu');

  acMenuItems.forEach(item => {

    item.addEventListener('click', function(event) {

      event.stopPropagation();

      item.classList.toggle('is-open');
    });
  });

  document.addEventListener('click', function(event) {

    acMenuItems.forEach(item => {

      if (!item.contains(event.target)) {
        item.classList.remove('is-open');
      }
    });
  });
});
```

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

##### 上記の詳細・結果
自分なりに色々と変更をしてみましたがうまく動きませんでした。
jQueryのプラグイン等を使った方が早いのでしょうか？

### 補足
特になし

ドロップダウンメニューをぬるっと動くようにしたい

### 実現したいこと
スクロールすると右側の目次が追従し、sectionごとに目次部分が切り替わるような仕様を作りたいです。
section1にいる場合は目次「①」に背景色が加わり、そのsectionの見出し文が表示されるような感じです。
section2以降にスクロールした場合は、目次「①」の背景色と見出し文がなくなり、「②」の背景色と見出し文が表示されるような仕様です。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/99c1864e-5e9a-458c-8dc8-5cef23cfdd71.png)


### 発生している問題・分からないこと
https://www.bring-flower.com/blog/fixed-and-highlighted-toc/
BringFlowerさんのコードを参考にしました。

olタグの幅を縮めて無理やり縦書きにして、上記のようなものを実現しようと試みましたが、上手くいきません。
JavaScriptにまだまだ乏しく、どのように書けば再現できますでしょうか？
どうかよろしくお願いします。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/f70979c5-c6ae-4971-880b-82bcb3512c1e.png)

※追加しました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/7750e11f-f5e4-4710-9427-25cfef3329c1.png)

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

```html、css、JavaScript
<meta name="robots" content="noindex,nofollow" />
<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">

  <style media="screen">
    section.toc-demo{
      margin: 0 auto;
    }
    h2{
      font-size: 20px;
      background-color: #f3f3f3;
      border-bottom: 3px solid #333;
      padding: 5px 0 5px 10px;
    }
    p{
      padding-left: 10px;
    }
    ol{
      width: 43px;
      position: fixed;
      top: 4vh;
      right: 25px;
    }
    li{
      list-style-type:none;
    }
    a{
      display: block;
      width: 100%;
      color: #fff;
      margin-bottom: 1px;
      text-decoration: none;
      padding: 3px 5px 3px 10px;
    }
    a.current{
      background-color: #dd5eb3;
      color: #000;
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
    }
    .top{
      width: 100%;
      height: 70vh;
      background-color: #fbb03b;
    }
    .writing-mode{
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
    }

    .content{
      width: 100%;
      height: 100vh;
    }
    .toc-demo .content:nth-child(2){
      background: #8cc63f;
    }
    .toc-demo .content:nth-child(3){
      background: #0092ff;
    }
  </style>
</head>

<body>
  <section class="top">TOP</section>
  <section class="toc-demo">
    <div class="content">
      <h2 class="h2test">見出し１</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し２</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し３</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し４</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し５</h2>
    </div>
</section>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    const headings = document.querySelectorAll('.h2test');
let toc = '<ol id="fixed-toc">';

headings.forEach( function(heading, index) {
  heading.id = 'heading-0' + (index+1);
  let id = heading.id;
  toc = toc + '<li><a href="#' + id + '">' + heading.textContent + '</a></li>';
});

toc = toc + '</ol>';
document.querySelector('.toc-demo').insertAdjacentHTML('afterbegin', toc);

window.addEventListener('scroll', function() {
    let scroll = window.scrollY;//スクロール量を取得
    let hight = window.innerHeight;//画面の高さを取得
    let offset = 400;//どの時点で現在表示されている見出しとするかの調整値
    const toc_completed = document.getElementById('fixed-toc');

    headings.forEach( function( heading , index) {
        let i = index + 1;
        let target = document.querySelector('#fixed-toc li:nth-of-type(' + i + ') > a');
        let pos = heading.getBoundingClientRect().top + scroll;//見出しの位置

        if ( scroll > pos - hight + offset ) {//スクロール量が見出しを超えた

            if (headings[index + 1] !== undefined){// 次の見出しがある＝最後の見出しではない

                let next_pos = headings[index + 1].getBoundingClientRect().top + scroll;//次の見出しの位置
                if ( scroll > next_pos - hight + offset ) { // スクロール量が次の見出しも超えている
                    target.classList.remove('current');
                } else if (target.classList.contains('current') == true) { // すでにcurrentがついている
                    return;
                } else if ( i == 1 && toc_completed.classList.contains('active') == false ){// 1つ目
                    target.classList.add('current')
                    toc_completed.classList.add('active')
                } else { // 次の見出しは見えてない
                    target.classList.add('current');
                }

            } else { //最後の見出しの時
                target.classList.add('current');
            }
        } else { //スクロール量が見出しを超えてない
            target.classList.remove('current');
            if ( i == 1 && toc_completed.classList.contains('active')){ //１つ目に到達していない場合
                toc_completed.classList.remove('active')
            }
        }
    });
});
  </script>



</body>

</html>

```

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

##### 上記の詳細・結果
JavaScript内のheading.textContentが見出し文だと思うのですが、だけ表示するには新たにif文を加えていけばいいのでしょうか？
目次の数字は見出しには書かないようにしたいのですが、いまいちやり方がわかりません...。

### 補足
特になし

【HTML】目次の作成について

目的：自分のサイトにてフィルをダウンロードできるように設定したい
そのためFileZillaを使用しファイルをアップしようと考えています
1，FileZillaでアップロードできるファイルの種類に制限はありますか？
　例えば、エクセルやワード、PDFなどです
2，ファイルをアップする場所（階層）に決まりはありますか
3，そのほか気を付ける点があればご教示いただけると幸いです
以上よろしくお願いいたします。

FileZillaでアップロードできるファイルの種類とアップする場所についてご質問です

### 実現したいこと
スクロールしたら画像がフェードインするようにしたいです。

### 発生している問題・分からないこと
他サイトでのコードを参考に、色々としてみたのですが、script部分ののスクロールしたら表示するコードが何故か効きません。



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

```html、css、JavaScript
<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex,nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css">
    <script src="https://kit.fontawesome.com/78355c9515.js" crossorigin="anonymous"></script>

    <style media="screen">
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
/*------------------------*/
/*------------------------*/
/*------- layout -------*/
.box {
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  padding: 10vw;
  list-style: none;
}
li {
  margin-bottom: 400px;
  }
li img {
    max-width: 100%;
  }

/*------- base -------*/
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック", "YuGothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif;
  font-size: 16px;
  color: #333;
  padding-bottom: 200px;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
  margin:0;
  font-weight: normal;
}
p {
  margin: 30vw auto 40vw;
  color: #555;
  font-family: 'Marcellus', serif;
  font-size: 2.0rem;
  text-align: center;
}
p::after {
    content: '\f063';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 1.2rem;
    padding-top: 10px;
  }

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
    </style>
</head>

<body>

<p>SCROLL DOWN</p>
<ul class="box">
  <li class="scroll_up"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
  <li class="scroll_left"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
  <li class="scroll_right"><img src="https://dl.dropbox.com/s/u7oy8t9i29br79c/20210620.jpg?dl=0" alt=""></li>
</ul>


    <script>
//scroll_effect
$(window).scroll(function () {
  var scrollAnimationElm = document.querySelectorAll('.scroll_up , .scroll_left , .scroll_right');
  var scrollAnimationFunc = function () {
    for (var i = 0; i < scrollAnimationElm.length; i++) {
      var triggerMargin = 150;
      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
        scrollAnimationElm[i].classList.add('on');
      }
    }
  }
  window.addEventListener('load', scrollAnimationFunc);
  window.addEventListener('scroll', scrollAnimationFunc);
});
    </script>


</body>

</html>
```

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

##### 上記の詳細・結果
どういった理由で効いていないのでしょうか？

### 補足
特になし

scriptのスクロール処理が効かない

### 実現したいこと
アコーディオンメニューをクリックして開閉した際、右端につけたアイコンを右回りに半回転したいです。

### 発生している問題・分からないこと
上記のような内容は参考サイトやほかの皆様のご助力もあって大方完成しましたが、最初にクリックをしていないのに勝手に半周してしまうのを止めるべく、scriptを付けましたが、動かなくなってしまいました。
勝手に半周してしまうのを止めるにはここからどうすればよろしいでしょうか？

よろしくお願いいたします。




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

```html、css、JavaScript
<meta name="robots" content="noindex,nofollow" />
<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">

<style>
/*カテゴリーボタン*/
.button02 {
  margin-left: 8rem;
/*transform: rotate(90deg);*/
}
.button_animation{
  transform: rotate(90deg);
}
.button02 {
  /* スタイル用 */
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #00a0e9;
  /* スタイル用 */

  position: relative;
}

.button02:before,
.button02:after {
  position: absolute;
  content: '';
}

.button02:before {
  top: 14px;
  left: 6px;
  width: 10px;
  height: 1px;
  background: #00a0e9;
}
.button02:after {
  top: 11px;
  left: 16px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 5px solid #00a0e9;
}
.acd-check{
    display: none;
}
.acd-label{
  background: #e5f5fd;
  margin-bottom: 1px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label .button_animation .clicked {
  animation: rotateAnimation .5s ease-out forwards;
}
.acd-check + .acd-label .button_animation .clicked {
  animation: rotateAnimation2 .5s ease-in-out forwards;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(270deg);
  }
}
@keyframes rotateAnimation2 {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(90deg);
  }
}

.acd-check:checked + .acd-label + .acd-content{
    height: 50px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}
</style>

</head>

<body>
<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label t-font25" for="acd-check1">クリックで開く1<i class="button02 button_animation"></i></label>
<div class="acd-content"><p>hello.world!</p></div>
        
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">クリックで開く2<i class="button02 button_animation"></i></label>
<div class="acd-content"><p>hello.world2!</p></div>
        
<input id="acd-check3" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check3">クリックで開く3</label>
<div class="acd-content"><p>hello.world3!</p></div>
        
<input id="acd-check4" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check4">クリックで開く4</label>
<div class="acd-content"><p>hello.world4!</p></div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
const t = document.querySelector(".acd-check");
const a = document.querySelector(".button_animation");
t.addEventListener("click", (event) => {
  a.classList.add("clicked");
});
</script>

</body>
</html>

```

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

##### 上記の詳細・結果
前回質問をして、いただいたコードを参考に自分なりにアレンジをしてみましたが、上手くいきませんでした。
お教え頂ければ幸いです。

### 追記しました。

```html、css、JavaScript
<meta name="robots" content="noindex,nofollow" />
<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">

<style>
/*カテゴリーボタン*/
.button02 {
  margin-left: 8rem;
/*transform: rotate(90deg);*/
}
.button_animation{
  transform: rotate(90deg);
}
.button02 {
  /* スタイル用 */
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #00a0e9;
  /* スタイル用 */

  position: relative;
}

.button02:before,
.button02:after {
  position: absolute;
  content: '';
}

.button02:before {
  top: 14px;
  left: 6px;
  width: 10px;
  height: 1px;
  background: #00a0e9;
}
.button02:after {
  top: 11px;
  left: 16px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 5px solid #00a0e9;
}
.acd-check{
    display: none;
}

.acd-label{
  background: #e5f5fd;
  margin-bottom: 1px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}

.acd-check:checked + .acd-label + .acd-content{
    height: 50px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}
.click1{ transform: rotate(270deg);transition: .5s;}
.click2{ transform: rotate(450deg);transition: .5s;}
</style>

</head>

<body>
<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label t-font25" for="acd-check1">クリックで開く1<i class="button02 button_animation"></i></label>
<div class="acd-content"><p>hello.world!</p></div>
        
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">クリックで開く2<i class="button02 button_animation"></i></label>
<div class="acd-content"><p>hello.world2!</p></div>
        
<input id="acd-check3" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check3">クリックで開く3</label>
<div class="acd-content"><p>hello.world3!</p></div>
        
<input id="acd-check4" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check4">クリックで開く4</label>
<div class="acd-content"><p>hello.world4!</p></div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
const a = document.querySelector(".button_animation");
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('.button_animation:not(.running)')){
    t.classList.toggle('click1');
    t.classList.toggle('click2',!t.classList.contains('click1'));
  }
});
addEventListener("transitionstart", e=>{
  const t=e.target;
  t.classList.add('running');
});
document.addEventListener("transitionend",e=> {
  const t=e.target;
  t.classList.remove('running');
  t.classList.remove('click2');
});
</script>

</body>
</html>


アコーディオンメニューのアイコンのアニメーションについて

### 実現したいこと
<span id="stationNameJpDisplay">ふくさき</span>
<span class="blank"></span> 
<span id="stationNameEnDisplay">Fukusaki</span>の
<span class="blank"></span> の幅を一定に保持したいです。

### 発生している問題・分からないこと
stationNameJpDisplayとstationNameEnDisplayと入力している箇所が、入力の文字の書式設定によって、<span class="blank"></span>の幅が変わります。
transformや、letter-spacing、のサイズや文字数が大になればそれに応じてblankの幅は小になってしまいます。
改善策はございませんか。



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

```css
/* フォントのインポート */
@import url('https://fonts.cdnfonts.com/css/frutiger-lt-pro');

@font-face {
    font-family: 'Monogo';
    src: url('path/to/GenEi-Mono-Gothic.woff2') format('woff2'),
         url('path/to/GenEi-Mono-Gothic.woff') format('woff'),
         url('path/to/GenEi-Mono-Gothic.ttf') format('truetype');
}

/* 基本スタイル */
.stationBoard {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto auto;
    text-align: center;
    margin: 15pt;
    border: none;
    font-family: 'Frutiger LT Pro', 'GenEi Mono Gothic', sans-serif;
}

.stationBoard > div {
    padding: 7.5pt;
}

/* 駅名の大きな漢字部分 */
#stationNameDisplay {
    grid-column: 1 / span 3;
    font-size: 64pt;
    font-weight: bold;
    transform: scale(1.1, 1);
}

/* 駅名のかな・ローマ字部分の親要素 */
#stationNameJpEn {
    grid-column: 1 / span 3; /* グリッドの列を指定 */
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    font-weight: bold;
    width: 98%; /* 幅を100%に設定 */
}
/* 駅名のかな部分 */
#stationNameJpDisplay {
    font-size: 22pt;
}

/* 駅名のローマ字部分 */
#stationNameEnDisplay {
    font-size: 27pt;
    transform: scale(1.2, 1); /* スケーリングを適用 */
    letter-spacing:0.0em;
}

/* 空白部分の調整 */
.blank {
    width:30pt; /* 固定幅 */
}
```

```javascript
function adjustBlankWidth() {
    const jpElements = document.querySelectorAll('#stationNameJpDisplay');
    const stationNameDisplays = document.querySelectorAll('#stationNameDisplay');

    jpElements.forEach(jp => {
    const textContent = jp.textContent.replace(/\s/g, ''); // 空白を除いた文字数を取得

    // scaleとtext-indentの設定
    if (textContent.length === 3) {
        jp.style.transform = 'scale(1.0, 1)'; // 3文字の場合
        jp.style.letterSpacing = '0.0em'; // 3文字のときのletter-spacing
    } else if (textContent.length === 4) {
        jp.style.transform = 'scale(1.2, 1)'; // 4文字の場合
        jp.style.letterSpacing = '0.0em'; // 4文字のときのletter-spacing
    } else if (textContent.length === 5) {
        jp.style.transform = 'scale(1.05, 1)'; // 5文字の場合
        jp.style.letterSpacing = '0.0em'; // 5文字のときのletter-spacing
    }
});

    // stationNameDisplayの文字数に応じたletter-spacingとtext-indentの設定
    stationNameDisplays.forEach(display => {
        const textLength = display.textContent.length;
        if (textLength === 3) {
            display.style.letterSpacing = '0.4em';
            display.style.textIndent = '0.4em'; // 3文字のとき
        } else {
            display.style.letterSpacing = '1.0em'; // デフォルト
            display.style.textIndent = '1.0em';  // デフォルト
        }
    });
}
adjustBlankWidth();
```

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

##### 上記の詳細・結果
chatgptやリートンなど、さまざまなコード生成AIを利用させていただきましたが、
やはり、blankのサイズは固定に出来ません。
blankが固定にさえならないと、いちいちjsの設定で、blankの幅を変える必要があるうえ、
また、それもjsの手計算にゆだねられるので、ここだけは直したいです。


### 補足
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-01-06/c0c0c2f8-4855-4101-bae7-2d2c41f9416e.png)

HTML5