常連

```HTML
<div class="container">
  <div class="item">
    <p>吾輩は猫である</p>
    <p>吾輩は猫である。名前はまだない。</p>
    <p>夏目漱石</p>
  </div>
  <div class="item">
    <p>羅生門</p>
    <p>ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。</p>
    <p>芥川龍之介</p>
  </div>
  <div class="item">
    <p>記憶に残る正月の思い出</p>
    <p>六つばかりの正月（多分）丁度旅順が陥落し、若かった母が、縁側に走り出、泣きながら「万歳！」と叫んだ時...</p>
    <p>宮本百合子</p>
  </div>
</div>
```

```CSS
>.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 8px 24px;

  >.item {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}
```
上記を記述すると、各.itemの子要素の高さが揃います。subgridは親要素の行または列の構造を継承させるということは理解しています。.itemにgrid-row: span 3;のみを指定し、開発ツールを確認すると.containerは均等に3等分されています。なのでここで、.itemにgrid-template-rows: subgrid;を指定すると各.itemの子要素の高さは.containerの均等に3等分された行に配置されると思いきや、各.itemの子要素の内容量に応じて高さが揃ったので分からなくなってしまいました。subgridは純粋に親グリッドの構造を継承させるのではないということでしょうか。


cssグリッドのsubgridについて理屈が分からないです。

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

HTMLの`<input type="radio">`について、「グループ内の連動を行う」「フォーム送信に値は載せない」「未チェックのままだと、フォーム送信時に送信を阻止して、`invalid`イベントを反応させる」の3つすべてを満たす方法は存在するのか

## 状況

フォーム内に「フォーム送信はしたくないけど必須のバリデーションは当てたいラジオボタン」が存在していたので、`<input type="radio" required>`に、`form="でたらめなID"`と足していました。ところが、いつしか別フォームを指す`<input>`要素ではフォーム送信を止められない状態となってしまっていました。

ふつうのフォーム要素なら`name`を未設定とすれば、フォーム送信に値が入らなくなるので何ら問題はありません。ところが、ラジオボタンの場合には`name`が「フォーム送信時のキー」以外に「複数のボタンを連動させるためのキー」としても使われているので、同じキーを設定せざるを得ません。

## 参考HTML

```html
<form action="#">
  <label>
    <input type="radio" name="foo" form="dummy" required>
    hoge
  </label>
  <label>
    <input type="radio" name="foo" form="dummy" required>
    piyo
  </label>
  
  <input type="submit">
</form>

<form action="" id="dummy"></form>
```

## 考えたこと

とりあえず、以下のような策は考えています。

* 適当な`name`で値が送信されてしまうのは無視する
* `name`をセットせずに、ラジオボタン同士のチェック制御もJavaScriptで行う
* `form`をセットしたままでも`:invalid`セレクタで拾うことは可能なので、フォーム送信時のエラーハンドリングを自前で行う

なお、`value`なしでは`key=on`として送信が行われるし、`value=""`と明示しても`key=`がフォーム送信の値に入ってしまうため、対策となりませんでした。

これらより簡潔、かつ値がフォーム送信されないような手段がありましたらご教示いただけましたら幸いです。

## 環境

ブラウザ運用なので、Chrome、Firefox、Safari、Edgeの各最新版で動かすことを念頭に置いています。

HTML上のラジオボタンで、値の非送信・グループ化・バリデーションについて

### 実現したいこと
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の位置の指定方法

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

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

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

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


HTML　CSSの勉強方法

### 実現したいこと
X方向のスクロールコンテナのスクロール時、余白を設けたいです。

前提条件：
　スクロールコンテナとhtml要素にscroll-behavior: smoothが効いている
　祖先要素にposition: stickyとanimation-timeline: scroll()が効いている
　cssでカルーセルを構成している
　カルーセルは、クリップコンテナ?マスクコンテナ（.slider）、その中のスクロールコンテナ（.slides）、その中のスライド（.slide）の三段構造に分かれている
　カルーセルのボタンを押すと、対応したページ内リンク（X方向）へとスクロール
カルーセルの上にはh2があり、スクロール時にそこが隠れるので何とかしたい

### 発生している問題・分からないこと
html {}に書いたscroll-padding-topとカルーセルのスライドに書いたネガティブなscroll-marginは効くが、他の要素は効かないです



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

```html

<div id="fellow-container">
            
            <section id="fellow">
                
                <div class="scale-container">
                    <h2>
                        スタッフ紹介
                    </h2>
                    
                    <div class="staff-container">
                        
                        <div class="staff-info-container slider">
                            
                            <div class="staff-info-wrapper slides">
                                
                                <div class="staff-info slide" id="staff-slide-1">
                                    <p class="roll">やくわり</p>
                                    <p class="name">なまえ</p>
                                    <p class="comment">
                                        こんにちは
                                    </p>
                                    <a class="more-info" href="">くわしくみる</a>
                                    <a href="#staff-slide-3" class="prev-btn caption">前に戻るボタンはここです。以後、前といいます</a>
                                    <a href="#staff-slide-2" class="next-btn caption">次へ行くボタンはここです。以後、次といいます</a>
                                </div>
                                <div class="staff-info slide" id="staff-slide-2">
                                    <p class="roll">やくわり</p>
                                    <p class="name">なまえ</p>
                                    <p class="comment">
                                        こんにちは
                                    </p>
                                    <a class="more-info" href="">くわしくみる</a>
                                    <a href="#staff-slide-1" class="prev-btn caption">前</a>
                                    <a href="#staff-slide-3" class="next-btn caption">次</a>
                                </div>
                                <div class="staff-info slide" id="staff-slide-3">
                                    <p class="roll">やくわり</p>
                                    <p class="name">なまえ</p>
                                    <p class="comment">
                                        こんにちは
                                    </p>
                                    <a class="more-info" href="">くわしくみる</a>
                                    <a href="#staff-slide-2" class="prev-btn caption">前</a>
                                    <a href="#staff-slide-1" class="next-btn caption">次</a>
                                </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
```

```css
.slider {
    .slides {
        display: flex;
        overflow: auto;

        scroll-behavior: smooth;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        &:not(:has(div.slide:target)) {

            .slide {
                &:nth-of-type(1) {

                    .prev-btn,
                    .next-btn {
                        display: block;
                    }
                }
            }

        }

        .slide {
            flex-shrink: 0;
            scroll-snap-align: center;

            &:target {

                .prev-btn,
                .next-btn {
                    display: block;
                }
            }

            .prev-btn,
            .next-btn {
                display: none;
            }
        }
    }
}

#fellow-container {
    position: relative;
    width: 100%;
    height: 200svh;
    background-color: var(--white);

    #fellow {
        color: var(--white);
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 100svh;
        background-color: var(--white);
        overflow: clip;

        .scale-container {
            position: relative;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120vw;
            border-radius: 50%;
            background-color: var(--orange);
            /* animation-name: scaleIn3; */
            animation-timing-function: ease-out;
            animation-fill-mode: both;
            animation-timeline: scroll();
            animation-range: 180svh 250svh;

            translate: -50% -50%;

            h2 {
                padding-top: 100svh;
            }

            .staff-container {
                display: flex;
                justify-content: center;
                gap: 153px;
                padding-top: 50px;

                .staff-info-container {
                    width: 608px;
                    position: relative;

                    .staff-info-wrapper {
                        .staff-info {
                            text-align: center;
                            width: 608px;
                            padding-bottom: 20px;

                            .roll {
                                font-size: 24px;
                                font-weight: 700;
                                padding-bottom: 22px;
                            }

                            .name,
                            .comment {
                                font-family: "Shirokuma";
                                font-size: 36px;
                                padding-bottom: 40px;
                            }

                            a {

                                &.more-info {
                                    &:hover {
                                        background-color: var(--bright-orange);
                                    }
                                }

                                &.prev-btn,
                                &.next-btn {
                                    position: absolute;
                                    bottom: 200px;
                                    width: 50px;
                                    height: 50px;
                                    background-color: var(--white);
                                    opacity: .6;

                                    &:hover {
                                        opacity: 1;
                                    }
                                }

                                &.prev-btn {
                                    left: -50px;
                                    clip-path: polygon(0 50%, 80% 0, 80% 100%);

                                    &:hover {
                                        translate: -5px -5px;
                                    }
                                }

                                &.next-btn {
                                    right: -50px;
                                    clip-path: polygon(100% 50%, 20% 100%, 20% 0);

                                    &:hover {
                                        translate: 5px -5px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
```

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

##### 上記の詳細・結果
scroll-padding-blockを使ったときに
block方向が、スクロール軸と並行な、積みあがっていくような軸で
inline方向が、スクロール軸と垂直な、少しずつ埋めていくような軸だということは分かったが
解決には至らなかった
（反対だったかもしれない）

### 補足
所々、要らないコードを書き換えている可能性があります
すみません　コードそれでも長いです

###追記
まだテスト中ではありますが、
.slides（スクロールコンテナ）に   scroll-padding-bottom: calc((120vw - 100svh - 100px) / 2);
.slide（スライド）に　scroll-margin-top: calc((120vw - 100svh - 100px) / 2);を両方とも記述すると、画面上方向　へとスクロールする変化がありました。（記載したコードは一部なので、それだと変化がないかもしれないです）片方を抜いて数値を二倍にすると変化が起こらなくなる（上に余白100pxを空けてスクロールする）なので　どういった法則があるのか調べます

X方向のスクロールコンテナのscroll-padding-topが効かない

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

### 補足
特になし

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

ローカルに保存した画像ファイルをHTMLで出す、といった処理を実施したいです。

```
<img src="file:///C:/tmp/WFvbFvqjuE.jpg">
```

コンソールで以下が出力されていました。
```
Not allowed to load local resource: file:///C:/tmp/puTpkXdkQH.jpg
XMLHttpRequest cannot load file:///C:/tmp/puTpkXdkQH@2x.jpg. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
```
上記のように記述したのですが、画面に表示されません。
srcの内容をコピペすれば画像が見れるので指定ミスではないのですが…。

お手数ですが、よろしくお願いします。

ローカルのファイルをHTML上で表示させたい

### 前提・実現したいこと

PHPとMariaDBで社内連絡用のシステムを作ろうとしています。連絡者がイントラ内のファイルサーバーにファイルを置いて、入力を呼び掛けたりする際に、そのファイルのあるフォルダパスを登録して、そのほかのユーザーは、リンクをクリックするとファイルやフォルダが開けるようにしたいです。

https://okwave.jp/qa/q5944306.html
こちらを見つけて、その通りにリンクを指定してみると、IEではファイルウィンドウ（エクスプローラー？）で開くことができました。

しかし、chromeやedgeでは、ファイルウィンドウではなくブラウザ上でフォルダ内が開きました。

chromeやedgeでもIEと同じようにファイルウィンドウで開く方法はないでしょうか？
また、aタグでは実現できなければ、buttonをクリックするなど、別の方法でもいいので実現する方法があれば教えていただきたいです。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```html
<a href="file://(ファイルサーバー名)/(以下フォルダのパス)>
```

### 試したこと

リンクをクリックすると、IEではファイルウィンドウが開いたが、chromeとedgeでは、ブラウザ上にフォルダの中身が表示された。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

HTML5