常連

テラテイラー

回答者

ベストアンサー

拍手喝采

プロフェッサー

先生

情報収集家

鑑定士

自己紹介

有名人

###実現したいこと
埋め込んだiframeタグ、audioタグ、videoタグ、などなど含め、

とりあえず「WEBサイトから発せられるすべての音」を調整したい

のですが、もしそのような方法がございましたら教えて頂けませんでしょうか。

###実装イメージ
音量調整バーを設置し、それをいじると「WEBサイトから発せられるすべての音」が調整できるということです。不可能でしょうか？

イメージとしては以下で、

var volume = '「WEBサイトから発せられるすべての音」';

が代入できればという感じになります。


```html
<div>
  <button type="button" onclick="volumeControl(1);">音量を上げる</button>
  <button type="button" onclick="volumeControl(-1);">音量を下げる</button>
</div>
```
```js
<script type="text/javascript">
    function volumeControl(flag) {
      var volume = '「WEBサイトから発せられるすべての音」';
      if (0 < flag) {
        if (0.9 < volume) {
          volume = 1;
        } else {
          volume  += 0.1;
        }
      } else {
        if (volume  < 0.1) {
          volume = 0;
        }
        else {
          volume -= 0.1;
        }
      }
    }
</script>
```
例えばFirefoxの場合ですがブラウザのタブの音量アイコンをクリックすると、「WEBサイトから発せられるすべての音」を

消すか否か

だけは調整できるので、それを踏まえれば今回の質問も技術には可能だろうと思ったのですが…

WEBサイトの音量を調整する方法（たぶんJavaScript？）

htmlでrequired属性のついたinputタグをJSで制御したいのですが、良い方法を教えてください。

### やりたいこと
以下の入力フォーム(テーブルで整えています。)があり、ラジオボタン(A,B)より選択したフォームのみ表示したいです。注意点として入力欄Bのタグにはrequired属性のあるタグがあり、入力しないと送信できないようにしています。

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
    </script>
  </head>

  <body>
    <form action="hoge" method="post">
      <table>
        <tr>
          <th>切替</th>
          <td>
            <label>
              <input type="radio" name="class" value="0" checked="checked">
              Aを表示
            </label>
            <label>
              <input type="radio" name="class" value="1">
              Bを表示
            </label>
          </td>
        </tr>
        <tr>
          <th>A</th>
          <td><input type="text"/></td>
        </tr>
        <tr>
          <th>B</th>
          <td><input type="text" required/></td>
        </tr>
        <tr>
          <td><input type="submit" value="submit"></td>
        </tr>
      </table>
    </form>
  </body>
</html>
```



### 実装
いまのところdisplayによる表示切替制御を考えましたが、これだとブラウザで表示されないだけで、見えてなくても裏でrequiredが有効になっているみたいでした。結局表面上Aを選択したところで、Bにも入力していないといけないみたいなんで詰んでます。
以下、上記の変更箇所だけ記述
```html
// javascript
<script type="text/javascript">
  function toggle() {
    var isChecked = document.getElementById("radio").checked
    var aElems = document.getElementsByClassName("a")
    var bElems = document.getElementsByClassName("b")
    if (isChecked) {
      aElems[0].style.display = ""
      bElems[0].style.display = "none"
      }
    }else {
      aElems[0].style.display = "none"
      bElems[0].style.display = ""
      
    }
  } 
</script>

// イベント
<label>
  <input id="radio" type="radio" name="class" value="0" checked="checked" onclick="toggle()">
  Aを表示
</label>
<label>
  <input type="radio" name="class" value="1" onclick="toggle()">
  Bを表示
</label>

<tr class="a">
　<th>A</th>
　<td><input type="text"/></td>
</tr>
<tr class="b">
　<th>B</th>
  <td><input type="text" required/></td>
</tr>
```
ラジオボタンをイベントハンドラとして、Aを選択したときには必須項目のBのテーブルレコードを消し去りたいのですが他に方法はないでしょうか？


### 補足(縛り)
応急処置として、jsのif処理の最後に
bElems[0].children[1].children[0].value="null"(Aが選択された場合)
bElems[0].children[1].children[0].value=""(Bが選択された場合)
みたいに文字列を入れてごまかすことはできますが、これだとAを選択して送信した場合、form先にBのvalueに"null"が入って送られてしまうので避けたいです。

html JSでrequiredのタグを非表示切り替えたい

**したいこと**

Bootstrapを使って横にもカードを表示させ、最終的には縦5×横4でカードを表示したいです。

現状の画像

![イメージ説明](1be16d209366b42ec3966b7f2f170f95.png)

その他
Rubyonrailsを使ってアプリを作成しています。

```html
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="gymbox">
        <div class="gymtitle">
          <%= link_to (gym.name), gym_path(gym) %>
        </div>
        <div class="delete">
          <% if current_user?(gym.user) %>
          <%= link_to "削除", gym, method: :delete,
          data: { confirm: "削除しますか？" } %>
          <% end %>
        </div>
        <div class="gympicture">
          <% gym.picture.each do |picture| %>
          <%= image_tag picture.url  %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

```

```css
.gymbox {
  width: 500px;
  height: 400px;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  padding : 20px;
  box-shadow: 0 2px 5px #ccc;
  margin : 10px;
}

.gymtitle {
  font-size: 30px;
  margin-bottom: 10px;
  color: #333;
}

.delete{
  font-size: 14px;
  line-height: 1.5;
}

```

【CSS・Bootstrap】カードを縦だけでなく横に3列程度表示したい

### 前提・実現したいこと

グローバルメニューを作成しています。
【PC】768px～
　→　横並びメニュー
　→　メニューをホバーすると子メニューがスライドダウンする
　→　スマホ時のクリックイベントを解除したい

【スマホ】768px以下
　→　ハンバーガーメニュー
　→　ハンバーガーメニューをクリックしてメインメニューを表示する
　→　メインメニューの中にある子メニューをクリックしてスライドダウンで表示させたい
　　※この部分をPCサイズ表示ではホバーにしたいです。

いろいろ参考にしながら3回作ってみたのですが、
それぞれどこかしらに問題があるようで、挙動がおかしいです。
どこが悪いのか、ご教示いただけないでしょうか。

一応、１についてはローカルで作成したところうまく動いていたのですが、
Codepenやお客様のデモ環境にアップロードすると後述の通り、
「スマホサイズにした時に、オンマウスすると子メニューが開いてしまう」
といった現象が発生してしまいます。


以下、デモになります。
基本的にはクロームのデベロッパーツールを使ってブラウザ動かしながら作業しています。

1　[https://codepen.io/lingwood/pen/gOpyLwZ](https://codepen.io/lingwood/pen/gOpyLwZ)

→　PCサイズの時にはJQueryでホバーアクションつけています。

問題点1
PCサイズで表示した際に、オンマウスでメニュー表示はされますが、トリガーとなっているメニューをクリックしても子メニューがスライドアップ、スライドダウンが発生してしまいます。

問題点2
スマホサイズにした時に、オンマウスすると子メニューが開いてしまいます。


2　[https://codepen.io/lingwood/pen/JjdVbwZ](https://codepen.io/lingwood/pen/JjdVbwZ)

→1をもっとスマートにしたい、JQueryを簡単に書きたい

問題点1
PCサイズで表示した際に、メニュー2の子メニューが開きっぱなしになってしまっています。

問題点2
スマホサイズで表示した際に、オンマウスでスライドダウンしてしまいます。
また、クリックアクションが動きません。


3　[https://codepen.io/lingwood/pen/ZEGZBNJ](https://codepen.io/lingwood/pen/ZEGZBNJ)

→PCサイズの時にはCSSでホバーアクションつける記述になっています。

問題点1
スマホからPCサイズにリサイズするとホバーアクションが解除されてしまっています。（サンプルデモメニューの1）

問題点2
スマホサイズにした時に子メニューが開きっぱなしになってしまいます。
またこれを解決しようとして.hide()やCSSでdisplay:noneを付けると今度はスライドしなかったり
いろいろと問題が発生します。


1週間くらい考えこんでおりまして・・・どうか助けていただけないでしょうか
よろしくお願いします。

グローバルメニューを正しく動作させたい

svg画像のpathの部分に背景画像のbackground-imageを設定したいのですが、うまくできません。
技術的に可能なのでしょうか？

例えば、wikipediaのsvgで作られた[世界地図](https://upload.wikimedia.org/wikipedia/commons/9/9f/BlankMap-World-Equirectangular.svg)に、国別で好きな背景を挿入することは可能でしょうか？

```html
<svg>
<g id="fr">
         <g class="land coast fr fx" id="fx">
                            <path d="M1246.81,392.88C1246.42,392.57 1245.99,392.30 1245.52,392.08C1245.67,392.60 1246.13,392.96 1246.81,392.88" id="path2166" />
                            <path d="M1254.06,395.85C1253.80,395.43 1253.79,395.27 1253.12,395.39C1253.43,395.54 1253.74,395.70 1254.06,395.85" id="path2168" />
                            <path d="M1260.65,401.67C1260.32,401.14 1259.45,401.26 1258.93,401.34C1259.52,401.35 1260.10,401.47 1260.65,401.67" id="path2172" />
                            <path d="M1261.16,404.38C1261.66,403.73 1260.97,402.62 1259.94,403.06C1260.47,403.42 1260.88,403.86 1261.16,404.38" id="path2174" />
                            <path class="land fr fx" d="M1234.28,387.06C1235.26,386.67 1236.46,386.43 1237.60,386.59C1237.86,385.20 1235.66,386.16 1235.09,385.21C1236.12,384.92 1237.36,385.03 1238.45,385.07C1237.58,384.95 1236.45,385.20 1236.98,384.35C1236.32,384.32 1234.17,385.34 1233.82,384.44C1233.33,383.23 1235.57,382.49 1236.65,382.32C1238.10,382.08 1239.49,381.99 1240.99,382.02C1243.11,382.07 1244.32,380.41 1246.69,380.64C1246.48,381.25 1249.48,383.39 1250.24,383.13C1250.76,382.92 1251.25,382.69 1251.72,382.42C1252.75,381.94 1252.73,382.56 1253.63,382.70C1254.53,382.83 1255.16,382.27 1255.31,383.42C1255.86,383.10 1254.98,382.72 1255.42,382.20C1255.86,381.67 1256.17,382.48 1256.60,382.57C1257.63,382.78 1258.91,382.56 1259.91,382.43C1257.72,381.92 1258.33,379.47 1258.41,378.20C1258.45,377.58 1257.23,376.95 1256.80,376.52C1256.06,375.77 1256.61,374.64 1255.57,374.03C1256.33,374.14 1257.04,374.43 1257.80,374.55C1258.62,374.69 1259.58,374.05 1260.32,374.34C1261.47,374.79 1260.18,376.13 1261.77,376.84C1262.23,377.04 1263.00,376.68 1263.46,376.68C1264.81,376.67 1266.12,377.03 1267.44,377.23C1268.73,377.42 1269.83,377.39 1270.94,376.87C1271.95,376.40 1273.34,376.42 1274.24,375.88C1273.51,376.12 1272.26,376.24 1271.51,375.91C1270.01,375.24 1273.28,373.59 1273.83,373.38C1275.58,372.75 1277.60,372.82 1279.38,372.24C1280.41,371.91 1281.69,369.95 1283.03,370.50C1281.85,369.90 1282.28,365.75 1283.19,364.98C1284.08,364.21 1288.80,362.83 1290.08,363.67C1290.74,364.10 1289.60,365.74 1291.45,366.11C1293.37,366.49 1292.91,366.14 1294.26,366.47C1295.53,366.77 1295.17,367.55 1296.16,367.93C1297.44,368.42 1298.69,367.84 1298.60,369.42C1299.33,369.02 1300.64,369.11 1301.44,369.34C1302.96,369.75 1302.39,371.25 1302.13,372.11C1303.13,372.25 1304.27,372.49 1305.25,372.18C1306.22,371.86 1306.41,370.95 1307.38,370.63C1307.49,371.13 1307.31,373.35 1308.15,373.38C1309.38,373.41 1311.90,374.71 1312.31,375.65C1312.19,375.38 1317.00,376.00 1317.24,376.02C1318.41,376.10 1319.27,375.90 1320.21,376.67C1320.95,377.28 1321.48,378.23 1322.59,378.46C1322.82,378.37 1323.01,378.24 1323.15,378.06C1323.50,377.76 1323.68,378.15 1324.06,378.20C1324.27,378.26 1324.33,378.38 1324.24,378.54C1324.18,378.90 1325.22,378.71 1325.40,378.72C1326.57,378.80 1327.24,378.22 1328.33,378.89C1329.50,379.59 1331.88,379.72 1333.33,379.92C1331.58,381.17 1329.96,382.54 1329.42,384.41C1329.16,385.31 1328.50,386.14 1328.34,387.06C1328.23,387.65 1328.49,387.90 1328.20,388.66C1327.86,389.59 1328.74,390.36 1327.98,390.94C1327.34,391.42 1326.85,391.89 1325.87,391.82C1325.05,391.76 1324.97,390.78 1323.99,391.22C1323.29,391.54 1323.24,392.57 1324.42,392.41C1323.54,393.17 1322.78,394.07 1321.77,394.73C1321.16,395.06 1320.56,395.40 1319.97,395.76C1319.49,396.12 1319.55,396.82 1319.15,397.24C1318.46,397.95 1317.11,398.28 1316.92,399.29C1317.09,399.63 1317.21,399.98 1317.28,400.35C1317.12,401.00 1316.39,401.23 1316.10,401.80C1317.43,401.66 1317.91,401.29 1318.24,400.25C1318.57,399.22 1320.89,399.30 1321.83,399.52C1322.96,399.78 1322.23,401.29 1323.06,402.02C1324.51,403.30 1323.64,403.78 1322.38,404.64C1323.07,405.43 1325.65,406.89 1324.97,408.04C1324.51,408.82 1321.02,409.88 1321.03,410.01C1321.11,410.92 1323.27,411.69 1324.01,412.21C1325.09,412.95 1322.57,414.27 1322.95,415.25C1323.42,416.45 1326.24,417.80 1327.71,417.32C1329.56,416.71 1329.29,417.59 1328.60,418.60C1326.95,421.03 1323.75,422.26 1320.90,423.84C1321.09,424.07 1321.28,424.28 1321.48,424.50C1320.41,424.62 1319.52,425.07 1318.53,425.36C1317.46,425.67 1316.76,425.18 1315.74,425.25C1314.20,425.35 1313.22,424.29 1311.38,424.43C1312.08,422.86 1308.94,424.07 1308.88,423.15C1309.07,422.87 1309.39,422.80 1309.82,422.93C1309.78,422.42 1309.39,422.13 1308.76,422.15C1309.31,422.81 1308.86,422.91 1308.13,422.94C1306.93,422.99 1306.80,422.93 1306.44,421.76C1306.94,424.10 1306.17,422.60 1304.32,422.60C1303.25,422.60 1302.36,422.05 1301.31,422.01C1300.03,421.96 1298.67,423.14 1297.55,423.57C1296.68,423.90 1293.60,424.85 1293.83,425.83C1293.82,426.16 1293.72,426.46 1293.51,426.74C1293.03,427.10 1293.08,427.42 1293.68,427.70C1294.16,428.84 1293.89,429.41 1294.74,430.50C1293.99,430.68 1293.32,430.37 1292.57,430.40C1291.79,430.44 1291.42,430.95 1290.73,431.11C1289.08,431.48 1288.00,430.06 1286.44,431.02C1286.33,431.08 1284.06,430.23 1283.81,430.08C1283.17,429.70 1284.60,429.75 1283.57,429.19C1282.98,428.87 1281.92,428.73 1281.45,429.26C1281.17,428.09 1279.62,428.58 1278.74,428.03C1277.52,427.26 1275.08,426.77 1275.55,428.61C1274.22,428.45 1272.72,428.18 1271.40,428.38C1270.67,428.49 1270.19,428.66 1269.53,428.20C1268.36,427.37 1268.46,427.71 1267.33,427.70C1266.20,427.68 1260.56,424.74 1260.07,425.93C1259.02,425.58 1259.71,424.97 1259.74,424.37C1259.77,423.67 1257.29,423.99 1256.73,423.45C1259.83,422.49 1259.87,418.90 1260.30,416.57C1260.47,415.65 1260.59,414.20 1261.48,413.55C1262.79,412.59 1260.95,412.46 1260.89,413.54C1260.56,411.33 1260.92,408.59 1261.95,406.56C1263.12,407.08 1264.29,407.70 1264.84,408.74C1264.98,409.21 1265.12,409.67 1265.26,410.13C1265.56,410.72 1266.28,410.80 1266.30,411.51C1266.57,410.60 1265.38,409.88 1265.22,409.01C1264.97,407.66 1264.33,406.75 1262.83,406.10C1262.20,405.82 1261.49,405.45 1260.96,405.05C1260.08,404.39 1262.27,404.72 1262.73,405.04C1261.68,404.64 1261.38,401.10 1261.93,400.41C1260.64,401.18 1257.37,399.67 1256.67,398.66C1256.05,397.76 1254.77,397.29 1254.44,396.24C1254.14,395.28 1256.22,394.23 1253.50,394.13C1253.79,393.83 1253.81,393.27 1254.21,393.04C1255.20,392.45 1256.23,393.44 1257.21,393.54C1255.41,392.61 1254.75,392.92 1252.96,393.11C1252.05,393.21 1250.21,392.12 1251.87,391.95C1251.37,391.58 1251.54,391.34 1252.38,391.23C1251.07,390.97 1249.31,391.81 1248.19,390.89C1248.77,390.89 1249.30,390.78 1249.80,390.56C1248.73,390.01 1246.85,390.23 1246.67,391.36C1246.58,390.62 1245.51,389.94 1246.42,389.31C1246.09,390.11 1244.31,390.06 1245.33,389.04C1243.21,390.63 1239.85,387.02 1237.73,388.98C1236.72,387.95 1235.89,387.32 1234.28,387.06" id="path2182" />
                            <path d="M1336.17,430.89C1336.63,430.52 1336.71,429.75 1337.31,429.50C1338.52,429.00 1339.89,428.87 1341.04,428.25C1342.06,427.69 1341.33,426.10 1342.72,426.19C1342.90,428.18 1344.07,431.05 1343.50,432.98C1342.90,435.01 1341.70,436.96 1340.64,438.85C1340.23,438.31 1336.36,437.15 1338.42,436.44C1337.86,436.33 1337.33,436.15 1336.84,435.92C1337.38,435.63 1337.76,435.16 1337.69,434.61C1336.59,434.83 1336.43,433.81 1337.06,433.31C1336.12,433.11 1335.52,432.09 1336.81,431.87C1336.54,431.57 1336.33,431.24 1336.17,430.89" id="path2184" />
                        </g>
                        <g class="land coast fr gp" id="gp">
                            <path d="M799.95,633.49C799.66,634.01 799.49,637.30 798.32,635.06C797.67,633.80 798.33,632.56 799.95,633.49" id="path2582" />
                            <path d="M799.94,633.36C800.52,632.84 799.76,631.84 800.78,631.68C801.01,632.50 801.84,633.09 802.65,633.49C801.96,633.71 800.44,634.35 799.94,633.36" id="path2584" />
                            <path d="M802.18,636.52C801.51,635.96 801.60,635.68 802.45,635.68C802.62,636.05 802.53,636.33 802.18,636.52" id="path2586" />
                        </g>
                        <path class="land coast fr mq" d="M805.25,647.94C804.60,647.14 803.93,647.82 803.59,647.06C803.25,646.33 802.82,645.53 802.75,644.75C802.65,643.72 803.93,644.62 804.27,644.97C804.94,645.66 805.91,647.09 805.25,647.94" id="mq" />
                        <path class="land fr gf" d="M853.00,741.55C854.29,741.50 855.28,739.52 855.71,738.65C856.50,737.03 855.66,735.23 856.87,733.75C858.30,732.00 856.93,730.71 855.66,729.32C854.34,727.87 854.35,725.29 854.19,723.53C854.01,721.47 854.31,720.30 855.93,718.87C856.53,718.34 857.28,717.75 857.45,716.96C857.67,715.94 857.91,714.67 859.55,715.21C860.61,715.57 861.37,716.33 862.49,716.60C863.71,716.90 865.17,716.88 866.22,717.61C867.45,718.47 869.15,721.74 871.03,721.62C870.72,722.03 870.51,722.48 870.40,722.97C870.89,720.82 875.07,724.51 872.76,725.94C873.88,725.57 873.21,724.62 873.76,723.94C874.60,722.92 875.31,725.31 875.38,725.82C875.74,728.24 873.71,730.80 872.34,732.72C870.76,734.93 869.67,736.80 868.66,739.30C868.29,740.22 867.80,741.00 866.94,741.63C866.59,741.89 865.95,742.49 865.48,742.61C864.70,742.79 864.08,742.23 863.25,742.59C863.57,741.71 862.96,741.70 862.23,741.91C861.20,742.19 860.31,741.82 859.33,741.52C858.83,741.37 856.93,742.62 856.63,742.95C856.07,743.55 853.38,741.91 853.00,741.55" id="gf" />
                        <path class="land coast fr re" d="M1696.30,922.39C1696.04,920.61 1692.17,921.67 1692.77,923.37C1693.66,925.94 1699.15,926.15 1696.30,922.39" id="re" />
                    </g>
</svg>
```

```css
#fr{
background-image:url(img/sample.jpg);
background-size:contain;
}
```

上記のように設定しても反映されません。教えていただけましたら幸いです。

SVG画像のpathで描かれた各範囲に背景画像を設定したい

chartjsで折れ線グラフを作成しています。
凡例をクリックするとグラフが表示・非表示と切り替わるように、セレクトボックスの選択で表示・非表示を切り替えたいです。
セレクトボックスは3つのカテゴリーに分けて、表示したいグラフをそこから選ぶようにしたいです。

セレクトボックスでグラフの表示を切り替えることはできたのですが、
グラフ名とセレクトされた項目名が一致せず、つまづいています。
グラフ自体はサンプル1-1とサンプル3-0とサンプル3-1が表示されているのに、
セレクトボックスではサンプル1-0、サンプル1-1、サンプル1-2で切り替わってしまいます。

ご教授ください。
よろしくお願いいたします。


説明が分かりにくかったり、添付コードが不足していればご指摘ください。
下記、現在のコードです。
```html
<div class="col-sm-2 col-md-2 col-lg-2">
　<div class="form-group">
　　<label><span class="label-text">表示するグラフ（下記から選択）</span></label>
　　<select multiple="multiple" name="category_1" class="select-block selectpicker" title="カテゴリー1" data-selected-text-format="count > 0" data-count-selected-text="カテゴリー1">
　　　<option value="0" class="1_0" id="1_0">サンプル1-0</option>
     <option value="1" class="1_1" id="1_1">サンプル1-1</option>
     <option value="2" class="1_2" id="1_2">サンプル1-2</option>
　　　<option value="3" class="1_3" id="1_3">サンプル1-3</option>
     <option value="4" class="1_4" id="1_4">サンプル1-4</option>
     <option value="5" class="1_5" id="1_5">サンプル1-5</option>
     <option value="6" class="1_6" id="1_6">サンプル1-6</option>
　　</select>
　</div>
</div>
<div class="col-sm-2 col-md-2 col-lg-2">
　<div class="form-group">
　　<label class="hidden-xs"><span class="label-text">&nbsp;</span></label>
　　<select multiple="multiple" name="category_2" class="select-block selectpicker" title="カテゴリー2" data-selected-text-format="count > 0" data-count-selected-text="カテゴリー2">
　　　<option value="0" class="2_0" id="2_0">サンプル2-0</option>
　　　<option value="1" class="2_1" id="2_1">サンプル2-1</option>
　　</select>
　</div>
</div>
<div class="col-sm-2 col-md-2 col-lg-2">
　<div class="form-group">
　　<label class="hidden-xs"><span class="label-text">&nbsp;</span></label>
   <select multiple="multiple" name="category_3" class="select-block selectpicker" title="カテゴリー3" data-selected-text-format="count > 0" data-count-selected-text="カテゴリー3">
　　　<option value="0" class="3_0" id="3_0">サンプル3-0</option>
　　　<option value="1" class="3_1" id="3_1">サンプル3-1</option>
　　</select>
　</div>
</div>

<div class="row">
　<div class="col-md-10 col-lg-10">
　　<canvas id="myChart" style="max-width: none"></canvas>
　</div>
　<div id="chart-legends" class="col-md-2 col-lg-2 note" style="top: 72px"></div>
</div>
```

```js
// 文字数上、datasetsの諸々の設定は省略してあります。
//表示するグラフ選択
    var select_1 = document.querySelector('[name="category_1"]');
    select_1.addEventListener('change',() =>{
      for(var i = 0; i < select_1.length; i++) {
        try{
          var meta_1 = myChart.getDatasetMeta(i);
          if(select_1[i].selected) meta_1.hidden = false;
          else meta_1.hidden = true;
        }catch(e){
        }
      }
      myChart.update();
    });
    var select_2 = document.querySelector('[name="category_2"]');
    select_2.addEventListener('change',() =>{
      for(var i = 0; i < select_2.length; i++) {
        try{
          var meta_2 = myChart.getDatasetMeta(i);
          if(select_2[i].selected) meta_2.hidden = false;
          else meta_2.hidden = true;
        }catch(e){
        }
      }
      myChart.update();
    });
    var select_3 = document.querySelector('[name="category_3"]');
    select_3.addEventListener('change',() =>{
      for(var i = 0; i < select_3.length; i++) {
        try{
          var meta_3 = myChart.getDatasetMeta(i);
          if(select_3[i].selected) meta_3.hidden = false;
          else meta_3.hidden = true;
        }catch(e){
        }
      }
      myChart.update();
    });

    //グラフ初期表示
    var myChart = new Chart(ctx,myChart());
    document.getElementById('chart-legends').innerHTML = myChart.generateLegend();
```

chartjsでグラフを選択制にしたい

```html

 <body>
    <div class="filter wrapper">
      <ul class="flex">
        <li class="flex-item">
          <a href="#" data-filter="*" class="current button">ALL</a>
        </li>
        <li class="flex-item">
          <a class="button" href="#" data-filter=".filter-1">カテゴリー１</a>
        </li>
        <li class="flex-item">
          <a class="button" href="#" data-filter=".filter-2">カテゴリー２</a>
        </li>
        <li class="flex-item">
          <a class="button" href="#" data-filter=".filter-3">カテゴリー３</a>
        </li>
        <li class="flex-item">
          <a class="button" href="#" data-filter=".filter-4">カテゴリ−４</a>
        </li>
      </ul>
    </div>
    

    <div class="wrapper grid isotope">
      <div class="item filter-1">
        <img src="images/menu1.jpg" alt="" />
        <p>写真キャプション写真キャプション</p>
      </div>
      <div class="item filter-1">
        <img src="images/menu2.jpg" alt="" />
        <p>写真キャプション写真キャプション</p>
      </div>
      <div class="item filter-1">
        <img src="images/menu3.jpg" alt="" />
        <p>写真キャプション写真キャプション</p>
      </div>
    </div>
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./js/isotope.pkgd.min.js"></script>
    <script src="./js/app.js"></script>
  </body>
```

```css
@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
  font-size: 100%;
}
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
.flex {
  list-style-type: none;
  display: flex;
}

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

/* ボタン */
.button {
  font-size: 0.5rem;
  background: #0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
}
.button:hover {
  background: #0090aa;
}

.grid {
  margin-top: 6%;
  margin-bottom: 50px;
}
.grid .item {
  width: 20%;
}

/* MENU */
.menu-content {
  margin-top: 20%;
}
```

```js
// Isotopeの初期化設定
$(function() {
  var $container = $(".isotope");
  $(".isotope").isotope({
    itemSelector: ".item",
    masonry: {
      columnWidth: 100
    }
  });

  $(".filter a").click(function() {
    $(".filter .current").removeClass("current");
    $(this).addClass("current");

    var selector = $(this).attr("data-filter");
    $container.isotope({
      filter: selector,
      animationOptions: {
        duration: 750,
        easing: "linear",
        queue: false
      }
    });
    return false;
  });
});
```


上記jsを読みこむとコンテンツ全体が左によってしまい、中央にコンテンツが配置されません。よろしくお願いします。
https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.jsも読み込んでます。
![イメージ説明](41ae85ccee2aca31ea8b1a8fe76419fb.png)
![イメージ説明](6438e4372b2bd0a165a1c2ccbde0c46e.png)

コンテンツを中央に寄せたいです

自社のWEBサイトをHTMLとCSSで作成し、自社サーバーにFFFTPでアップロードしています。
画面上で見る分にはどの端末、ブラウザでも問題ないのですが、
Microsoft Edgeで自社のWEBサイトを印刷し、紙で確認すると、ゴシック体のフォントが文字化けします。
他のWEBサイトは普通に印刷されるので、コーディングに問題があると思うのですが原因がわかりません。

作業環境
OS：Windows10
プリンタ：RICOH IPSiO SP C820、FX DocuColor 5656 PSPX70 PS J5
 (程度は違いますが、同じ箇所が文字化けします)

該当のソースコード
```css
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese');
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,900);
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif\9;
	-ms-font-feature-settings: "normal";
}
p {    
    border: 0;
    outline: 0;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    vertical-align: baseline;
}
```
文字コードはUTF-8で作成しています。

このような質問をするのが初めてなもので、至らぬ点も多いと思いますがお知恵を貸していただけますと助かります。
よろしくお願いいたします。

WEBページをEdgeから印刷すると文字化けします

# 実現したいこと
2つのDataTableを受け、LINQを用いて特定のキーで外部結合し、SQLの`SELECT *`に相当する結果をDataTableで返す関数を実装したいです。
DataTableは任意のCSVを読み込んで作成するので、LINQメソッド内でSELECTするカラム名を指定できないため、このような質問をさせて頂きました。

# 現状
下記質問を参考に内部結合は実装できたのですが、
https://teratail.com/questions/131794
外部結合するための`GroupJoin`の使うまでは分かったのですが、正解の実装方法がわからない状態です。
``` C#
public class Program
{
    static void Main(string[] args)
    {
        // 結合されるデータテーブル
        DataTable dtX = new DataTable();
        dtX.Columns.Add("key", typeof(string));
        dtX.Columns.Add("valX", typeof(double));
        dtX.Rows.Add("AAA", 1);
        dtX.Rows.Add("BBB", 2);
        dtX.Rows.Add("CCC", 3);
        
        // 結合するデータテーブル
        DataTable dtY = new DataTable();
        dtY.Columns.Add("key", typeof(string));
        dtY.Columns.Add("valY", typeof(int));
        dtY.Columns.Add("valYY", typeof(int));
        dtY.Rows.Add("AAA", 10, 11);
        dtY.Rows.Add("BBB", 20, 22);
        
        // 結合実行
        GetJoinedDataTable(dtX, dtY);
    }
    
    // 結合メソッド
    public static DataTable GetJoinedDataTable(DataTable dtFrom, DataTable dtJoin)
    {
        DataTable dtResult = new DataTable();
        foreach (DataColumn column in dtFrom.Columns)
        {
            dtResult.Columns.Add("from." + column.ColumnName, typeof(string));
        }
        foreach (DataColumn column in dtJoin.Columns)
        {
            dtResult.Columns.Add("join." + column.ColumnName, typeof(string));
        }

        var methodQ = dtFrom.AsEnumerable().Join(
                                   dtJoin.AsEnumerable(),
                                   f => f["key"],
                                   j => j["key"],
                                   (f, j) =>
                                   {
                                       DataRow row = dtResult.NewRow();
                                       row.ItemArray = f.ItemArray.Concat(j.ItemArray).ToArray();
                                       dtResult.Rows.Add(row);
                                       return row;
                                   });

        return methodQ.CopyToDataTable();
    }
}
```

一応ｍ外部結合用メソッド実装tryしてみたのですが、
結合するデータテーブルに1つでもキーが不足している場合(結合結果カラムの値がNULLになる場合)正しいデータテーブルで結果が帰ってきません。
```
DataTable dtResult = new DataTable();
        foreach (DataColumn column in dtFrom.Columns)
        {
            dtResult.Columns.Add("from." + column.ColumnName, typeof(string));
        }
        foreach (DataColumn column in dtJoin.Columns)
        {
            dtResult.Columns.Add("join." + column.ColumnName, typeof(string));
        }

var methodQ = dtFrom.AsEnumerable().GroupJoin(
                           dtJoin.AsEnumerable(),
                           f => f["key"],
                           j => j["key"],
                           (f, tmpj) => new
                           {
                               f = f,
                               tmpj = tmpj
                           })
                           .SelectMany
                           (
                                    x => x.tmpj.DefaultIfEmpty(),
                                    (x, j) =>
                                    {
                                        DataRow row = dtResult.NewRow();
                                        row.ItemArray = x.f.ItemArray.Concat(j.ItemArray).ToArray();
                                        dtResult.Rows.Add(row);
                                        return row;
                                    }
                            );

```

実装できる方おられましたら、どうかお力添えお願い致します。

DataTableをLINQで結合した結果を列名指定せず一括でSELECTした結果を取得したい

### 前提・実現したいこと

svg画像がうねうね動くコンテンツを複数作成したいのです。
コンテンツが1つの時はうまく動いたのですが
コンテンツを複数に増やすと2個目以降は上手くうねうね動きません・・・。

元々コンテンツ1つの時は
<svg>のなかの<path>タグの名前は id="js-svg-body"のようにidで指定していましたが
複数に適用させるためclassに変更しています。

どのように指定すれば2つ目以降も同様のjsを適用できるでしょうか？？



codepenにもソースコードを載せています。
https://codepen.io/lisaaaan/pen/poJdxqZ

### 該当のソースコード
【複数で2個目以降が動かないバージョン】

```html

<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</div>

<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</div>
  
<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</div>
```

```js
let $svgBody = Snap('.js-svg-body'),
    path =['M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z',

'M646.924 390.1c-53.039-5.959-83.193-4.684-107.079 0-85.225 16.715-190.888 8.9-293.215 1-59.013-4.557-87.085-4.1-148.3 5.892-30.836 5.033-86.8-23.782-85.392-76.446 1.517-56.58-13.494-93.329-3.124-150.77C13.817 147.625-2.91 90.5.449 78.23 12.945 32.574 51.9 15.319 103.541 23.251c54.023 8.3 112.066 1.344 180.116-17.527C372.881-19.019 475.77 45.83 548.852 23.6 610.9 4.731 673.718 6.706 702.965 21.616c18.745 9.555 25.5 18.161 33.025 48.668C748 118.952 750 159.674 750 203.376c0 64.123-1.289 78.037-10.007 122.167-10.008 50.657-54.385 68.907-93.069 64.557z',
           
'M653.667 391.333c-52.723 8.487-79.008 8.146-114.167.716-85.046-17.972-190.864-6.4-293.248 1.012-88.639 6.418-146.646 9.473-181.65 4.382-30.933-4.5-56.006-18.33-52.063-76.228 3.633-53.342 25.516-86.246 2.058-140.674C4.777 157.757.446 87.413.044 74.463-1.4 27.793 33.058 24.889 84.6 20.665 138.623 16.237 215.619-3.775 283.284.629c92.412 6.014 194.364 13.926 265.224 18.2 64.745 3.911 81.191-4.5 136.163-9.371 20.963-1.857 61.017 25.576 58.006 59.063-4.57 50.833-30 90.653-10 131.363 28.693 58.4 17 124.235-1 145.619-33.608 39.927-41.93 40.021-78.01 45.83z'], 
    
    SPEED =1500, 
    EASING = mina.linear, 
    i = 0; 




function AnimationSvg(){
  
  $svgBody.animate({d: path[i] },SPEED,EASING,AnimationSvg);
  
  i++;
  
  if(i === path.length){
    i = 0; 
  }
}

AnimationSvg();


```

【1つで動くバージョン】
```html
<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" id="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</svg>
</div>

```
```js
let $svgBody = Snap('#js-svg-body'),
    path =['M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z',

'M646.924 390.1c-53.039-5.959-83.193-4.684-107.079 0-85.225 16.715-190.888 8.9-293.215 1-59.013-4.557-87.085-4.1-148.3 5.892-30.836 5.033-86.8-23.782-85.392-76.446 1.517-56.58-13.494-93.329-3.124-150.77C13.817 147.625-2.91 90.5.449 78.23 12.945 32.574 51.9 15.319 103.541 23.251c54.023 8.3 112.066 1.344 180.116-17.527C372.881-19.019 475.77 45.83 548.852 23.6 610.9 4.731 673.718 6.706 702.965 21.616c18.745 9.555 25.5 18.161 33.025 48.668C748 118.952 750 159.674 750 203.376c0 64.123-1.289 78.037-10.007 122.167-10.008 50.657-54.385 68.907-93.069 64.557z',
           
'M653.667 391.333c-52.723 8.487-79.008 8.146-114.167.716-85.046-17.972-190.864-6.4-293.248 1.012-88.639 6.418-146.646 9.473-181.65 4.382-30.933-4.5-56.006-18.33-52.063-76.228 3.633-53.342 25.516-86.246 2.058-140.674C4.777 157.757.446 87.413.044 74.463-1.4 27.793 33.058 24.889 84.6 20.665 138.623 16.237 215.619-3.775 283.284.629c92.412 6.014 194.364 13.926 265.224 18.2 64.745 3.911 81.191-4.5 136.163-9.371 20.963-1.857 61.017 25.576 58.006 59.063-4.57 50.833-30 90.653-10 131.363 28.693 58.4 17 124.235-1 145.619-33.608 39.927-41.93 40.021-78.01 45.83z'],
    
    SPEED =1500,
    EASING = mina.linear, 
    i = 0; 

function AnimationSvg(){
  
  $svgBody.animate({d: path[i] },SPEED,EASING,AnimationSvg);
 
  i++;
  
  if(i === path.length){
    i = 0; 
  }
}


AnimationSvg();


```

svg画像がうねうね動くコンテンツを複数作成したい(2個目以降のコンテンツにjsが効かない)

### 前提・実現したいこと
タブレットやスマホでブラウザからアクセスした際に、カメラ映像の上にChart.jsのグラフ領域を重ね合わせて、縦軸を端末の傾き(地面に対して端末が垂直の状態を0.0°として-180.0～180.0の範囲を表示)、横軸をコンパス情報(真北を向いた状態を0.0°として0.0～359.9の範囲を表示)にしたいと考えております。
グラフを100ms毎に更新して端末の傾きに追従してy軸の値が変化することは確認できたのですが、y軸の値によってグラフ領域が若干ですが伸縮してしまうことを確認いたしました。y軸に指定する値の文字数が変化しているためと思われます。

### 発生している問題・エラーメッセージ
Chart.jsで表示しているグラフについて、y軸の値によらずグラフ領域が伸縮されることを回避したいと考えているのですが、方法をご存知のかたご教示願えますでしょうか。

### 該当のソースコード
```css
@media all and (orientation: portrait) {
  .chartview {
    position: absolute;
    top: 0.5rem;
    right: 24px;
    bottom: 5px;
    z-index: 3;
  }
}
```
```html
<div class="col-auto mx-auto">
    <video id="video" class="camera" autoplay playsinline="true" style="width:100%;height:450px;"></video>
    <canvas id="chartview" class="chartview" style="width:100%;height:490px;"></canvas>
</div>
```
```javascript
const VERTICAL_NUM = 11;
const SIDE_NUM = 9;

var betaVal = 0.000;
var directionVal = 0.000;
window.addEventListener("deviceorientation", function(eventOrient) {
  // ベータ軸
  betaVal = eventOrient.beta;
  if (betaVal == null) {
    betaVal = 0.0;
  }

  // 方位
  directionVal = eventOrient.webkitCompassHeading;
  if (directionVal == null) {
    directionVal = 0.0;
  }
});

var ctx = document.getElementById('chartview').getContext('2d');
var chartView = new Chart(ctx, {
type: 'category',
options: {
    responsive: false,
    maintainAspectRatio: false,
    // 凡例非表示
    legend: {
      display: false
    },
    // アニメーション停止
    animation: {
        duration: 0,
    },
    hover: {
        animationDuration: 0,
    },
    responsiveAnimationDuration: 0,
  }
});

function scalePortrait(chart) {
  var posx = 0 - ((SIDE_NUM / 2) | 0);
  var posy = 0 - ((VERTICAL_NUM / 2) | 0);
  var val = 0.0;
  var xlabelArray = [];
  var yLabelArray = [];

  // 現在のコンパス情報からx軸方向のラベルを取得
  for (var i = 0; i < SIDE_NUM; i++, posx++) {
    val = directionVal + (posx * 10);
    if (val < 0.0) {
      val += 360.0;
    } else if (360.0 <= val) {
      val -= 360.0;
    }
    if (val == 360.0) {
      val = 0.0;
    }
    xlabelArray.push(val.toFixed(1).toString());
  }

  // 現在の傾きからy方向のラベルを取得
  for (var i = 0; i < VERTICAL_NUM; i++, posy++) {
    val = (betaVal - 90) + (posy * 10);
    yLabelArray.push(val.toFixed(1).toString());
  }

  // 軸ラベル設定
  chart.options.scales = {
    xAxes:[{
      type    : 'category',
      labels  : xlabelArray,
      ticks   : {
        maxRotation:  0,
        minRotation:  0
      },
      gridLines: {
        color : 'rgba(255, 255, 255, 0.5)',
        borderDash: [4, 1]
      }
    }],
    yAxes:[{
      type    : 'category',
      labels  : yLabelArray,
      ticks   : {
        maxRotation:  0,
        minRotation:  0
      },
      gridLines: {
        color : 'rgba(255, 255, 255, 0.5)',
        borderDash: [4, 1]
      }
    }]
  }
  chart.update();
}

function chartUpdate() {
    scalePortrait(chartView);
}
setInterval(chartUpdate, 100);
```

### 該当のソースコード
元の状態
![元の状態](a1faa69ef58e05bb102d476223da7c46.png)
縮んだ状態
![縮んだ状態](167ad6980e12232cc396b99ff9535fab.png)

Chart.js 折れ線グラフのY軸を動的に変化させた際に、グラフエリアが伸縮されることを回避したい

バッチファイルでサブフォルダー含むコピーをしたら
なぜかフォルダの更新日が作成した日からかわる

バックアップを取ろうと思い
20200310という日付フォルダを作成しその中にファイル等をコピーしてくるが
バッチがすべておわると
フォルダの更新日時が2020/03/10　hh:mmから2020/02/25　9：34
と古いものに書き替わる

サーバに容量がないのでフォルダ3個くらいは残して古いものを削除したいが
更新日時で判定出来ない

更新日時を作成された日時にしておきたいが出来ない
詳しい方ご教示ください

バッチファイルでコピーしたらフォルダの更新日時がかわる

![イメージ説明](acfb7de9778c60c56ba4654997039d41.jpeg)
### 前提・実現したいこと


Windows10 Professional 64bit にて、添付の画像のように日付表示が化けます、
毎回ではなくたまにこの表示に変わり、しばらくするとまた正常な日付表示に戻ります。
この表示に変わる基準がわからず、しばらくPCを放置したりしてると勝手にこの
化けた表示になります、化けた表示になるタイミングでエラーメッセージが表示されます。
正常に戻るタイミングも数十秒、数分くらいでバラバラです。

### 発生している問題・エラーメッセージ
電子証明書を使うログインがエラーで出来ないです。
画面右下の時計表示はしっかり正常なものが表示されていても
なぜかエラーになります。

エラーメッセージ
1つまたはそれ以上の地域の設定が無効です。この問題を修正するにはカスタマイズ可能な設定を確認して修正して下さい。
というメッセージが表示されます。

### 該当のソースコード



### 試したこと

電子証明書の期限確認、異常なし、電子証明書を念の為消して再発行。
地域設定、言語設定、タイムサーバ設定すべて日本とか日本語になっています。
高速シャットダウン無効も実施しました。
BIOS設定のデフォルト化、バッテリを抜いて放電作業も実施しました。

### 補足情報（FW/ツールのバージョンなど）

NECノートパソコン
Windows10 Professional 64bit

なにかファイルを作って保存しても、正常な日付、時刻で保存されています。

もう残る手が無くて困っています、なにか良いアドバイスがあれば
宜しくお願いいたします。

Windows10 日付表示がおかしくなり日付を使うソフトが動かない

###やりたいこと
ページ読み込み時に、cssの動的書き換えをしたい

###コード
```css
div{
   color: #000000; 
}
```
```js
// あるサイト（https://qiita.com/life5618/items/950558e4b72c038333f8）にてお借りしたcssを取得する関数
function getRuleBySelector(sele){
    var i, j, sheets, rules, rule = null;
    sheets = document.styleSheets;
    for(i=0; i<sheets.length; i++){
        rules = sheets[i].cssRules;
        for(j=0; j<rules.length; j++){
            if(sele === rules[j].selectorText){
                rule = rules[j];
                break;
            }
        }
    }
    return rule;
}

document.addEventListener("DOMContentLoaded", DCL ); //(1)

function DCL(){
    getRuleBySelector("div").style.color = "#FF0000"; //(2)
}
```
（コードはかなり簡略しています。）

###上記で発生する不具合
(2)のところでdivセレクタを取得し、文字色の変更をしているのだが、状況によりdivセレクタが取得できない。（Cannot read property 'style' of null）
なお、(2)でエラーが発生しても、リロード等せずにコンソールにてDCLを呼び出すとエラーを吐かず実行できるので、"DOMContentLoaded"にて呼ばれた際に、cssの読み込みが終わっていないと思われる。

###質問
DOMツリーの読み込みにはcssは含まれないのでしょうか？
またその場合、cssを読み込んだ後に実行するのはどのイベント（もしくは関数）が適切なのでしょうか？

cssの読み込まれるタイミング

CSSの疑似要素についてお伺いしたいと思います。
以下のようなコードを書いてリストの頭に●をつけております。
```ここに言語を入力
.a-ul{
  margin:initial;
  padding:initial;
}

.a-ul li{
  padding-left:1em;
  text-indent:-1em;
}

.a-ul li:before{
  content:"●";
  color:#000000;
}
```
しかし、ある環境下においてのみ隣接するリストの文言がアルファベットから始まると●が小さくなって表示されるという減少が発生します。

例えば
「●野菜」ですと●のサイズは普通ですが「●vegetables」とすると●が小さく表示されます。
あらゆる環境で調査しましたが、EIZOモニタで見た場合のみ確認できました。
何が原因なのしょうか。

li:beforeのcontentの表示がリストの文字種によってサイズが変わる現象

###実現したいこと
boorstrap4のドロップダウンを使って、選択したアイテムによって異なるナビゲーションバーを作成する、動的ナビゲーションバーを作成しています。
例えば、アイテムNo1はナビが3つ、アイテムNo2はナビが6つなど、選択アイテムによってナビの数や内容を変えたいのです。
###困っていること
ドロップダウンの内容（dropdown-item）が複数あるときは、クリックイベントから選択したアイテムのナビを得ることができましたが、dropdown-itemが１つしかない場合、選択する必要がないので、自動的（強制的）にクリックイベントを発火させてナビを表示させたいのですが、方法がわかりません。

```html
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
        <a class="navbar-brand mr-auto mr-lg-3" href="#">NAVbar</a>
        <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown active">
                    <a class="nav-link dropdown-toggle status" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウンリスト <span class="sr-only">(current)</span></a>
                        <div class="dropdown-menu" aria-labelledby="dropdown01">
                            
                             <a class="dropdown-item" data-send="send_No1">アイテムNo1</a>               
                        </div>
                </li>

                <div id="select_nav"></div>
                
                <li class="nav-item">
                        <a class="nav-link" href="#">リストNo*</a>
                </li>
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">            
                        <a class="nav-link" data-send="send_a" href="a.php">nav_a</a>            
                    </li>
                    <li class="nav-item">            
                        <a class="nav-link" data-send="send_b" href="b.php">nav_b</a>            
                    </li>
                    <li class="nav-item">            
                        <a class="nav-link" data-send="send_c" href="c.php">nav_c</a>            
                    </li>
                </ul>
                
           </ul>
            <form class="form-inline my-2 my-lg-0 small">          
                <a class="btn btn-outline-info my-2 my-sm-0 " href="logout.php">ログアウト</a>
            </form>
        </div>
    </nav> 
```
```jQuery
<script>        
        $(function(){               
            $('.dropdown-menu .dropdown-item').click(function(){                      
                //HTMLでの送信をキャンセル
                event.preventDefault();
                var send = $(this).data('send');          
                $.ajax({
                    type: "POST",
                    url: "get_nav.php",
                    data: { ajax_send : send },
                    dataType : "json"
                }).done(function(data){
                target = document.getElementById("select_nav");                        
                    target.innerHTML = data;                     
                }).fail(function(XMLHttpRequest, textStatus, error){
                  alert("エラーが発生しました");
                });
            });                
        });
    </script>
```

boorstrap4のドロップダウンメニューから指定のアイテムを自動でクリックしたい

### 前提・実現したいこと
Aのモーダルウィンドウを開き、モーダルウィンドウ内にボタンを設置して、クリックすればAのモーダルウィンドウが閉じ、Bなどのクリックしたモーダルウィンドウが開くという事をしたいのですが、思った動きが出来ず困っております。
お力添えいただけないでしょうか。。。

### 発生している問題・エラーメッセージ
自身で行ってみると、
開いているモーダルウィンドウが消えず、重なってしまう。
一瞬Bのモーダルウィンドウの中が見えて、消えてしまい、Aのモーダルウィンドウがそのまま残る。
という感じです。。。

### 試したこと
色々調べてやってみたのですが、
モーダルウィンドウの背景が固定されなかったり、
AのモーダルウィンドウからBのモーダルウィンドウを開けても、BのモーダルウィンドウにあるAのモーダルウィンドウへのボタンを押すとAのモーダルウィンドウのトップではなく、Bのモーダルウィンドウを開いたボタンの位置のままになってしまったりと、困っております。

### 該当のソースコード 
```HTML
<div class="service-area">
	<ul class="service-list">
		<li>
			<img class="modal-s1" src="aaa.jpg" alt="s1へ" />
		</li>
		<li>
			<img class="modal-s2" src="bbb.jpg" alt="s2へ" />
		</li>
		<li>
			<img class="modal-s3" src="ccc.jpg" alt="s3へ" />
		</li>
		<li>
			<img class="modal-s4" src="ddd.jpg" alt="s4へ" />
		</li>
	</ul>
</div>


<div class="overlay-s1">
	<div class="container">
		<div class="inner">
			<div class="modal">
				<h4>AAA</h4>
				<p>テキストテキスト</p>
				<div class="service-select">
					<ul class="select-list">
						<li>
							<img class="modal-s1" src="aaa.jpg" alt="s1へ" />
						</li>
						<li>
							<img class="modal-s2" src="bbb.jpg" alt="s2へ" />
						</li>
						<li>
							<img class="modal-s3" src="ccc.jpg" alt="s3へ" />
						</li>
						<li>
							<img class="modal-s4" src="ddd.jpg" alt="s4へ" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>



<div class="overlay-s2">
	<div class="container">
		<div class="inner">
			<div class="modal">
				<h4>AAA</h4>
				<p>テキストテキスト</p>
				<div class="service-select">
					<ul class="select-list">
						<li>
							<img class="modal-s1" src="aaa.jpg" alt="s1へ" />
						</li>
						<li>
							<img class="modal-s2" src="bbb.jpg" alt="s2へ" />
						</li>
						<li>
							<img class="modal-s3" src="ccc.jpg" alt="s3へ" />
						</li>
						<li>
							<img class="modal-s4" src="ddd.jpg" alt="s4へ" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>



<div class="overlay-s3">
	
</div>



<div class="overlay-s4">
	
</div>

```

```JavaScript

$(function() {

var $window = $(window),
    $html = $('html'),
    $body = $('body'),
    $overlay = $('.overlay-s1'),
    scrollbar_width = window.innerWidth - document.body.scrollWidth,
    touch_start_y;

$window.on('touchstart', function(event) {
  touch_start_y = event.originalEvent.changedTouches[0].screenY;
});

$('.modal-s1').on('click', function() {
  $window.on('touchmove.noscroll', function(event) {
    var overlay = $overlay[0],
        current_y = event.originalEvent.changedTouches[0].screenY,
        height = $overlay.outerHeight(),
        is_top = touch_start_y <= current_y && overlay.scrollTop === 0,
        is_bottom = touch_start_y >= current_y && overlay.scrollHeight - overlay.scrollTop === height;
    
    if (is_top || is_bottom) {
      event.preventDefault();
    }
  });
  
  $('html').css('overflow', 'hidden');
  
  if (scrollbar_width) {
    $html.css('padding-right', scrollbar_width);
  }
  
  $overlay.fadeIn(300);
});

var closeModal = function() {
  $body.removeAttr('style');
  $window.off('touchmove.noscroll');
  
  $overlay.animate({
    opacity: 0
  }, 300, function() {
    $overlay.scrollTop(0).hide().removeAttr('style');
    $html.removeAttr('style');
  });
};

$overlay.on('click', function(event) {
  if (!$(event.target).closest('.modal').length) {
    closeModal();
  }
});

$('.button').on('click', function() {
  closeModal();
});

});

$(function() {

var $window = $(window),
    $html = $('html'),
    $body = $('body'),
    $overlay = $('.overlay-s2'),
    scrollbar_width = window.innerWidth - document.body.scrollWidth,
    touch_start_y;

$window.on('touchstart', function(event) {
  touch_start_y = event.originalEvent.changedTouches[0].screenY;
});


$('.modal-s2').on('click', function() {
  $window.on('touchmove.noscroll', function(event) {
    var overlay = $overlay[0],
        current_y = event.originalEvent.changedTouches[0].screenY,
        height = $overlay.outerHeight(),
        is_top = touch_start_y <= current_y && overlay.scrollTop === 0,
        is_bottom = touch_start_y >= current_y && overlay.scrollHeight - overlay.scrollTop === height;
    
    if (is_top || is_bottom) {
      event.preventDefault();
    }
  });
  
  $('html').css('overflow', 'hidden');
  
  if (scrollbar_width) {
    $html.css('padding-right', scrollbar_width);
  }
  
  $overlay.fadeIn(300);
});

var closeModal = function() {
  $body.removeAttr('style');
  $window.off('touchmove.noscroll');
  
  $overlay.animate({
    opacity: 0
  }, 300, function() {
    $overlay.scrollTop(0).hide().removeAttr('style');
    $html.removeAttr('style');
  });
};

$overlay.on('click', function(event) {
  if (!$(event.target).closest('.modal').length) {
    closeModal();
  }
});

$('.button').on('click', function() {
  closeModal();
});

});


$(function() {

var $window = $(window),
    $html = $('html'),
    $body = $('body'),
    $overlay = $('.overlay-s3'),
    scrollbar_width = window.innerWidth - document.body.scrollWidth,
    touch_start_y;

$window.on('touchstart', function(event) {
  touch_start_y = event.originalEvent.changedTouches[0].screenY;
});

```

```css
.overlay-s1{
	display: none;
	position: fixed;
	top: -10px;
	left: 0;
	right: 0;
	bottom: -10px;
	background-color: rgba(0, 0, 0, .7);
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 9997;
}

.overlay-s2{
	display: none;
	position: fixed;
	top: -10px;
	left: 0;
	right: 0;
	bottom: -10px;
	background-color: rgba(0, 0, 0, .7);
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 9997;
}

.container{
	display: table;
	padding: 10px 0;
	width: 100%;
	height: 100%;
}

.inner{
	display: table-cell;
	padding: 5.2% 0;
	vertical-align: middle;
}

.modal{
	width: 78.125vw;
	background: #fff;
	color: #707070;
	margin: 0 auto;
	z-index: 9998;
}

.modal::after{
	display: table;
	content: '';
	clear: both;
}
```
### 補足情報（FW/ツールのバージョンなど）

開いたモーダルウィンドウから別のモーダルウィンドウを開きたい

### 前提・実現したいこと

下記のようなテーブルのDBがあります。

テーブル名：T_購入履歴
・商品名　nvarchar(50)
・購入者名　nvarchar(50)
・販売日　datetime

ここからSQLを使用して

購入日｜時間帯_1｜時間帯_2｜時間帯_3｜時間帯_4
－－－－－－－－－－－－－－－－－－－－－－
1/1　｜　60　｜　10　｜　20　｜　10
－－－－－－－－－－－－－－－－－－－－－－
1/2　｜　70　｜　0　｜　50　｜　20
－－－－－－－－－－－－－－－－－－－－－－
1/3　｜　2　｜　30　｜　10　｜　30
－－－－－－－－－－－－－－－－－－－－－－
1/4　｜　80　｜　10　｜　30　｜　40
－－－－－－－－－－－－－－－－－－－－－－
1/5　｜　40　｜　50　｜　60　｜　50
－－－－－－－－－－－－－－－－－－－－－－

このように期間内の日付毎、時間帯別の販売個数を抽出したいと考えています。

分ける時間帯は
時間帯_1…9:00～12:00
時間帯_2…12:00～17:00
時間帯_3…17:00～22:00
時間帯_4…22:00～3:00
となります。

販売個数は必ず1個となります。

分かりにくい質問かも知れませんが
ご指導宜しくお願い致します。


### 発生している問題

期間内の指定時間の範囲内をどのようにカウントすればいいのか分かりません。


### 補足情報（FW/ツールのバージョンなど）

SQL Server2016使用

SQL文の作成（時間帯別の抽出方法）

JavaScriptで2次元配列をソートしたいです。


```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    JavaScript ソートテスト
</body>
</html>
```

```JavaScript
// test.js
window.onload = function(){ 
    var list = testSort([["aaa",10],["bbb",20],["ccc",""],["ddd",30],["eee",40]]);
    console.log(list);
    var list = testSort([["aaa",100],["bbb",10],["ccc",""],["ddd",30],["eee",40]]);
    console.log(list);
};

function testSort(list) {
    list.sort(function(a, b){
        if (parseFloat(a[1]) > parseFloat(b[1])) return -1;
        if (parseFloat(a[1]) < parseFloat(b[1])) return 1;
        return 0;
    });
    return list;
}
```
JavaScript実行結果
![![JavaScript実行結果](17f4afb3e649b9774c3ec464bac5430e.png)](00f909ea9fe0078fb4518d4519905e2b.png)

[["文字列",数値]...["文字列",数値]]という内容の2次元配列を作成しました。
これを2番目の要素である数値の降順でソートしたいです。
もし、数値が空の場合は空の部分は一番後ろになるようにソートしたいです。

[["aaa",10],["bbb",20],["ccc",""],["ddd",30],["eee",40]]の場合は期待通り、
[["eee",40],["ddd",30],["bbb",20],["aaa",10],["ccc",""]]と、空の部分が最後になっています。

しかし、
[["aaa",100],["bbb",10],["ccc",""],["ddd",30],["eee",40]]の場合は、
[["aaa",100],["bbb",10],["ccc",""],["eee",40],["ddd",30]]となり、
空の位置が変化していません。
[["aaa",100],["eee",40],["ddd",30],["bbb",10],["ccc",""]]となるようにソートさせたいです。

2次元配列で、基本的には数値の降順でソートし、空白がある場合には、空白が最後になるようにソートするにはどのようにすればよろしいでしょうか？