常連

### 実現したいこと
HTMLのbuttonをクリックしたときに、そのbuttonの傍にpopover属性を指定した要素を表示させたい。
表示/非表示はjavascriptで制御する。

[5/16 17:33 追記]
javascriptで制御したい理由は、buttonをクリックされたら実行されるjavascriptの処理結果に応じてpopoverを表示するかしないかを変えたい、あるいは表示内容を変更したいからです。

### 発生している問題・分からないこと
Javascriptを使用せずに自動的に表示させる場合には、buttonの傍に表示されます。
JavascriptのshowPopover()で表示されると離れた位置に表示されてしまいます。

popup位置の基準となる要素を何らかの方法で指定する必要があるのかがわかりません。
htmlの属性またはcssの記述が不足しているのでしょうか？



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

```html
<div style="position: relative;">

    <div id="pop1" style="margin:0; inset:0; position-area:top;" popover >
        <div>あいうえお<br />かきく</div>
    </div>

    <button id="btnOK" style="margin:100px;" popovertarget="pop1">
        <span>意図した通りの要素の上になる</span>
    </button>

    <button id="btnFail" style="margin:100px;">
        <span>画面下になってしまう</span>
    </button>

    <script>
        document.querySelector("#btnFail").addEventListener("click", (ev) => {
            document.querySelector("#pop1").hidePopover();
            document.querySelector("#pop1").showPopover();
        });
    </script>
</div>
```

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

##### 上記の詳細・結果
[Popover anchor positioning](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#popover_anchor_positioning)で説明されているposition-areaを使用してるがjavascriptからは効果がない。

javascriptでの場合に対象とする要素が指定できていないのではと考えていますが、開発者ツールでみても違いが見つけられません。

### 補足
chrome 136
edge 136
(firefoxではまったく位置が合わない、safariでは試せていないが、今回の質問ではchromium系のみでよい)


### 得られた回答を参考に実現できたコード
[5/16 17:53 追記]
クリックされた(スクリプト処理後の)時点での対象の`popovertarget`属性で判定されるようなので、非同期のawaitしてしまうと成功しませんでしたが、属性を書き換えてからclick()を呼び出すことで遅延させることができました。

```html
    document.querySelector("#btnFail").addEventListener("click", async (ev) => {
        
        const btn = ev.currentTarget;

        if (btn.hasAttribute("popovertarget")) {
            return;
        }

        btn.innerText = "処理中";
        const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
        btn.innerText = result ? "合格" : "不合格";
        if (result) {
            btn.setAttribute("popovertarget", "pop1");
        }
        else {
            btn.setAttribute("popovertarget", "pop2");
        }

        btn.click();
        btn.removeAttribute("popovertarget");
    });
```
### 得られた回答を参考に実現できたコード 2
[5/16 18:20 追記]
HTMLとCSSでの関連は、styleに`position-anchor`と`position-name`の値が一致する組み合わせをつければ良さそうなので、HTMLで書くと以下のように。

```html
<div id="pop1"
    style="position-anchor: --testAnchor; margin:0; inset:0; position-area:top; background-color: green; color: white;"
    popover>
    <div>合格</div>
</div>
<button id="btnFail" style="anchor-name:--testAnchor; margin:100px;">
    <span>2</span>
</button> 
```

これをjavascriptで実現すると

```javascript
document.querySelector("#btnFail").addEventListener("click", async (ev) => {

    const btn = ev.currentTarget;
    btn.innerText = "処理中";

    const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
    const pop = document.querySelector(result ? "#pop1" : "#pop2");

    const anchorName = "--testAnchor" + Date.now().toString();
    btn.style.anchorName = anchorName;
    pop.style.positionAnchor = anchorName;
    pop.showPopover();
});
```
とすることでshowPopover()でも任意に指定したボタンの傍に表示させることができるようになりました。

### 得られた回答を参考に実現できたコード 3
[5/16 18:55 追記]
showPopoverの引数で指定できる!!!

```javascript
document.querySelector("#btnFail").addEventListener("click", async (ev) => {

    const btn = ev.currentTarget;
    btn.innerText = "処理中";

    const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
    const pop = document.querySelector(result ? "#pop1" : "#pop2");
    pop.showPopover({ source: btn });
});
```


HTMLのpopoverの位置の指定方法

### 実現したいこと
sectionの一部が横スクロールするサイトを作成しています。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-05-06/7d21a650-859a-4278-8388-2508d7153a54.png)

### 発生している問題・分からないこと
codepenのコードを参考にしています。大きいモニターで見る際は正常ですが、ノートパソコンだとカードが見切れて見づらくなります。
GSAP側が勝手に高さ調整をしているっぽいのですが、ノートパソコンでも見やすくするにはどうすればいいでしょうか。
(画像はノートパソコンのもの)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-05-06/08c56b52-dd14-443b-b17e-8e3e1ecb5342.png)



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

```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>
	<h1 class="title">GSAP Pinning Side Scroll</h1>
<section class="normal section">
  <div class="container">
    <h2 class="normal-heading heading">普通のセクション</h2>
    <p class="normal-text">
      テキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよ
    </p>
  </div>
</section>

<section class="side-scroll section">
  <div class="side-scroll-container container">
    <h2 class="side-scroll-heading heading">
      横にスクロールするセクション
    </h2>
    <div class="side-scroll-list-wrapper">
      <ul class="side-scroll-list">
        <li class="side-scroll-item">Card</li>
        <li class="side-scroll-item">Card</li>
        <li class="side-scroll-item">Card</li>
        <li class="side-scroll-item">Card</li>
        <li class="side-scroll-item">Card</li>
        <li class="side-scroll-item">Card</li>
      </ul>
    </div>
  </div>
</section>

<section class="normal section">
  <div class="container">
    <h2 class="normal-heading heading">普通のセクション</h2>
    <p class="normal-text">
      テキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよ
    </p>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
```

```css
@charset "utf-8";

body {
  background-color: #eeebdd;
  color: #1b1717;
  font-family: Avenir, 'Helvetica neue', Helvetica, sans-serif;
}

/* 共通 */
.section {
  width: 100%;
  padding: 100px 0;
}
.container {
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
}

.heading {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* タイトル */
.title {
  padding: 200px 0 20px;
  font-size: 52px;
  text-align: center;
}

/* 普通のセクション */
.normal-text {
  font-size: 20px;
  letter-spacing: 0.08em;
  margin-top: 60px;
}

/* 横スクロールセクション */
.side-scroll {
  background-color: #1b1717;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-scroll-heading {
  color: #eeebdd;
}

.side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 700px;
}

.side-scroll-list {
  position: absolute;
  top: 60px;
  left: 0;
  display: flex;
  gap: 0 60px;
}

.side-scroll-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 420px;
  background-color: #eeebdd;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
}

.side-scroll-item + .side-scroll-item {
  margin-left: 60px;
}
```

```JavaScript
const listWrapperEl = document.querySelector('.side-scroll-list-wrapper');
const listEl = document.querySelector('.side-scroll-list');

gsap.to(listEl, {
  x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.side-scroll',
    start: 'top top', // 要素の上端（top）が、ビューポートの上端（top）にきた時
    end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
    scrub: true,
    pin: true,
    anticipatePin: 1,
    invalidateOnRefresh: true,
  },
});
```

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

##### 上記の詳細・結果
JavaScriptの8行目のtriggerをいじって、スタート位置を変えるとバグっておかしな位置で横スクロールが終わってしまいます。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-05-06/76847e89-1418-44bc-9c9e-a2f90c64210f.png)

### 補足
特になし

【GSAP】横スクロールするsectionについて

HTML・CSSでレスポンシブで作成する場合（今は大抵そうでしょうが）について、数値を固定することについてのデメリット等を知りたいです

HTMLを書き始める際にテンプレートとして
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
から始めることが多いと思います（細かな部分は置いておいてください）

私の場合はお客様都合で基本はPCファーストというかPCをまず一通り書いてある程度出来た時点でメディアクエリ等で調整していく形を取っております。

今回PCを全く考慮しなくてよいというページを作る必要が出たのですが考慮しなくていいと言いつつ要するにPCでも同じ表示にしてほしいというようなつもりの事をおっしゃったようです。

でそれを実現するときにいろんなやり方があるとは思いますが今回はPCでは仮想スマホとして仮に400幅前提でhtml,bodyを固定して表示することにしました（PCブラウザで400幅で表示されて左右がら空きなイメージです）

一旦それで見せた所、縦幅を固定したい箇所がいくつかあったりで見た目がずれるので、どの端末（スマホ・タブレット）端末でも見た目がほぼおなじになるようにしてほしいという事を言われてちょっと考えてしまいました。
逆にPCはブラウザ幅に余裕があるので400固定してしまえば良いのですが、スマホ端末は100%幅にならないといけない。
通常のwidth=device-widthにしていると正直画面幅がいくつになるかわからないので逆にwidth=400とかにしてやればPC上での400幅と同じことになるので良いのかな？と思ったのですが確信が持てなかったのでネットで調べてみました。

ただ思ったよりその辺に触れている記述を読むと「ビューポートを固定させるな、width=device-widthにしろ」と書いてる記事はあれど「別に固定してもいいよ」と断言しているような記事は見つからなかったと思います。

このあたりご意見というか考え方をお聞かせいただきたく思いました。
そもそも考え方が間違ってる所等ありましたらご指摘頂けるとありがたく思います。

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

ビューポート値を固定する事について

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

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

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

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


HTML　CSSの勉強方法

### 実現したいこと
クリック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回目の回転した角度を記憶させる？ようなコードを作るんでしょうか？

### 補足
特になし

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

### 実現したいこと
fullpage.jsを使ってレイアウトを作成しています。

### 発生している問題・分からないこと
navigationを表示したいのですが、なぜか表示されません。
3系と4系は有料らしいので、無料の2系で使用しているのですが、有料じゃないとできないのでしょうか？



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

```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>
<a href="#footer" class="button">Footer</a>
<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    

  </div>
  <div class="section">Section 3</div>
  <div class="section">Section 4</div>
  <div class="section">Section 4</div>
  <div class="section">Section 4</div>
  <div class="section">Section 4</div>
  <div class="section">Section 4</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
```

```css
@charset "utf-8";

.section{
    font-size: 6em;
    text-align: center;
    font-family: arial;
    font-weight: bold;
}


#fp-nav ul li a span{
  background: white;
}

.button{
  position: fixed;
  top:40px;
  left: 40px;
  z-index: 999;
  background: white;
  border-radius: 10px;
  padding: 10px;
}
```

```JavaScript
 // new fullpage('#fullpage', {
 //   anchors: ['home', 'about-us', 'page3', 'footer'],
 //   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
 //   navigation: true,
 // });

jQuery(function () {
  jQuery("#fullpage").fullpage({
    scrollOverflow: true,
    // anchors: ['home', 'about-us', 'page3', 'footer'],//各要素にidを入れる
    sectionsColor: ['red', 'orange', 'blue', 'yellow', 'red', 'orange', 'blue', 'yellow'],
    navigation: true,
    //navigationTooltips: ['firstSlide', 'secondSlide'],
    responsiveWidth: 900
  });
});
```

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

##### 上記の詳細・結果
追記ですが、18～22行目のpタグを表示した際、各sectionのheightが画面いっぱいにしかされず、テキストが次のsectionにはみ出してしまいます。
heightの調整にはどうすればいいでしょうか。

### 補足
特になし

【fullpage.js】ナビゲーションの表示

### 実現したいこと
<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)

blankタグに例えば30ptの幅をあけようとしても一定になりません。

### 実現したいこと
スクロールすると右側の目次が追従し、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文を加えていけばいいのでしょうか？
目次の数字は見出しには書かないようにしたいのですが、いまいちやり方がわかりません...。

### 補足
特になし

HTML5