常連

テラテイラー

注目の的

社会貢献

質問力

回答者

ベストアンサー

拍手喝采

プロフェッサー

スピードスナイプ

先生

案内人

メンター

情報収集家

鑑定士

自己紹介

有名人

### 実現したいこと
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のinputタグ(type="file")でPDFをアップロードしてGASに送って、Googleドライブに保存したいのですが、実際にドライブに保存されたPDFには、以下の文章が記載されたものが保存されており、適切でありませんでした。わかる方がいらっしゃたら教えていただきたいです。

### 発生している問題・エラーメッセージ![イメージ説明]
実際にPDFファイルとして保存されてたもの⇩
(https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-17/89e67127-5c69-47b2-aaee-5fafea843ec3.png)

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

```html
  <div class="input">
    <form action="https://script.google.com/macros/s/AKfycbw6csvxkY10UG5D_eNNPSsqTI0sxhm5qkhBHSRrS_nM4wKfrd1cFUs1Sp0Q4L1AXCbwQg/exec" method="POST">

      

      <div style="height: 20px;"></div>
      
      <legend style="text-align: start;">身分証明書の提出(提出可能書類から1点)*<br>提出可能書類(運転免許証, 運転経歴証明書, パスポート, マイナンバーカード, 在留カード・特別永住者証明書, 官公庁化顔写真を貼付した各種福祉手帳(障がい者手帳など), 各種健康保険証, 顔写真が貼付されていない各種福祉手帳(母子健康手帳など), 住民票の写し・住民票の記載事項証明書, 印鑑登録証明書)</legend>
      <input type="file" name="fileUpload" accept=".pdf" />
      
      <div style="height: 20px;"></div>
      <div style="width: 100%;text-align: center;"><input id="playButton" class="btn" type="submit" value="送信"></div>
    </form>
    <audio id="Audio" src="btn.mp3"></audio>
    <iframe name="audioFrame" style="display:none;"></iframe>
  </div>

  <script>
    var audio = document.getElementById("Audio");
    var playButton = document.getElementById("playButton");
          
    playButton.addEventListener('click', function() {
      audio.play();
      alert("コメントを送信しました。");
    });
  </script>

```

```GAS
// フォルダ内で使用可能なファイル名を取得する関数
function getNextAvailableFileName(folder) {
  var fileNameBase = "file";
  var fileExtension = ".pdf";
  var counter = 1;

  // フォルダ内のファイルを取得
  var files = folder.getFiles();

  // 連番のファイル名が存在するか確認
  while (files.hasNext()) {
    var file = files.next();
    var existingFileName = file.getName();
    var expectedFileName = fileNameBase + counter + fileExtension;

    // 連番が存在する場合、カウンターを増やして再試行
    if (existingFileName === expectedFileName) {
      counter++;
    } else {
      // 連番が存在しない場合、そのファイル名を使用
      return expectedFileName;
    }
  }

  // すべての連番が使用されている場合、最後の連番を使用
  return fileNameBase + counter + fileExtension;
}

// 5桁の乱数を生成して、重複がないか確認する関数
function generateUniqueRandomNumber(existingNumbers) {
  var newNumber;
  do {
    newNumber = Math.floor(10000 + Math.random() * 90000);
  } while (existingNumbers.indexOf(newNumber) !== -1);
  return newNumber;
}

function sendMail(emailAdress,name,birthday,sex, pdfId) {
  if(sex=="male"){var Sex = "男性"}else {var Sex = "女性"}
  const recipient = 'sumaishare@gmail.com';　        　　　　  　//送信先のメールアドレス
  const subject = '身分証確認用メール'; 　　     　 　//件名
  const recipientName = name;　                   　//送信先の担当者名
  const body = `☆新規ユーザー☆\n氏名：${recipientName}\n生年月日：${birthday}\n性別：${Sex}\nemail：${emailAdress}\n`
    + '\n\n＊身分確認後は許諾用URLより手続きを行ってください。＊\n';                 
        //本文

    //添付ファイルの取得
  let attachmentFile = DriveApp.getFileById(pdfId).getBlob();

  let options = {
    attachments :attachmentFile,
    name: 'メール担当 ○○'
  };
  GmailApp.sendEmail(recipient, subject, body, options);
}

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  ss1 = new Ssheet(ssID1);


  var columnIndex = 2; // 例としてA列を指定
  var data = sheet.getRange(1, columnIndex, sheet.getLastRow(), 2).getValues();
  var rowData = [];
  rowData.push(new Date()); 
  // 5桁の乱数を生成してセルに代入
  var randomNumber=0;
  for (var i = 0; i < data.length; i++) {
    randomNumber = generateUniqueRandomNumber(data);
  }

//ほかの質問のセル追加は略
  
  var blob = Utilities.newBlob(e.postData.getDataAsString(), e.postData.getContentType(), e.parameter.fileUpload);
  // ファイルを保存するGoogle Driveのフォルダ
  var folder = DriveApp.getFolderById("1hKsF5Z-nFhq0bQk6PTZxStaAfk4yFmRY");

  // フォルダ内で使用可能なファイル名を取得
  var fileName = getNextAvailableFileName(folder);

  // ファイル名を指定してファイルを保存
  var file = folder.createFile(blob.setName(fileName));

  // 保存したファイルのURLを取得
  var fileUrl = file.getUrl();
  var fileId = file.getId();
  rowData.push(fileUrl);
  rowData.push(e.parameter.other);
  sendMail(e.parameter.email,e.parameter.name,e.parameter.birthday,e.parameter.contact3, fileId);


  sheet.appendRow(rowData); 
  return 0; 

  

}
```

GASでドライブに送ったPDFの中身が適切でない...

お世話になっております。
初心者質問で申し訳ございません。

### 前提

kintoneの一覧画面で日付フォームとボタンを設置し、
ボタンをクリックすると、
日付フォームに入力された日でkintoneに登録された、複数レコードの住所に
ピンを打った地図が別ウィンドウで表示されます。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-04/a6b5525e-ffc6-470f-8919-a9eec659f552.png)
↓クリック
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-04/c656938f-e27d-4e6c-ae46-4f7e6045c55f.png)

地図はGooglemapが表示されます。
GooglemapAPIを用いて実装しております。

### 実現したいこと

表示された地図から動かそうとするも、クリックがきかない。
矢印キーでしか移動できない。


### 発生している問題・エラーメッセージ

エラーは出ておりません。

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

```JavaScript
//　日付フォーム、ボタン設置
(function () {
    "use strict";
    kintone.events.on('app.record.index.show', function (event) {
        var ele = document.getElementById("memo");
        // 日付入力欄　要素ノードを作る
        var mapDate = document.createElement('input');
        mapDate.type = 'date';
        mapDate.id = 'mapDate';
        // ボタン　要素ノードを作る
        var mapBtn = document.createElement('input');
        mapBtn.type = 'button';
        mapBtn.id = 'mapBtn';
        mapBtn.value = 'map';
        var parenteles = document.getElementsByClassName("calendar-menu-gaia");
        var parentele = parenteles[0];
        parentele.insertBefore(mapBtn, ele.nextSibling);
        parentele.insertBefore(mapDate, ele.nextSibling);

        //ボタンクリックのイベント
        var myWindow;
        document.getElementById('mapBtn').onclick = function () {
            //日付フォームの日付を取得
            var date = document.getElementById("mapDate").value;
            var lat = [];
            var lng = [];
            var recno = [];
            var day = [];
            var rec, i;
            // レコード情報を取得します
            rec = event['records'];
            let recs = Object.keys(rec);
            // 一覧に表示されているすべてのレコードの緯度・経度と名前を配列に格納します
            for (i = 0; i < recs.length; i += 1) {
                let index = recs[i];
                for (let j = 0; j < rec[index].length; j += 1) {
                    if (rec[index][j].lat.value !== undefined && rec[index][j].lng.value !== undefined) {
                        if (rec[index][j].lat.value.length > 0 && rec[index][j].lng.value.length > 0) {
                            lat.push(parseFloat(rec[index][j].lat.value)); // 緯度
                            lng.push(parseFloat(rec[index][j].lng.value)); // 経度
                            recno.push(rec[index][j].name.value); // 名前
                            day.push(rec[index][j].day.value); // 宅配日
                        }
                    }
                }
            }
            // 新規ウィンドウ起動
            myWindow = window.open("", "myWindow", "width=600px,height=600px");
            myWindow.document.write("<div id='map' style='width:100%;height:100%'></div>");

            var point = new google.maps.LatLng(lat[0], lng[0]);
            // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
            var opts = {
                zoom: 15,
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                clickable: true
            };
            // 地図の要素を定義します
            var map = new google.maps.Map(myWindow.document.getElementById('map'), opts);
            var marker = [];
            var m_latlng = [];
            var dayLat = [];
            var dayLng = [];

            // 緯度・経度をもとに、地図にポインタを打ち込みます
            for (i = 0; i < lat.length; i += 1) {
                if (isNaN(lat[i]) === false && isNaN(lng[i]) === false) {
                    if (date === day[i]) {
                        m_latlng[i] = new google.maps.LatLng(lat[i], lng[i]);
                        dayLat.push(lat[i]);
                        dayLng.push(lng[i]);
                        marker[i] = new google.maps.Marker({
                            position: m_latlng[i],
                            map: map,
                            // ポインタのアイコンは Google Charts を使用します
                            icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|' + recno[i] + '|FF8060|000000'
                        });
                    }
                }
            }
            // マーカーがすべて表示するよう調整
            map.fitBounds(new google.maps.LatLngBounds(
                // sw
                {
                    lat: Math.min(...dayLat),
                    lng: Math.min(...dayLng)
                },
                // ne
                {
                    lat: Math.max(...dayLat),
                    lng: Math.max(...dayLng)
                }
            ));

            // 「position: relative」を外さないと地図が表示されないがラグが必要のため1秒後に実行
            setTimeout(() => {
                myWindow.document.getElementById('map').style.position = "";
            }, 1500);
        }
    });
})();
```

原因をご教授いただければ幸いです。

以上、よろしくお願いいたします。


GooglemapAPI　地図が動かない

下記のスクリプトで、出力が「1」ではなく「2」になるのはなぜですか？
3階層目のspanを指定しているので「1」が私が期待する値なのですが、そうなりません。

```ここに言語を入力
<span id="test">
	<span>
		<span></span>
	</span>	
</span>
<script>
var test = document.getElementById('test');
var list = test.querySelectorAll('span > span');
alert(list.length);
</script>
```

jsのquerySelectorAllについての質問

### 質問

JavascriptをつかったLazyloadingの実装方法について、クロムデベロッパーツールで確認しています。

intersection observer APIをつかってViewportが切り替わったタイミングでlazyloadingを実行させているか、もしくは単純にスクロールイベントが発生した時点でlazlyloadingを実行させているか、どちらの実装になっているかを、クロムのデベロッパーツールで確認する方法はありますでしょうか？


Lazy loading の実装方法の違いを(スクロールイベントかintersection observerか）をクロムデベロッパーツールで見分ける方法はありますか？

### javascriptファイルが読み込まれるタイミングがよくわからない
```test.html
<html>
  <head>
    <meta charset="UTF-8">
    <script type="module">
    console.log("インポート")
    import "./sideeffect.js"
    console.log("終了")
    </script>
  <head>
</html>
```
```sideeffect.js
console.log("モジュールの副作用")
```
上のような二つのファイルがあったときにconsole上の実行結果が
```
モジュールの副作用
インポート
終了
```
のような順番になるのがなぜかわかりません。importしているところで読み込まれて
```
インポート
モジュールの副作用
終了
```
のような順番でconsoleに残るのではないのでしょうか？





JavaScriptファイルをimportした際の実行の順番がわからない

### 前提

ここに質問の内容を詳しく書いてください。

vscodeを利用してhtml,cssでwebサイトを作成しています。

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- [ ] vscodeでカーソルが勝手に移動することを防ぎたいです

### 発生している問題・エラーメッセージ

```
cssを記述している際に記述を途中で止めると、勝手にした側の[output]タブのautoprefixerへ移動します。
```

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

```ここに言語名を入力

```

### 試したこと

autoprefixerの設定を確認してみましたが、解決方法がわからなかったため教えていただきたいです。

### 補足情報（FW/ツールのバージョンなど）




vscodeでカーソルが勝手に移動してしまう

### 実現したいこと
Google Fonts の Icon (https://fonts.google.com/icons) を使用し、アイコンの配置をしたいです。
その中でアイコンまわりに、Google Fonts 既定?のスペースが存在し、それを取り除きたいのですが、取り除く解決策がみつからず質問させていただきます。

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  
  <link rel="stylesheet" href="css/styles.css">
  <title>管理画面</title>
</head>

<body>
  <div class="main">
    main
    <div class="container">
      container
      <span class="material-icons-round search">search</span>
    </div>
  </div>
</body>

</html>
```

```css/styles.css
body {
  margin: 0%;
}

.container {
  padding: 40px;
  background-color: red;
}

.search {
  font-size: 24px;
  display: block;
  background-color: skyblue;
}
```

### 参考画像
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-15/16076345-dcff-4f12-a75e-57ea6ef06a18.png)

### 試した環境
Mac (Monterey)
Chrome (バージョン: 103.0.5060.114)

### 試したこと
開発者ツールにて当該スペースは、padding, margin では無いことを確認しております。

宜しくお願いいたします。

Google Fonts の Icon に存在するスペースを調節・排除したい


VSコードを使用していて、突然エクスクラメーションマークの予測変換だけが効かなくなりました。
その他の予測変換は問題なく機能しています。
どうすれば直りますでしょうか？


### 試したこと

VSコードのアンインストール、再インストール

### 補足情報（FW/ツールのバージョンなど）

使用しているのは最新版のVSコードです。


VSコードのエクスクラメーションマークの予測変換が効かない

ブラウザサイドJavaScriptに`DOMParser`というクラスがあって、HTMLやXMLのパースを行えます（[MDN](https://developer.mozilla.org/ja/docs/Web/API/DOMParser)）。

…それ自体はいいのですが、特に`DOMParser`インスタンスで設定すべきことがないにもかかわらず、`new DOMParser`でインスタンスを作ってから、`instance.parseFromString`とする必要があります。

[HTML LS](https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-parsing-and-serialization)いわく、「歴史的経緯でこんな形となってしまっている」とのことですが、「都度`(new DOMParser).parseFromString()`のようにインスタンスを作成してパースを行う」のと、「事前に一度`new DOMParser`で作ったインスタンスを変数に入れておいて、毎回の呼び出しを同じインスタンスから行う」のと、どちらがより好ましいコードなのかが気になるところです。

「このような点を考えればこちらがいい」という情報をいただけましたら幸いです。

DOMParserのインスタンスについて

970px以上で動作するメガメニューを作りたいのですが、困っていることが２つあります。
（ブラウザはChromeとEdgeとFireFoxを使って確認しました。２つの困りごとどちらともFireFoxのみ下記のようになってしまいます。）
分かりにくい説明で申し訳ありませんが、教えていただけるとありがたいです。
よろしくお願いします<(_ _)>


### 【困りごと１】
li#megabtn にカーソルが乗った状態でページをリロードすると、「li#megabtn からカーソルが離れたときに #megabtnに .is-active がついて、li#megabtn にカーソルが乗った時に #megabtnの .is-active が消える」という風になってしまいます。
ページをリロードした時に li#megabtn にカーソルがある場合でも、#megabtnに .is-activeをすぐにつけるにはどうしたら良いでしょうか。。

### 【困りごと２】
上記のように、li#megabtn にカーソルが乗った状態でページをリロードすると、「li#megabtn から下にカーソルを動かしたときに#megabtnの .is-activeが付いたり消えたり」してしまいます。
（バブリングというのでしょうか？stoppropagationを使ってみたりしたのですが、解決できませんでした。）


```HTML
 <ul id="menu-test" class="nav navbar-nav dropdown">
                     
     <li id="megabtn" class="start">
		<a class="dropdown-toggle hover-btn sp-hide" href="products/">
          商品情報<b class="caret"></b>
		</a>
		<div class="megamenu">
			<div class="container megawrapper">
				<p class="topcategory">商品情報</p>
            	<dl class="megamenu-inner">
					<dt>商品カテゴリ１</dt>
                      	 <dd>
							  <ul>
								  <li><a href="products/01/"><img class="res" src="/images/products01.png" alt="商品１"><span>商品１</span></a></li>
								  <li><a href="products/02/"><img class="res" src="/images/products02.png" alt="商品２"><span>商品２</span></a></li>
								  <li><a href="products/03/"><img class="res" src="/images/products03" alt="商品３"><span>商品３</span></a></li>
							  </ul>
						 </dd>
            	  </dl>
				  <ul class="bottom-menu">
					  <li><a href="product/">商品一覧へ</a></li>
					  <li><a href="products/">商品詳細へ</a></li>
				  </ul>
			  </div>
			</div>
       </li>

       <li id="dropdown2">
           <a class="dropdown-toggle" href="menu2/">
               メニュー２<b class="caret"></b>
           </a>
           <ul class="dropdown-menu">
              <li><a href="link1/">リンク１</a></li>
              <li><a href="link2">リンク２</a></li>
              <li><a href="link3">リンク３</a></li>
           </ul>
        </li>
  
   </ul>


```
```JavaScript
<script>
$(window).resize(function(){
	
	$(function(){
	var w = $(window).width();
	var x = 970;
	if(w >= x)
	{

$(function () {
  $('#megabtn').hover(function(){
      $('#megabtn').toggleClass('is-active');
  });
}),
$(function () {
  $('#dropdown2').hover(function(){
      $('#dropdown2').toggleClass('open');
  });
})
	}
});	

});	
</script>
```
```CSS
	div.megamenu {
	   display: none;
	   overflow: auto;
       position: absolute;
       top: 50px;
       left: 0;
       max-height: calc(100vh - 50px);
       padding: 1.5em 0 3em;
       z-index: 100;
	   width: 1180px;
	   margin-top:0!important;
}


	#megabtn.is-active div.megamenu {
       display: block;
       animation: show .5s ease 0s forwards;
        -webkit-animation: show .5s ease 0s forwards;
}
```



hoverした状態でページをリロードすると意図した動作と逆になる＆バブリング？してしまう

WebpackでJavaScriptをバンドルする環境を作っていたのですが、以下のような意味不明な事態に見舞われています。

* バンドル時に何のエラーも出さず、結果から一部のファイルがバッサリ除外されてしまう
* 上記の現象が、JavaScriptファイルにコメントを追加しただけで発生することもある（JSファイルでも発生したので、TypeScriptコンパイラの影響の線は薄いです）
* 状況がヒステリシスを持つ（コメントを追加して結果異常になったあと、コメントを削除しても正常な結果に戻らず、コメントを追加したファイルの読み込みを解除してから再度読み込みを書き直して、ようやく正常に動作する）

これだけ豪快な現象が起きているのですが、Webpackからのエラーは全く出ないし、`devServer.client.logging`も`verbose`としているものの、それらしいログが出力されている様子も見受けられない状況です。

なにか該当しそうな不具合、あるいは詳細なログの出力法など、手がかりとなる情報をいただけましたら幸いです。

### バージョン

* `@babel/core 7.18.5`
* `webpack 5.73.0`
* `webpack-dev-server 4.9.2` ※ dev-server経由でなくソースコードをwebpack単体で出力しても同現象が発生しました
* `@babel/plugin-transform-typescript 7.18.4` ※ JSでも同現象が発生
* `babel-loader 8.2.5`


不安定なWebpack環境の原因調査について

以下の様な形でresponseType: 'blob'でデータを受け取りpdfとしてDLできるようにしていました。

```ts
    const res: AxiosResponse = await Axios.post('/get/blob', input, {
       responseType: 'blob',
    })
```

しかし、このapiはエラーの場合jsonを返してくる様です。その場合どのようにjsonの中身を取得すれば良いでしょうか？取得するまでそれがblobかjsonが分からないため、取得してからblob→jsonに変換してみる必要があるのでしょうか？

お手数ですがこの辺りご存知の方ご教示いただけますと幸いです。

axiosによるリクエストで、blobかjsonかどちらが返るか分からないApiの受け取りについて

iframe srcに直接mp4を読み込むと読み込めないものがあり、
videoタグで指定すると読み込めるものがあります

読み込めない場合のエラー iframeに表示される内容
ファイル形式が～というエラー
iframeでは上記が出てもvideoなら出ない


iframe × video ●
iframe ● video ●
というケースがあります

当該URLは外部ドメインでどちらも同じmp4のURLを指定しています
読み込めるものと読み込めないものの違いはどこからくるのでしょうか
クロスドメインやらが関係しているのでしょうか？

iframe経由のmp4とvideoタグ

font-sizeをpxで指定した場合端末の大きさ関係なく、同じ文字サイズになるのでしょうか？
ならない場合、単位は何で指定すれば同じになりますでしょうか？

CSS font-size px

テキストエリアの行端の位置で半角スペースを2回入れると自動的に改行コードが挿入されるのですが、
これはhtml5のテキストエリアの仕様上このような挙動となるのでしょうか。
また、この場合、改行コードを挿入されるのを止める手段があるのでしょうか。
ご教授いただければと思います。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-31/233ebe7f-b37f-4dbd-99d0-3698bafa5c99.png)

追記
テキストエリアの内容の確認について
　テキストエリアの内容をすべて選択してテキストエディタにコピーペーストをして確認をしました。

テキストエリアに自動的に改行が入る場合がある

jsで暗号化したメールをページ内で複数個所設置したいのですが、ヒアドキュメントで出力するとうまく表示できません。
レクチャーいただければ幸いです
```ここに言語を入力
document.addEventListener('DOMContentLoaded', function() {
const targetElement = document.querySelector('.js-mail');
const HtmlDoc = `
<script type="text/javascript">

</script>
`;
targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
});
```

```ここに言語を入力
 <div class='js-mail'></div>
```

jsで暗号化したメールをページ内で複数個所設置したいのですが、ヒアドキュメントで出力するとうまく表示できません

XHRで受信処理で結果をappendで出力する際にサーバーの通信が遅かった場合などに２重処理されるような事象が発生します
再現性は低いです
remove()で削除してからappendしているので
絶対にa
a
となることはないはずなのですが。
同じようなケースに遭った方いらっしゃいましたら教えて下さい

```ここに言語を入力
let formdata = new FormData();
formdata.append("a","a");
let xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
Array.from(document.querySelectorAll('div'), i => {
i.remove();
});
div=document.createElement("div");
div.style.width="30px";
div.style.height="30px";
div.innerHTML=xmlhttp.responseText;
document.body.appendChild(div);
/*
xmlhttp.responseTextの中身がaだと仮定すると、
a
aとなって表示される時がある
*/
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);


```


XHR+append

cssで `outline: none;` を指定するとフォームのアウトラインが消せたり
またこのプロパティでアウトラインの色を変更することができるはずですが
なぜかこの指定が一向に一向に効いてくれません。

以下の記述で間違ってる点はありますか？

```html
<input type="text" class="input" name="title" placeholder="タイトルを入力" value="" />
```
```css
.input {
    outline: none;
}
```

### 詳細
WordPress オリジナルプラグイン制作中

```php
// 他省略

// 入力用関数
function insert_custom_fields()
{
    global $post;
    echo '
            <li class="form">
                <div class="title">タイトル<span>必須</span></div>
                <input type="text" class="input" name="title" placeholder="タイトルを入力" value="'.get_post_meta($post->ID, 'title', true).'" />
            </li>';
// 省略
}
```
※cssは上と同じ

[WordPress][css] WordPressのオリジナルプラグインでoutline: none;が効かなくなってる

videoタグの再生ボタンを非表示にしたいです。

【現状】
背景動画を設置したのですが低電力モードに設定していると再生されないので代わりに背景画像を表示させているのですが、再生ボタンが表示されて見栄えが悪くなってしまいます。

・低電力モード時 ※↓画像(再生ボタンが表示)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-17/8a05e033-a88f-45d3-8860-7fa6fa5e4471.png)

・低電力モード解除時　※↓動画(自動再生します)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-17/141b5eea-4313-4d26-a171-19ce51048e26.png)


【試したこと】
１.ググってみたら、videoタグに「controls」を外すと再生ボタンは表示されない。という記事を見て試したのですが、結果は変わらずの状態です

２.safariでソースコードをみたらhtmlに「シャドウコンテンツ(ユーザーエージェント)」というのがあり開いてみたらソースコード上で再生ボタンを編集できたので実際にcssを書いたのですが反映はされませんでした。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-17/40f68f45-5ce1-4402-bbf7-31369229e8c4.png)

【質問】
背景画像が表示される際に再生ボタンを非表示にする方法を教えてください。


・html
```ここに言語を入力
<video class="video" poster="img/bg_img.jpg" autoplay muted loop playsinline>
  <source src="video/bg_video.mp4" type="video/mp4">
  <source src="video/bg_video.ogv" type="video/ogv">
  <source src="video/bg_video.webm" type="video/webm">
</video>
```

・css
```ここに言語を入力
.video{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
```