常連

### 実現したいこと
htmlとcssを使用したタグの振り分け

### 発生している問題・分からないこと
ファンアートを載せるサイトを作ろうと思っています。
プログラミングは初めてです。
Youtubeなどをみて見様見真似でコードを打ち込んでみましたが、実際にうまく表示されず、しかしどこが間違っているかわかりません。
タブはクリックできますが、タブのコンテンツが表示されません。

アドバイスいただけると幸いです。



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

```html
<body>

  <div class="container">

    <div class="side">

      <ul class="tab_menu">
          <li>
            <input id="top" type="radio" name="tab_item" checked>
            <label class="tab_item" for="top">top</label>
          </li>

          <LI>
            <input id="about" type="radio" name="tab_item" checked>
            <label class="tab_item" for="about">about</label>
          </LI>
          <li>
            <input id="illust" type="radio" name="tab_item">
            <label class="tab_item" for="illust">illust</label>
          </LI>
          <LI>
            <input id="comic" type="radio" name="tab_item">
            <label class="tab_item" for="comic">comic</label>
          </LI>

          <li><a href="https://x.com/__yomali">twitter</a></li>
          <li><a href="./index.html">index</a></li>
      </ul>

    </div> 

    <div class=main>
        
      <div class="tab_content" id="top_content">
        <div class="tab_content_description">
          <p class="c-txtsp">
            topの内容がここに入ります</p>
        </div>
      </div>

      <div class="tab_content" id="about_content">
        <div class="tab_content_description">
         <p class="c-txtsp">
            ここは、こみんくまが個人運営しているサイトです。<br>
            展示しているファンアートは、版権元とは一切関係ございません。<br>
            サイト内の全てのコンテンツの転載・複製・加工・再配布・再アップロード・AI学習を固く禁じます。<br>
            Reproducing all or any part of the contents is prohibited.  <br>
            お問い合わせはwaveboxまで<br>
            <a href="https://wavebox.me/wave/co5s02g2m77vn256/">ここ</a>
         </p>
        </div>
      </div>

      <div class="tab_content" id="illust_content">
        <div class="tab_content_description">
          <p class="c-txtsp">illustの内容がここに入ります</p>
        </div>
      </div>

      <div class="tab_content" id="comic_content">
        <div class="tab_content_description">
          <p class="c-txtsp">comicの内容がここに入ります</p>
        </div>
      </div>
  
    </div>
  </div>
  
</body>
```

```css
.container {
    width: 100%;
    height: 1000px;
    display: flex;
  }
  .main {
    width: 90%;
    color: black;
    background-color: white
  }
  .side {
    width: 10%;
    box-sizing: border-box;
    color: white;
    background-color: black;
  }

.side li:hover {
    color: #80ba4a;
}



/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
  }
  
  /*タブ切り替えの中身のスタイル*/
  .tab_content {
    display: none;
    padding: 40px 40px 0;
    clear: both;
    overflow: hidden;
  }
  
  
  /*選択されているタブのコンテンツのみを表示*/
  #top:checked ~ #top_content,
  #about:checked ~ #about_content,
  #illust:checked ~ #illust_content,
  #comic:checked ~ #comic_content {
    display: block;
  }

/*選択されているタブのスタイルを変える*/
.tab_menu input:checked + .tab_item {
    background-color: #80ba4a;
    color: #fff;
  }
  
```

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

##### 上記の詳細・結果
[リンク内容]https://bagelee.com/design/css/create_tabs_using_only_css/

こちらを参考にしました。

### 補足
特になし

htmlとcssを使用したタグの振り分けができない

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

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コーダーに求められるスキルとその将来性

[リンク内容](url)
https://github.com/zawber/mdn-ex
```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>
</head>

<body>
    
    <div>
        <h5>#01</h5>
        <q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
    </div>


    
    <div>
        <h5>#02</h5>
        <span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
    </div>

    
    <div>
        <h5>#03</h5>
        <ul>
            <li>牛乳を買う</li>
            <li>犬の散歩をする</li>
            <li>エクササイズ</li>
            <li>コードを書く</li>
            <li>音楽を演奏する</li>
            <li>リラックスする</li>
        </ul>
    </div>


    <style>
        div {
            margin: 10px;
        }

        h5 {
            margin: 0;
        }

        /* ＃01 */
        q::before {
            content: "«";
            color: blue;
        }

        q::after {
            content: "»";
            color: red;
        }

        /* ＃02 */
        .ribbon {
            background-color: #5bc8f7;
        }

        .ribbon::before {
            content: "このオレンジのボックスを見てください。";
            background-color: #ffba10;
            border-color: black;
            border-style: dotted;
        }

        /* #03 */
        li {
            list-style-type: none;
            position: relative;
            margin: 2px;
            padding: 0.5em 0.5em 0.5em 2em;
            background: lightgray;
            font-family: "Yu Mincho";
        }

        li.done {
            background: #ccff99;
        }

        li.done::before {
            content: "";
            position: absolute;
            border-color: #009933;
            border-style: solid;
            border-width: 0 0.3em 0.25em 0;
            height: 1em;
            top: 1.3em;
            left: 0.6em;
            margin-top: -1em;
            transform: rotate(45deg);
            width: 0.5em;
        }
    </style>


    <script>
        'use strict';

        // #03
        var list = document.querySelector('ul');
        list.addEventListener('click',        
            function (ev) {
                if (ev.target.tagName === 'LI') {
                    ev.target.classList.toggle('done');
                }
            }, false,
        );

        
    </script>

</body>

</html>
```



li.done::before {(84行から96行）で何をしてるのかよく分かりません。
そもそもli.doneはどこを指しますか？

106行からのfunction全体の解説もお願いします。
tagもclassも作ってないですけど
LIはなぜ大文字？

質問が多くてすいませんが宜しくお願いします。

チェックマークの作り方が分かりません。

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

SCSSのファイル分割について

## 背景、状況

SCSSのファイル分割について、cssを使うよりも便利だと思うのですが、共通パーツで変更があった際にパーツを読み込んでいるファイル全てを更新しなければならず、それならバラバラに読みこんでいた方が楽でしょうか？
ただ、css一枚でだして圧縮をかけた方がサイトが軽くなるような気もします、、、。
もし『こういう使い方すれば楽だよ！』ってものがあればご教授ください。



SCSSのファイル分割について

ボタンホバーの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が一部にしか効かない

### 実現したいこと
テーブルレイアウトを用いて設問を作り、表頭・表側から重なり合ったセルを選ぶレイアウトとして
以下の構成をCSSのみでの実現ができないか考えています。
---
|     | A0         | A1     | A2     | A3     | 
| :-: | :--------: | :----: | :----: | :----: | 
| B0  |            | 表頭１ | 表頭２ | 表頭３ | 
| B1  | 表側１     | ●     | ○     | ○     | 
| B2  | 表側２     | ○     | ○     | ○     | 
| B3  | 表側３ | ○     | ○     | ○     | 
| B4  | 表側４     | ○     | ○     | ○     | 

0. 表頭（A1）、表側（B１）をポイントした時、Ａ１列、Ｂ１行に背景色が付き、ポイント箇所が分かり、且つ、そのセル（図中●含むセル）をホバーした時、セルの背景色が変わる。
2. テーブル全体に背景色がついても１．の効果は優先される。
3. 表頭に背景色を指定しても１．の効果は優先される。
4. 表側に背景色を指定しても１．の効果は優先される。

### 発生している問題・分からないこと
- ３と４の結果が得られない

表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。



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

```HTML
<table id="hage" class="matrix">
    <tbody>
        <tr>
            <td></td>
            <td class="fm-x">
                <span>Ａああああああああああああああ</span>
            </td>
            <td class="fm-x">
                <span>Ｂあいいいいいいいいいいいい</span>
            </td>
            <td class="fm-x">
                <span>Ｃううううううううううううう</span>
            </td>
            <td class="fm-x">
                <span>いいいいいいいいいいい</span>
            </td>
            <td class="fm-x">
                <span>っっっっっっっっっっｇ</span>
            </td>
        </tr>
        <tr>
            <td class="fm-y">
                <span>1あああああああああああ</span>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
                    <span></span>
                </label>
            </td>
        </tr>
        <tr>
            <td class="fm-y">
                <span>2いいいいいいいいいいいいいい</span>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
                    <span></span>
                </label>
            </td>
        </tr>
        <tr>
            <td class="fm-y">
                <span>3うううううううううううううううううう</span>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
                    <span></span>
                </label>
            </td>
        </tr>
        <tr>
            <td class="fm-y">
                <span>4ええええええええええええええええええええ</span>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
                    <span></span>
                </label>
            </td>
            <td class="fm-cell">
                <label>
                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
                    <span></span>
                </label>
            </td>
        </tr>
    </tbody>
</table>
```

```CSS
.fm-matrix{
    border-collapse: collapse !important;
}

.fm-matrix td.fm-x span{
    -webkit-white-space: nowrap;
    white-space: nowrap;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.fm-matrix td.fm-x{
    vertical-align: top;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    z-index: 100;
    position: relative;
}

.fm-matrix td.fm-y{
    padding:8px 15px 10px 0;
    word-wrap: break-word;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: -1px;
}

.fm-matrix tr:not(:first-child):hover {
    background-color: #f3f8ff;
    z-index: 0;
    position: relative;
}

.fm-matrix td.fm-cell{
    border-bottom: none !important;
    border-right: none !important;
    position: relative;
}


.fm-matrix td.fm-cell:hover{
    background-color: #c2daff;
}

.fm-matrix td.fm-cell:hover::after {
    background-color: #f3f8ff;
}

.fm-matrix td.fm-cell:hover::after{
    content: "";
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 200vh;
    z-index: -1;
}
```

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

##### 上記の詳細・結果
表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。

### 補足
【一旦の想定形】
下図のようにユーザーがどの設問のラジオボタンを選択するか
視覚的にわかりやすいようにすることを想定しています。
1. どのラジオボタンを選択しようとしているかhoverで背景色が付く（青）
```CSS
.fm-matrix td.fm-cell:hover{
    background-color: #c2daff;
}
```
2.そのラジオボタンがどの表頭と表側にあたるものなのかを示すために背景色が付く
```CSS
.fm-matrix td.fm-x{
    vertical-align: top;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    z-index: 100;/*表頭の文字を視認するための指定。z-indexで最上位にしておかないと文字が見えなくなる*/
    position: relative;
}

.fm-matrix tr:not(:first-child):hover {
    background-color: #f3f8ff;
    z-index: 0;
    position: relative;
}

.fm-matrix td.fm-cell{
    border-bottom: none !important;
    border-right: none !important;
    position: relative;/*::afterのabsoluteを指定するため*/
}

.fm-matrix td.fm-cell:hover::after {
    background-color: #f3f8ff;
}

.fm-matrix td.fm-cell:hover::after{
    content: "";
    position: absolute;
    top: -100vh;/*fm-cellからの位置調整*/
    left: 0;
    width: 100%;
    height: 200vh;/*高さ（表頭からの長さ）*/
    z-index: -1;/*この指定をつけることで「背景」として表示される*/
}
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-25/7c91feb4-6006-4b21-87fc-9f97da3b7434.png)
---

【現在の問題】
表頭と表側に背景色を指定してしまうと「どの表頭と表側にあたるものなのかを示すための背景色」が表示されなくなってしまう。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-25/e95a7af9-99a5-4668-b80f-ba7a3cedf017.png)

CSSのみを使ったtableでの設問レイアウトの実装について

### 実現したいこと
iOSで横スクロールできないようにする

### 発生している問題・分からないこと
ヘッダーのレスポンシブデザインで、ハンバーガーメニューを使用しています。
アイコンをクリックすると、画面外のメニューが横すべりで出てくるようにしていて、bodyにoverflow-x: hiddenを使うことで、アイコンがクリックされていない時はメニューを隠した状態にしようとしています。
pcの検証ツール上ではクリアできますが、ipnoneになると横スクロールできるようになってしまいます。
改善点のわかる方がいらっしゃいましたらご教示ください。



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

```html
<body>
<header>
       <div id="top"></div>
       <div class="logo">
            <a href="index.html">
            <img src="img0/logo.png"
              srcset="img0/logo.png 1x,
                      img0/logo2x.png 2x"
                 alt="ロゴ"></a>
       </div>
       <nav>
            <ul class="nav-list">
             <li class="nav-list-item first"><a href="start.html">はじめてのかたへ</a></li>
             <li class="nav-list-item category"><a href="index.html#jump">カテゴリ</a></li>
             <li class="nav-list-item template"><a href="template.html">テンプレート</a></li>
             <li class="nav-list-item portfolio"><a href="portfolio.html">作品紹介<a/></li>
            </ul>
          <div class="burger">
              <div class="line1"></div>
              <div class="line2"></div>
              <div class="line3"></div>
          </div>
       </nav>
</header>
<section>
</section>
<script src="js/script.js"></script>
</body>
```

```css
html {
     overflow: auto;
     }
body {
     margin: 0 auto;
     overflow-x: hidden;
     }
/*文字サイズ*/
p {
   font-size: 20px;
   line-height: 50px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
   color: #222222;
}

h1 {
   font-size: 26px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
   color: #222222;
}

h2 {
   font-size: 30px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
}

h3 {
   font-size: 18px;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   font-style: normal;
   color: #222222;
}

a {
   text-decoration: none;
   font-family: "Zen Maru Gothic", serif;
   font-weight: 400;
   color: #222222;
   
   }

header ul{
  padding-left:0;
  display: flex;
  justify-content: flex-end;
}

header li {
   list-style:none;
   margin: 0 auto;
   text-align: center;
   border-left: 1px solid #efefef;
   }

header li:last-child{
                    border-right: 1px solid #efefef
                    }
* {
   box-sizing: border-box;
   }

/*ヘッダー*/
header {
        width: 100%;
        height: 120px;
        padding: 5px;
        margin: 0 auto;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 2px rgba(54, 54, 54, .06);
        }
        
.logo {
       height: 100px;
       padding: 0px 10px;
       text-align: center;
       }

nav {
     margin: 0 0 0 auto;
     }

.nav-list {
          min-width: 20%;
          display:flex;
          align-items: center;
          transition: all 0.5s ease-in-out;
          z-index: 999;
          }

.nav-list-item {
               font-size: 16px;
               text-align: center;
               padding: 1em 30px;
               white-space: nowrap;
               font-family: "Zen Maru Gothic", serif;
               font-weight: 400;
               font-style: normal;
               display: inline;
               }

.nav-list-item:hover {
                      background-color: #efefef;
                      cursor: pointer;
                      }

.burger  div {
             display: none;
             cursor: pointer;
             width: 25px;
             height: 3px;
             background-color: #222222;
             margin: 5px;
             transition: all 0.5s ease-in-out;
             }

.nav-active {
            transform: translateX(0%) !important;
            }

/* 959px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 959px) {
body {
     overflow-x: hidden;
     }

header {
       max-width: 959px;
       }

header ul{
         flex-direction: column;
         justify-content: normal;
         }

header li:first-child{
                    padding-top: 40px;
                    }

.logo img {
          max-width: 200px;
          }

.logo {
      max-height: 60px;
      }

.nav-list {
          position: absolute;
          right: 0;
          height: 380px;
          top: 100px;
          background-color: #efefef;
          flex-direction: column;
          align-items: center;
          width: 100%;
          transform: translateX(100%);
          }

.nav-list a {
            font-size: 20px;
            }

.nav-list-item {
               padding: 30px;
               }

.burger div {
            display: block;
            margin-right: 30px;
            }

.toggle .line1 {
               transform: rotate(-45deg) translate(-5px, 6px);
               }

.toggle .line2 {
               opacity: 0;
               }

.toggle .line3 {
               transform: rotate(45deg) translate(-5px, -6px);
               }
}
```

```javascript
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-list");


burger.addEventListener('click',() => {
    nav.classList.toggle("nav-active");
    
    burger.classList.toggle("toggle");
 });
```

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

##### 上記の詳細・結果
javascriptでスクロール禁止にするコードはいくつか見かけましたが、横のスクロールのみ禁止にする方法がわかりませんでした。
bodyの下にクラスを設けてそこにoverflow-x: hidden;もやってみましたが、うまくいきませんでした。

### 補足
特になし

iOSでoverflow-x: hiddenがきかない

### 前提

以下のHTMLとCSSで、ChromeとSafari・Firefoxの表示が異なります。

```css
ul {
    counter-reset: test;
}

li::before {
    content: counters(test, "-");
    counter-increment: test;
}

li:nth-of-type(2) {
    counter-reset: test 10;
}

li:nth-of-type(4) {
    counter-reset: test 100;
}
```

```html
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

サンプル：
[CSS counter test](https://codepen.io/lhankor_mhy/pen/LYwyNgb)

↓Chromeのスクリーンショット
![Chrome](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-16/b205e0d6-1880-4577-9c87-bbb228fccb04.png)

↓Firefoxのスクリーンショット（Safariも同様です）
![Safari・Firefox](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-16/5971658f-a1bd-4b54-86e5-15d07ff44dee.png)

### 質問

これはどちらの実装が仕様に忠実でしょうか。またはどちらも間違っていますか？
仕様に基づいてご回答いただけるのがベストですが、個人的見解でも構いません。

### 補足

なお、これは正しい実装についての質問であり、解決方法についての質問ではありません。ですので、「counter-resetをリストアイテムに対して使うのが間違っている」とか「counter-setを使えば解決する」とかそういう回答は求めていませんので、ご了承ください。
