常連

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

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



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

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

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

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


.grid__ttl{
  background:red;
}

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

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

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

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


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

### 実現したいこと
イメージとしては以下のサイトにある
https://wp-emanon.jp/emanon-premium/demo02/
お客様の声スライダーのようなものになります。
これをプロフィールスライダーとして使います。
各人物のアイコンや簡単なプロフィールの部分からそれぞれの詳細ページへリンクします。
これをhtml、css、jsで作りたいです。
人物は9人分です。
インジケーターは〇でスライドの下に9つ作ります。
インジケーターによる左右どちらにも行ける手動操作と、オートプレイによる左から右へ流れるスライドを両立させます。
スライドは画面の中途半端な位置に止まらないようにしたいです。


### 発生している問題・分からないこと
スライダーは3人分ずつスライドするようになっていますが、それだと動作が早すぎるので1人分ずつスライドするように修正したいです。
但し、画面の見た目は、一度に3人分表示で変更しません。
つまり、1/3づつスライドさせる構造にします。



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

```html
   <div class="testimonial-slider">
        <div class="testimonial-track">
            <div class="testimonial">
                <img src="path-to-image1.jpg" alt="Customer 1" class="testimonial-img">
                <p class="testimonial-comment">"Customer 1's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image2.jpg" alt="Customer 2" class="testimonial-img">
                <p class="testimonial-comment">"Customer 2's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image3.jpg" alt="Customer 3" class="testimonial-img">
                <p class="testimonial-comment">"Customer 3's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image4.jpg" alt="Customer 4" class="testimonial-img">
                <p class="testimonial-comment">"Customer 4's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image5.jpg" alt="Customer 5" class="testimonial-img">
                <p class="testimonial-comment">"Customer 5's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image6.jpg" alt="Customer 6" class="testimonial-img">
                <p class="testimonial-comment">"Customer 6's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image7.jpg" alt="Customer 7" class="testimonial-img">
                <p class="testimonial-comment">"Customer 7's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image8.jpg" alt="Customer 8" class="testimonial-img">
                <p class="testimonial-comment">"Customer 8's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image9.jpg" alt="Customer 9" class="testimonial-img">
                <p class="testimonial-comment">"Customer 9's comment..."</p>
            </div>
        </div>
        <div class="testimonial-indicators">
            
            <span class="indicator" onclick="goToSlide(0)"></span>
            <span class="indicator" onclick="goToSlide(1)"></span>
            <span class="indicator" onclick="goToSlide(2)"></span>
            <span class="indicator" onclick="goToSlide(3)"></span>
            <span class="indicator" onclick="goToSlide(4)"></span>
            <span class="indicator" onclick="goToSlide(5)"></span>
            <span class="indicator" onclick="goToSlide(6)"></span>
            <span class="indicator" onclick="goToSlide(7)"></span>
            <span class="indicator" onclick="goToSlide(8)"></span>
        </div>
    </div>
```

```css
        .testimonial-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .testimonial {
            flex: 0 0 33.3%;
            text-align: center;
        }

        .testimonial-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .testimonial-comment {
            font-size: 1rem;
            color: #333;
            max-width: 200px;
            margin: 0 auto;
        }

        .testimonial-indicators {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            margin: 0 5px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator.active {
            background-color: #333;
        }
```

```js
let currentIndex = 0;
const maxIndex = 2;  // インジケータ数に合わせた最大インデックス

// オートプレイ機能でスライドを移動
function showNextTestimonial() {
    const track = document.querySelector('.testimonial-track');
    
    // 現在のインデックスがmaxIndexを超えたら0に戻す
    currentIndex = (currentIndex + 1) % (maxIndex + 1);
    track.style.transform = `translateX(-${100 * currentIndex}%)`;

    // インジケータを更新
    updateIndicators();
}

// インジケータのクリックで指定のスライドに移動
function goToSlide(index) {
    const track = document.querySelector('.testimonial-track');

    // インデックスが範囲内か確認
    if (index >= 0 && index <= maxIndex) {
        currentIndex = index;
        track.style.transform = `translateX(-${100 * currentIndex}%)`;
        updateIndicators();
    }
}

// インジケータの更新処理
function updateIndicators() {
    const indicators = document.querySelectorAll('.indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === currentIndex);
    });
}

// 初期設定：最初のインジケータをアクティブに設定
updateIndicators();

// オートプレイ機能：5秒ごとに次のスライドを表示
setInterval(showNextTestimonial, 5000);

```

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

##### 上記の詳細・結果
今の段階では3人分づつスライド。インジケーターは9人分表示。インジケータは3までしか動作していません。これを9まで動作するように直したいです。オートプレイと連動させます。

### 補足
特になし

プロフィールをスライダー化したい

### 実現したいこと
<!DOCTYPE html>のサイトをJSX記法で制作しています。

JSXはXML構文なのにdoctypeは<!DOCTYPE html>でいいのでしょうか？

### 発生している問題・分からないこと
HTML LSでは自己終了タグの半角スペースとスラッシュが不要ですが、JSXでは半角スペースとスラッシュがないとエラーになってしまいます。
JSXで出力されたタグはHTML LSのマークアップルールには乗っ取らなくても良いのでしょうか？

■2024.10.23追記
例えばhtml5(htmlLS)では自己終了タグは<br>のように半角スペースとスラッシュがない書き方が正しいですが、JSXでは<br />と書かないとエラーになってしまうので、出力されたhtml上では<br />が挿入されます。そうなるとdoctypeが<!DOCTYPE html>だとhtml5(htmlLS)的には正しくない書き方なので、XHTML用のDOCTYPE宣言をしないといけないのではないかと疑問に思いました。


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

```

```

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

##### 上記の詳細・結果
https://html.spec.whatwg.org/multipage/syntax.html#elements-2
whatwgの仕様書でsvg内では自己終了タグ使用可なのは読み取れましたが、JSXについては読み取れませんでした。

https://ja.react.dev/reference/react-dom/server/renderToReadableStream#rendering-a-react-tree-as-html-to-a-readable-web-stream
reactの仕様書に<!DOCTYPE html>を見つけたので、doctypeはこれで合ってる...?JSXとマークアップルールについては見つけられませんでした。

### 補足
特になし

<!DOCTYPE html>とJSX記法

ネットに上がってない情報を知るには、何が必要ですか？

プログラミングの力でネットに上がってない情報を知りたい

### 実現したいこと
cssのカウンター機能を使って、特定の要素の出現ごとに擬似要素の数値を1ずつ増やしたい。

### 発生している問題・分からないこと
「container-type: inline-size;」をカウントしたい要素の親要素に指定するとmacのsafari(バージョン17.6)でカウンターの数が増えず、00になってしまう。macのchrome(バージョン131.0.6778.86)では大丈夫でした。「container-type: inline-size;」の記述を残しつつsafariでカウンターを使いたい。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-28/c47b3769-da86-498d-825c-59cfb504ae6e.png)



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

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
    <style>
        .point_wrap {
            counter-reset: point;
        }

        .point {
            counter-increment: point;
        }

        .point_title1::after {
            content: counter(point, decimal-leading-zero);
        }

        .point_inner {
            container-type: inline-size;
        }
    </style>
</head>

<body>


    <div class="point_wrap">



        <section class="point">
            <div class="point_inner">
                <h2 class="point_title1">POINT</h2>
            </div>
        </section>



        <section class="point">
            <div class="point_inner">
                <h2 class="point_title1">POINT</h2>
            </div>
        </section>



        <section class="point">
            <div class="point_inner">
                <h2 class="point_title1">POINT</h2>
            </div>
        </section>



    </div>



</body>

</html>
```

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

##### 上記の詳細・結果
日本語で検索しても同ケースが出てこないので英語でもgoogleで検索。htmlやcssをの一部の記述をコメントアウトしたり削除することにより簡素化して再現性をチェック。その結果「container-type: inline-size;」の有無が関係しているようだった。

### 補足
検証ツールで「container-type: inline-size;」をつけ外ししても、safariの数字は00のままだが、元のソースコードから「container-type: inline-size;」を消してsafariをリロードするとカウンターが機能する。

cssのカウンター機能が作動しない

### 実現したいこと
フッターの下の余白を無くしたいです。

### 発生している問題・分からないこと
フッターの下の余白を無くしたいです。




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

```HTML
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="株式会社TKG会社店舗紹介">
        <link rel="stylesheet" href="../style.css">
        <title>店舗紹介</title>
    </head>
    <body>
        <div id="contents">
        <header>
            <h1>店舗紹介</h1>
            <nav id="global_navi">
                <ul>
                    <li><a href="../index.html" target="_blank">トップページ</a></li>
                    <li><a href="../company/index.html" target="_blank">会社概要</a></li>
                    <li><a href="index.html">店舗紹介</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div>
                <h2>豊橋本店</h2>
                <table border="1">
                    <tr>
                        <th>住所</th>
                        <td>〒440-1105 愛知県豊橋市鶉羽町1-10-5</td>
                    </tr>
                    <tr>
                        <th>電話番号</th>
                        <td>0532-01-4105</td>
                    </tr>
                </table>
            </div>
            <div>
                <h2>名古屋店</h2>
                <table border="1">
                    <tr>
                        <th>住所</th>
                        <td>〒450-1105 愛知県名古屋市鶏山区風見鶏町1-10-5</td>
                    </tr>
                    <tr>
                        <th>電話番号</th>
                        <td>052-000-1105</td>
                    </tr>
                </table>
            </div>
        </main>
        <footer>
            <dl>
                <dt>本社所在地</dt>
                <dd>〒440-1105 愛知県豊橋市鶉羽町1-10-5</dd>
                <dt>電話番号</dt>
                <dd>0532-01-4105</dd>
            </dl>
        </footer>
        </div>
    </body>
</html>
```

```CSS
@charset "UTF-8";
/* body */
body,html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#contents {
margin: 0 auto;
    width: 100%;
    position: relative;
    min-height: 100%;
  }

/* header */
header {
    background-color: blue;
    margin: 0;
}
h1 {
    color: white;
    margin: 0;
}
/* グローバルナビゲーション */
#global_navi ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;

}
#global_navi ul li {
    margin: 0 10px;
}
#global_navi ul a {
    display: block;
    padding: 6px 20px;
    border-radius: 9999px;
    border: 3px outset white;
    text-decoration: none;
    background-color: aqua;
}

/* main */
/* 画像の大きさ指定 */
img {
    width: 600px;
    height: auto;
}
/* div間の余白を指定 */
div {
    margin: 50px 0;
    width: 850px;
}

/* footer */
footer {
    color: white;
    background-color: blue;
    margin: 0;
}
dl {
    margin: 0;
}
dt {
    float: left;
    clear: left;
    margin-right: 20px;
}
```

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

##### 上記の詳細・結果
ヘッダーの上の余白は、
#contents {margin: 0 auto;}
で無くなりました。
また、以下の二種類の方法を試しましたができませんでした。
[リンク内容](https://qiita.com/kents1002/items/0fbd3bb2b30b57f382a2)
[リンク内容](https://zenn.dev/catnose99/articles/a873bbbe25b15b)

### 補足
特になし

フッターの下の余白を無くしたいです。

メディアクエリを使わずに作りました。
```html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="UTF-8">
        <style>
            .main {
            background-color: white;
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            padding: 16px;
            margin: 16px;
            }
            .main-item {
            background-color: red;
            height: 100px;
            }
        </style>
    </head>
    <title>
    </title>
    <body style="background-color: turquoise;">
        <main class="main">
            <div class="main-item">item 1</div>
            <div class="main-item">item 2</div>
            <div class="main-item">item 3</div>
            <div class="main-item">item 4</div>
            <div class="main-item">item 5</div>
            <div class="main-item">item 6</div>
            <div class="main-item">item 7</div>
            <div class="main-item">item 8</div>
            <div class="main-item">item 9</div>
            <div class="main-item">item 10</div>
          </main>
    </body>
</html>
```

幅の最小値300pxとしているので幅300以下のモニターで見るとコンテンツがはみ出すのが問題です。
なので以下のサイトのように横幅を一定の部分まで狭めるとスマホ版の全体が縮小されていくようにしてみたいですがどのような方法があるでしょうか。
https://www.panda-ah.com/
こちら要素一つ一つにブレイクポイントを設けているわけでは無さそうですが、特殊なviewport設定などが存在するのでしょうか。

メディアクエリを使わずにコンテンツ幅を最適化する方法

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