常連

注目の的

社会貢献

自己紹介

### 実現したいこと

ひとつのセレクトボックスを決定すると、
他のボックスも同じ値に選択された状態にしたいです。

（例）下記ソースコードにて
商品1のセレクトボックスの値を「東京」にすると、
商品2、商品3のセレクトボックスも同時に「東京」が選択された状態に。

※「大阪」を選択すると、他も「大阪」に、「京都」を選択すると「京都」になるように。
※商品2、商品3を選んだ場合も同様です。

JSの知識が疎いものでして、、
ご教示くださいませ。
よろしくお願いいたします。

### 該当のソースコード
```ここに言語を入力
<div class="select-box">
    <p class="title">商品１</p>
    <select class="selbox" name="" onchange="">
        <option value="" hidden>選択してください</option>
        <option value="sample1">東京</option>
        <option value="sample2">京都</option>
        <option value="sample3">大阪</option>
    </select>
</div>

<div class="select-box">
    <p class="title">商品２</p>
    <select class="selbox" name="" onchange="">
        <option value="" hidden>選択してください</option>
        <option value="sample1">東京</option>
        <option value="sample2">京都</option>
        <option value="sample3">大阪</option>
    </select>
</div>

<div class="select-box">
    <p class="title">商品３</p>
    <select class="selbox" name="" onchange="">
        <option value="" hidden>選択してください</option>
        <option value="sample1">東京</option>
        <option value="sample2">京都</option>
        <option value="sample3">大阪</option>
    </select>
</div>
```

### 試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。


複数の<select>（プルダウン）を同時選択をしたいです。（もしくはひとつを選択すると、他の<select>も同期したいです）

### 実現したいこと

・Moreボタン(Moreという文字)にマウスオーバーすると線の右端に『★』がついているアンダーラインが右に動き、その後(時差で)右端の星が1回転する。

### 前提

Webサイトを作成しています。
なるべくCSSのみで実装したいです。

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

```

transitionで『★』を右に移動と、360度回転は同時に可能なのですが、右に移動が完了してから360度回転をしたいです。
```

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

```HTML
<div class="more-btn-area">
    <a href="#" class="more-btn">More</a>
</div>
```
```CSS
.more-btn-area {
        text-align: right;

        &:hover .more-btn:before {
            transform: translateX(1.1vw);
            transition: transform 0.4s ease;
        }

        &:hover .more-btn:after {
            transform: translateX(1.1vw) rotate(360deg);
            transition: transform 0.4s 0s ease,transform 0.4s 0.4s ease;
        }

        .more-btn {
            position: relative;
            display: inline-block;
            font-family: "Noto Sans JP", sans-serif;
            font-weight: 300;
            text-align: right;
            font-size: 2.2vw;
            margin-right: 15vw;

            &::before {
                position: absolute;
                top: 2.6vw;
                right: 0vw;
                content: "";
                width: 3vw;
                height: 0.1vw;
                background: #333333;
                transition: transform 0.4s ease;
            }

            &::after {
                position: absolute;
                top: 2vw;
                right: -0.6vw;
                content: "";
                display: inline-block;
                width: 1vw;
                height: 1vw;
                background: url(../images/sub-star-yellow.png) center center no-repeat;
                background-size: contain;
                transition: transform 0.4s ease;
            }

        }
    }
```

### 試したこと

アンダーラインと星は"more-btn"に疑似クラスで表示しています。
アンダーラインと★を右に同時に動かし、その後に星を回転させるという動きを再現したいので、
```CSS
 &:hover .more-btn:after {
     transform: translateX(1.1vw) rotate(360deg);
     transition: transform 0.4s 0s ease,transform 0.4s 0.4s ease;
}
```
とコーディングしてみたのですが、transitionの秒数指定はtransformの移動や回転それぞれには効かないみたいです。(うまく言語化できませんが)

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

ここにより詳細な情報を記載してください。


Moreボタン(Moreという文字)にマウスオーバーすると線の右端に『★』がついているアンダーラインが右に動き、その後(時差で)右端の星が1回転する動きを実装したい。

### 実現したいこと

WordpressでLPのABテストを行い、適宜、修正したい。

### 前提

コーディングの知識なしです。
WordpressにまだLPを入れていません。(LPのデザインはできています)


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

WordpressのどこにLPを入れてもらい、コーディング知識なしで修正を加える方法
を教えていただきたいです。

```
エラーメッセージ
```

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

```ここに言語名を入力
ソースコード
```

### 試したこと

まだwordpressにLPを入れてもらっていない段階です。
基本、更新はせず、ABテストを行うので、固定ページにLPを入れるのが良いかと考えています。

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

ここにより詳細な情報を記載してください。


デザインができているLPをWordpressに入れ、適宜修正したい

ほぼ IT の知識がない人をできるだけ早くとりあえずレビューを受けながらフロントエンドを実装できるレベルにしたいと思っています。

Vue などのフレームワークをいきなり教えるのもあまり良くないかなとも思い、まず基礎的な部分を書籍で独学してもらいたいと思ったのですが、そんな時おすすめの書籍などありますか？？

その後おそらくVueを用いた開発を行うので、その場合におすすめの書籍などもあれば共有いただけますと助かります。

少なくとも git などのツールも場当たり的に都度都度調べるより一度体系的に学んでおいた方が良いと思うのでそのあたりの書籍もピックアップしたいと考えています。

自分はどちらかと言うとバックエンド側から入り現場でフロントを学んでいったような経歴なので初心者が学べるフロントエンド側の書籍などあまり読んだことが無くおすすめがあれば是非教えていただきたいです！

フロントエンドエンジニアの入門的な書籍でオススメはありますか？

### 実現したいこと
- 円形（透明・透過）が広がる動き
- 全体に円形（透明・透過）広がりきるとメイン画像全体が見える
- https://supercrowds.co/
上記のページのような動き

### 前提
円形で透過させた状態で背景画像を徐々に見せていきたいため、cssでbackgroundをtransparentしたり、opacityをつけたけど、そうすると円形そのものがなくなってしまいます。

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

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

/***** HTML *****/
 <div class="mask">
        <div class="circle">

        </div>
    </div>

    
    <img src="/images/hogehoge.jpg" alt="">
/***** HTML *****/


/***** CSS全画面を覆う背景 *****/
.mask {
    position: fixed; /*固定表示*/
    z-index: 999; /*最前面へ*/
    top: 0;
    left: 0;
    width: 100vw; /*画面幅*/
    height: 100vh; /*画面の高さ*/
    background:#fff; /*好きな色*/
    animation: fadeOut 0.4s forwards; /*フェードアウト*/
    animation-delay: 1.6s; /*円のアニメーション＋遅延時間*/
  }
  
  /*フェードアウトアニメーション*/
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  /***** 広がる円 *****/
  .circle {
    position: absolute; /*固定表示*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; /*中央配置*/
    width: 0;
    height: 0;
    background:#efef; /*ページ全体の背景色*/
    animation: circle-open 1s linear forwards;
    animation-delay: 0.6s; /*任意の遅延時間*/
  }
  
  /*円が拡大するアニメーション*/
  @keyframes circle-open {
    0% {
      width: 0;
      height: 0;
      border-radius: 50%;
    }
    10%,
    80% {
      /*少し拡大して止まる*/
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    99% {
      /*ぎりぎりまで正円*/
      width: 99vw;
      height: 99vw;
      border-radius: 50%;
    }
    100% {
      /*全画面*/
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }
  }
```

### 試したこと
円形画像に色を付けると円の形は保たれるけど、透過させると×
アドバイスよろしくお願いします。

透過された円形が広がりながら背景が現れる動きを実装したい

HTMLソースコード（head内）で
外部コードの読込を行う際に
async、defer属性またはResource Hintsはどのように記述するとベストでしょうか。

※前回「jquery.min.js読込」と紛らわしい質問をしてしまったので、訂正して再掲載します。

例えば
googleアナリティクスのコード
https://www.googletagmanager.com/gtag/js?id=0000

googleフォント
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone

など

### シンプルな記述
```ここに言語を入力
<script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=0000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
```

### asyncまたはdefer属性を追加する
async,deferどちらが最適か、もしくは必要ないか

```ここに言語を入力
<script type="text/javascript" async src="https://www.googletagmanager.com/gtag/js?id=0000">
<link rel="stylesheet" async href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
```

### Resource Hintsの記述は必要か
Preconnect,DNS-Prefetch,Prefetch,Preload,Prerenderの指定がいまいち理解できません

```ここに言語を入力
<link rel="DNS-Prefetch Preconnect" as="script" href="https://www.googletagmanager.com">
<link rel="DNS-Prefetch Preconnect" as="stylesheet" href="https://fonts.googleapis.com">

<link rel="preload" as="script" href="https://www.googletagmanager.com/gtag/js?id=0000">
<link rel="preload" as="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">

<script type="text/javascript" async src="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
<link rel="stylesheet" async href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone">
```

自分なりに調べた結果が上記内容ですが、
理解が足りない部分もあり、ベストな方法がわりかねます。

PageSpeed Insightsなど測定ツールに対して最適な記述方法が知りたいです。


詳しい方のご意見をいただければ幸いです。
よろしくお願いいたします。

HTML　外部のコード読込を指定する最適な記述方法を教えてください

### 実現したいこと

dockerのコンテナファイルと
macのローカルファイルの同期が取れないため
同期が取れるようにしたいです


### 前提

dockerでEC CUBE4の開発環境を構築しています。
チーム内で、他の人が作成したEC-CUBEのファイルのデータを
soucetreeのリモートリポジトリからプルし、
コミットを作成
あとは公式の下記手順に沿ってEC-CUBEのインストールを実行しました。
https://doc4.ec-cube.net/quickstart/docker_compose_install


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

http://localhost:8080/ で、テンプレートファイルが認識されません。
The "/var/www/html/app/template/hogehoge" directory does not exist ("/var/www/html/app/template/hogehoge").
というエラーが表示されます。

macのターミナルで
app/template/　のディレクトリの　lsを確認すると
下記が表示されるのですが、
ーーー
admin		default		hogehoge		smartphone	user_data
ーーー

dockerのターミナルで
app/template/　のディレクトリの　lsを確認すると
/var/www/html/app/template

ls
ーーー
admin  default  plugin  smartphone  user_data
ーーー

と表示され
「plugin」と「hogehoge」がいずれかだけ
認識されている状態です。
（どちらも同様に認識して
admin  default  plugin hogehoge smartphone  user_data
となっていて欲しいです）

これだけの情報で回答いただくのは難しいかもしれませんが
何かヒントをいただけると幸いです


### 試したこと
docker-composeのインストールは失敗する
https://github.com/EC-CUBE/ec-cube/issues/4811
こちらの記事を参考に、
ファイルのパーミッションを「777」に変更しました。

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

macOS Big Sur バージョン11.7.4
Docker Desktop 4.16.2
EC-CUBE 4.1(だったと思いますが、詳細不明）


dockerのコンテナファイルと macのローカルファイルの同期を取りたいです

実現したいこと
背景の上を鳥や飛行機が個別のパーツとしてループして動くという実装をしたいです。
airplaneで指定している飛行機は右から左への動きで、画面外までいったらまだ右画面端から出てくるという動きが実現できているのですが、airplane02では、左斜め上に動くという記述を書いていて、ページ読み込み時一回目は正常な動きをするのですが、ループで戻ってきません。（本来なら画面右下からまた出現してほしい）検証ツールで見ると動いているようですが、見えてない状態のような感じです。

また鳥の画像を添付していますが、鳥がバサバサと動いて上に飛んでいくループ処理とかってできるのでしょうか？
よろしくお願いいたします。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-21/734d1f79-696e-4bdf-b0f5-cae9bebebd21.png)

下記がコードになります。
htmlとjs
```
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>テスト</title>
</head>

<link rel="stylesheet" href="css/style.css">

<body>
  <div class="bg_area">
    <div class="airplane"></div>
    <div class="airplane02"><img src="img/air_plane02.png" alt="" id="airplane02"></div>
    <div class="bird"></div>

    
  </div>

  <script>
    //飛行機01
    const airplane = document.querySelector(".airplane");
    let xAirplane = -100;

    function moveAirplane() {
      xAirplane += 1;
      if (xAirplane > window.innerWidth) {
        xAirplane = -100;
      }
      airplane.style.right = xAirplane + "px";
      requestAnimationFrame(moveAirplane);
    }
    moveAirplane();
  </script>

  <script>
    //飛行機02
    // imgタグを取得
    var airplane02 = document.getElementById("airplane02");

    // 初期位置の設定
    var posX = 0;
    var posY = 0;

    // アニメーションの設定
    function moveAirplane02() {
      // 斜め左上に移動する
      posX -= 1;
      posY -= 1;
      airplane02.style.transform = "translate(" + posX + "px, " + posY + "px)";

      // アニメーションを継続する
      requestAnimationFrame(moveAirplane02);
    }

    // アニメーションを開始する
    requestAnimationFrame(moveAirplane02);
  </script>

</body>

</html>


css
.bg_area::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #63cae4;
    z-index: -1;
}

.airplane {
    position: absolute;
    top: 100px;
    right: -100px;
    width: 200px;
    height: 100px;
    background-image: url("../img/air_plane.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .airplane02 {
    position: absolute;
    bottom: -100px;
    right: 500px;
  }

  .airplane02 img {
    width: 200px;
    height: auto;
  }

  .bird {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 300px;
      height: 100px;
      background-image: url("../img/bird.png");
      background-size: contain;
      background-repeat: no-repeat;
  }
.content {
    width: 50%;
    max-width: 500px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 50vw;
}


```

ループで動かしている要素が一度しか表示されない

### 実現したいこと
システムからのメール配信はAmazon SESを使用し、受信にはお名前メールを利用したいのですが可能でしょうか？
システムをdomain.comで運用しているとして、送信はinfo@domain.comのアドレスを使用してAmazon SESから送信
info@domain.comにメールが送信された場合はお名前メール側で受信というようなことをしたいです。

ドメインはお名前で取得し、AWSのroute53で管理しています。
Amazon SESのMXレコードの優先度が10になっているので、それより大きい数値でお名前メール側のMXレコードをroute53に設定してやれば、送信はSES、受信はお名前メールということを実現できるのではないかと思っておりますが、実現可能でしょうか？

試すには契約が必要になるため提案するために確信が欲しく、ご存じの方いらっしゃればご回答いただけると大変助かります。

### 調べたこと
下記サイトよりMXレコードを複数設定できることは確認しましたが、お名前メールとSESの併用について実現できる確信がないため質問させていただきました。
https://baremail.jp/blog/2022/05/31/2502/#:~:text=MX%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%80%81%E3%81%B2%E3%81%A8%E3%81%A4%E3%81%AE,%E9%85%8D%E4%BF%A1%E3%81%8C%E8%A1%8C%E3%82%8F%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

Amazon SESでメール送信し、お名前メールで受信したい

### 実現したいこと

cssでの自動補完をする。

### 前提

以下が現在取り込んでいる拡張機能です。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-20/32b9679d-ae24-4cad-97cc-cacd0f20bf16.jpeg)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-20/05a8805c-6b01-45b1-bfeb-984eb436260b.jpeg)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-20/44eb17d5-b152-45e2-9950-575e0b16c9d3.jpeg)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-20/69d829b4-cef1-4999-a0d7-360e2f86145d.jpeg)

ここ一ヶ月は既存の拡張機能の設定を変更することはしていません。
HTMLで「！」とtagでひな形は通常通り出ます。

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

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-20/837eff28-2617-4a89-babc-687a2e989eef.jpeg)

「tra」と打つと以前はtransitionやtransformが候補に出ていたのに今は出ません。。。


### 試したこと

HTML CSS Support, Prettier, css peekの再インストール

こちらがvscodeのバージョンです
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-21/3c0f80cc-3f2f-4d8d-bda4-bbcfb306f28b.jpeg)

### Buntin様のアドバイスに関して
editor.quickSuggestions以外はsetting.jsonで検索しましたが、出てきませんでした。


### setting.jsonでしたこと

詳細のアドバイス誠に感謝いたします。頂いた候補を検索してみましたがfalseがありませんでした。。。

以下に探してみたものを書かせていただきます。可能性のありそうなものなのでジェイソンすべてではありません。
```setting.json
  "files.autoSave": "afterDelay",
    "editor.unicodeHighlight.invisibleCharacters": false,
    "workbench.editor.enablePreview": false,
    "workbench.startupEditor": "none",
    "liveServer.settings.donotShowInfoMsg": true,
    "git.suggestSmartCommit": false,
    "workbench.editorAssociations": {
        "*.psd": "default",
        "*.dll": "default"
    },
    "[scss]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[css]": {

        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "cSpell.showAutocompleteSuggestions": true
    },
"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "editor.accessibilitySupport": "on",
    "settingsSync.ignoredExtensions": [
        "ritwickdey.liveserver"
    ],
    "liveServer.settings.donotVerifyTags": true,
    "files.eol": "\n",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.autoGuessEncoding": true,
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.iconTheme": "vscode-icons",
    "cssPeek.peekFromLanguages": [
        "html",
        "django-html",
        "laravel-blade",
        "razor",
        "vue",
        "blade",
        "pug",
        "jade",
        "handlebars",
        "php",
        "twig",
        "md",
        "nunjucks",
        "javascript",
        "javascriptreact",
        "erb",
        "typescript",
        "typescriptreact",
        "HTML (Eex)",
        "html-eex",
        "ejs",
        "css"
    ],
    "window.zoomLevel": -1,
    "cSpell.showAutocompleteSuggestions": true,
    "debug.console.acceptSuggestionOnEnter": "on",
    "css.enabledLanguages": [
        
        "html",
        "css"
    ],
    "editor.suggest.shareSuggestSelections": true,
    "editor.quickSuggestions": {
        "comments": "on",
        "strings": "on"
    },
    "editor.suggest.showStatusBar": true,
    "emmet.showSuggestionsAsSnippets": true,
    "css.styleSheets": [
    
    ],
    "html-css-class-completion.CSSLanguages": [

        "css",
        "sass",
        "scss"
    ],
    "html-css-class-completion.enableEmmetSupport": true,
    "liveSassCompile.settings.includeItems": [
    
    ],
    "editor.suggest.preview": true,
    "workbench.commandPalette.experimental.suggestCommands": true
}
```


cssの自動補完が出ません。。。

### 前提・実現したいこと

checkboxのクリックで任意のdivの表示・非表示を切り替えたいです。
以下のように設定してみましたがうまく切り替えられず、
間違っている部分などございましたらご指摘いただけたら幸いです。
### 発生している問題・エラーメッセージ

チェックボックスをクリックしても該当のdiv部分が非表示にならない上、
チェックボックスのチェックも切り替わりません。

### 該当のソースコード

```html
<input type="checkbox" id="checkbox_1" checked="checked" onclick="click_display_div('checkbox_1','test')">
<label for="checkbox_1">checkbox1</label>

<table>
  <div id="test">
    <tr><p>tr1</p></tr>
    <tr><p>tr2</p></tr>
  </div>
  <tr><p>tr3</p></tr>
</table>
```
```js
function click_display_div(checkboxID, divID) {
  var CB = document.getElementById(checkboxID);
  var DIV = document.getElementById(divID);
  if (CB.checked = true) {
    DIV.style.display = none;
    CB.checked = false;
  } else {
    DIV.style.display = block;
    CB.checked = true;
  }
}
```

### 補足情報（FW/ツールのバージョンなど）

初歩的な問題で大変申し訳ございませんが、
何かアドバイスいただけましたら幸いです。

追記
コメントいただきました方法でも上記のコードでは機能しないのは、
テーブル内にdivを置くこと自体が間違っているのでしょうか。
任意のtr一つ一つの表示切り替えを行う部分が既にあるため、
今回のチェックボックスでは複数行をまとめて表示切り替えを行いたいです。

checkboxのクリックで任意のdivの表示・非表示を切り替えたいです。

### 前提


JavaScriptで要素をフェードインさせるコードをコピペして作りました。
コードの中でわからないことがあったので、解説をお願いできないでしょうか。

### 解説をお願いしたいこと

```javascript
new Date() - 0;
```
コンソールで確認してみると、1665201497529という数値が出ましたが、これは何の数値なんでしょうか？
なぜ、現在の日時からこの数値を引くと経過時間がわかるのでしょうか？

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

```javascript
var begin = new Date() - 0;
var myMain = document.getElementById("bg");
var myTime = 600;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime){
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = current / myTime;
}, 10);
```

### 補足情報
コピペさせていただいたサイト
https://q-az.net/without-jquery-fadein-fadeout-slideup-slidedown/



new Date() - 0　について解説してほしい

以下のjsを記述しましたが、スマホ時と他ページからのアンカー遷移は大丈夫なのですが同じページ内でアンカーリンクする時にはアニメーションとheaderの高さがとられていなく
位置がずれてしまいます。
レクチャーいただけますと幸いです。

htmlでheaderのheightは225あります
```ここに言語を入力
<div class="header_frame">

  <div class="header_fixed">
    
    <header>

  <div class="head_frame">

logo
    </div>

</header>
    
    <div class="main_nav">
  <nav>

  </nav>
</div>
</div>

</div>
```

```ここに言語を入力
document.addEventListener('DOMContentLoaded', function() {


  var headerHeight = $('.header_fixed').outerHeight();
  var urlHash = location.hash;
  var speed = 800;
  
  if (urlHash) {
    var position = $(urlHash).offset().top - headerHeight;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    console.log(headerHeight);
  }else{
    $('a[href^="#"]').not('[role=tab],.main_nav a').click(function () {
      var adjust = $('.header_fixed').outerHeight();
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top - adjust;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    }); 
  }

});
```

header固定のアンカーリンクのズレ

WPR (WP Responsive Manu) というWord Press プラグイン にてスマホのみハンバーガーメニューにしましたが、

ハンバーガーアイコンをタップするとページ表示位置がトップに戻ってしまいます。


意識していませんでしたが、元々は正常に表示位置をキープしていたように思います。


どこかで変わったようです


CSSしか編集しないので、CSSだと思います。


メーニューコンテナを展開しても元の表示縦位置をキープしたいです。


メニューの展開後の要素をposition:fixed などいくつか試しましたがダメでした。


https://bsl.cloud/

ハンバーガーメニュー展開でページトップ最上部に戻ってしまう

固定ヘッダーの際にアンカーリンク押下時、場所がずれて困っています。
フッダーにある大阪店のリンクをクリックしたら、section id="shop"の大阪店のところに飛んでほしいのですが、現状、大阪店の真ん中辺りに飛んでしまいます。

jQueryで処理を書いてみましたが、変わらない状況です。
alert(1);で条件の方が合っていることは確認したので、処理の方の書いていることが間違っていると思ってます。
どうしたら良いでしょうか？

```HTML
<!doctype html>
<html lang="ja">
  <head>
    
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="説明が入ります。">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link  rel="stylesheet" href="css/bootstrap.min.css">
    <link  rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <header id="header" class="header sticky-top">
      <div class="d-flex justify-content-between px-4 py-2">
        <a class="navbar-brand" href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
        <div>
          <button type="button" class="btn px-4">
            <a class="text-dark text-decoration-none" href="">予約</a>
          </button>
          <button type="button" class="btn line px-4">
            <a class="text-dark text-decoration-none" href="">問合せ</a>
          </button>
        </div>
      </div>
      <div class="nav container-field py-2">
        <div class="row w-100 m-0">
          <li class="nav-item col-20">
            <a class="nav-link px-4" href="">概要</a>
          </li>
          <li class="nav-item col-20">
            <a class="nav-link px-4" href="index.html#concept">コンセプト</a>
          </li>
          <li class="nav-item col-20">
            <a class="nav-link px-4" href="index.html#title2">タイトル２</a>
          </li>
          <li class="nav-item col-20">
            <a class="nav-link px-4" href="index.html#title3">タイトル３</a>
          </li>
          <li class="nav-item col-20">
            <a class="nav-link px-4" href="index.html#shop">店舗一覧</a>
          </li>
        </div>
      </div>
    </header>

    <section id="concept" class="py-3">
      <div class="container p-5">
        <h3 class="text-center pb-5">コンセプト</h3>
        <div>
          <p>
            コメントが入ります。コメントが入ります。コメントが入ります。
          </p>
        </div>
      </div>
    </section>
    <section id="title2" class="py-3">
      <div class="container p-5">
        <h3 class="text-center pb-5">タイトル２</h3>
        <div>
          <p>
            コメントが入ります。コメントが入ります。コメントが入ります。
          </p>
        </div>
      </div>
    </section>
    <section id="title3" class="py-3">
      <div class="container p-5">
        <h3 class="text-center pb-5">タイトル３</h3>
        <div>
          <p>
            コメントが入ります。コメントが入ります。コメントが入ります。
          </p>
        </div>
      </div>
    </section>

    <section id="shop" class="pt-3">
      <div class="container px-5 pt-5 pb-0">
        <h3 class="text-center pb-5">店舗一覧</h3>
        <div class="d-flex justify-content-between shopContainer p-lg-5 p-3">
          <div id="oosaka" class="shopContents w-50 my-3">
            <h2>大阪店</h2>
            <a href="https://www.youtube.com/" target="_blank"><img class="snsIcon mr-2" src="img/youtube.png" alt=""></a>
            <a href="https://www.instagram.com/" target="_blank"><img class="snsIcon mr-2" src="img/instagram.png" alt=""></a>
            <table class="table table-bordered bg-white">
              <tbody>
                <tr>
                  <th class="py-0">T E L</th>
                  <td class="py-0">xxx-xxx-xxx</td>
                </tr>
                <tr>
                  <th class="py-0">営業時間</th>
                  <td class="py-0">xxx~xxx</td>
                </tr>
                <tr>
                  <th class="py-0">定休日</th>
                  <td class="py-0">xxx</td>
                </tr>
                <tr>
                  <th class="py-0">住　所</th>
                  <td class="py-0">xxxxxxxxxxxxxxxxxx</td>
                </tr>
              </tbody>
            </table>
            <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="" target="_blank">地図</a></button>
            <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="">予約</a></button>
          </div>
          <div class="shopImage my-3">
            <img class="shopPicture" src="img/shop1.png" />
            <img class="shopPicture" src="img/shop2.png" />
            <img class="shopPicture" src="img/shop1.png" />
          </div>
        </div>
      </div>
    </section>
    <section id="info" class="py-3">
      <div class="container p-md-5 p-4">
        <h3 class="text-center pb-5">お知らせ</h3>
        <div class="accordion" id="accordionExample">
          <div class="card">
            <div class="card-header bg-white py-1" id="headingOne">
              <h5 class="mb-0">
                <button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                  <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ
                </button>
              </h5>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body pl-5">
                お知らせ内容が入ります。
                テキストが入ります。テキストが入ります。テキストが入ります。
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header bg-white py-1" id="headingTwo">
              <h5 class="mb-0">
                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ
                </button>
              </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
              <div class="card-body pl-5">
                お知らせ内容が入ります。
                テキストが入ります。テキストが入ります。テキストが入ります。
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header bg-white py-1" id="headingThree">
              <h5 class="mb-0">
                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ
                </button>
              </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
              <div class="card-body pl-5">
                お知らせ内容が入ります。
                テキストが入ります。テキストが入ります。テキストが入ります。
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="footer text-white">
      <nav class="nav-bar py-md-5 text-nowrap">
        <div class="container d-flex justify-content-between">
          <ul id="footerShop" class="nav flex-column">
            <p class="pt-2">店舗一覧</p>
            <li class="nav-item">
              <a class="nav-link text-white" href="index.html#oosaka">大阪店</a>
            </li>
          </ul>
          <ul id="footerMainMenu" class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link text-white" href="">お問い合わせ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="">お客様の声</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="index.html#info">お知らせ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="">採用情報/求人</a>
            </li>
          </ul>
        </div>
      </nav>
      <div id="copyright" class="bg-white">
        <p class="text-center text-dark mb-0 py-md-3 py-1">&copy; ホニャララ</p>
      </div>
    </footer>

    <script src="js/jquery-3.6.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
```

```JS
$(function () {
    $('[href*="#"]').click(function(){
        alert(1);
        var height=$("#header").height();
        $("body").css("margin-top", height);
    });
});
```

下記で現状の動きが確認できます。
https://iisaniisan.github.io/test/

追記：
確認したところ、jQueryのvar heightの値はちゃんと取れていることがわかりました。
最後の
$("body").css("margin-top", height);
のbodyのところが間違っていると思うので、bodyのところをクリックした先に変更したいです。

固定ヘッダーの際にアンカーリンク押下時、場所がずれて困っています。

### 前提

天気予報を表示させるプログラムを書いています.

最終的にリスト内に「text.innerHTML = 'おはようございます！' + at + '℃';」を表示させたいのですが, なぜか表示されません.

### 発生している問題・エラーメッセージ
pra.js:17 TypeError: Cannot read properties of undefined (reading 'temp')
    at fetchURLs (pra.js:8:34)
```

### 該当のソースコード
HTML, JavaScript, CSS
```ここに言語名を入力
【HTML】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
  <script src="pra.js"></script>
  <link rel="stylesheet" href="pra.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>

<body>
  <h1 id="text"></h1>
  <div>
    <ul>
      <li>
        <img src="C:\Users\kyosu\Pictures\CiLCiL\25度って何度だよ\img\tokyo_minatoku.jpg">
        <h3>スプリング</h3>
        <h1 id="text"></h1>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
         
      <li>
        <img src="http://sedoriplan.com/sample/css/images/012/summer.jpg">
        <h3>サマー</h3>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
   
      <li>
        <img src="http://sedoriplan.com/sample/css/images/012/fall.jpg">
        <h3>オータム</h3>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
   
      <li>
        <img src="http://sedoriplan.com/sample/css/images/012/winter.jpg">
        <h3>ウインター</h3>
        <p>春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。春夏秋冬。今日は晴れです。明日は曇りです。明々後日は雨です。</p>
      </li>
    </ul>
  </div>

</body>
</html>


【CSS】
* {margin: 0; padding: 0;}
 
div {
  width: 80%;
  margin: 0 auto;
  max-width: 500px;
  margin-top: 100px;
}
 
ul {
	list-style: none;
  width: 500px;
}
 
img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-right: 3%;
}

h3 {
	font-weight: bold;
	margin-bottom: 10px;
}
 
li img {
  float: left;
  margin: 0 15px 0 0;
}
 
li p{
	font-size: 13px;
	line-height: 1.4;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #eee;
  cursor: pointer;
}

【JavaScript】
var date = new Date();
const alltime = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) +('0' + date.getDate()).slice(-2) + ('0' + date.getHours()).slice(-2) + 0+0+0+0

async function fetchURLs(urls) {
    try {
        const fetchUrls = urls.map(url => fetch(url).then(res => res.json()))
        const [todo1] = await Promise.all(fetchUrls)
        const k = todo1["11001"].temp[0]
        const s = todo1["11001"].humidity[0]
        const v = todo1["11001"].wind[0]
        const a = 1.76 + 1.4*v**0.75
        const t = 37 - (37 - k)/(0.68 - 0.0014*s + a**-1) - 0.29*k*(1- s/100)
        const at = Math.round(t*10)/10 ;
        const text = document.getElementById('text');
        text.innerHTML = 'おはようございます！' + at + '℃';
      } catch (error) {
          console.error(error)
      }
    }
    fetchURLs(['https://www.jma.go.jp/bosai/amedas/data/map/' + alltime + '.json'])


```

### 試したこと

div内に「<h1 id="text"></h1>」を置いているのがダメなのかと思い, 外に置いてみましたが, 同様に表示されませんでした.

このリストを置く前はうまく表示できていました.


JS・innerHTMLが表示されない...

### 前提

現在、家の電気機器をWebでコントールできるシステムを作っています。
カメラの映像を映し出す場面で
コンテナの中に映像をうまくフィットさせたいが、はみ出て表示してしまっている

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-23/adaf42a3-77d6-4393-957c-7faa234b344d.png)

### 実現したいこと

Videoをコンテナ（Boxという名の）に綺麗に埋め込みたい

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

```
現在、コンテナからはみ出してしまっている
```

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

```CSS
.box {
  position: relative;
  background:#1E3E75; 
  padding:15px;
  border-radius: 10px;
  margin-bottom: 30px;
  width: 340px;
  height: 300px;
}


.discover_item_room_name_entity_id {
  position: absolute;
  top: 20;
  left: 100;
}

.discover_item_entity_id_camera {
  position: absolute;
}

.box .camera_video_discover {
  object-fit: cover;
  position: absolute;
  width: 340px;
  height: 300px;
```



```React.js
<div className="discover_device col-4">
    <div className="box">
    <ReactPlayer
        className="camera_video_discover"
        url={'xxx.com'}
        controls={false}
        playing
        muted
        config={{
            file: {
                hlsOptions: {
                    xhrSetup: (xhr) => {
                        xhr.setRequestHeader('Authorization', `Bearer ${cookies.get('accesstoken')}`);
                        },
                },
            },
        }} 
        />
    <div className="discover_item_room_name_entity_id">
        <p className="discover_item_room_name_carmera">Room Name</p>
        <p className="discover_item_entity_id_camera">Camear Name</p>
    </div>
</div>
</div>
```



コンテナの中に映像をうまくフィットさせたい

### 前提・実現したいこと

ウェブサイトにslickを用いてスライダーを設置しようとしています。スクリプトにcenterModeを付け加えたり、cssにtext-alignを付け加えたりしたのですが、画像が中央に配置されません。どのようにすれば、slickで画像が中央に表示されるかを知りたいです。


### 発生している問題・エラーメッセージ

スクリプトやCSSを変更してみましたが、画像が中央に配置されません。

### 該当のソースコード

```css
.slick {
	width: 100%;
	text-align: center;
	padding-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
.slider {
	position: relative;
	width: 800px;
}
.sliderlogo {
	position: absolute;
	top: 320px;
	left: 180px;
	font-size: 45px;
	font-weight: bold;
	font-family: fantasy;
	letter-spacing: 4px;
	text-align: center;
	color: #ffffff;
}

```
___________________________

```javascript
<script type="text/javascript">
$(function() {
  $('.slider').slick({
    accessibility: true,
    autoplay: true,
    autoplaySpeed: 2500,
    vartical: false,
    centerMode: false,
    fade: true
 });
});
</script>
```

____________________________

```html
<div class="slick">
      <ul class="slider">
      <li><img src="images/img1.jpg"></li>
      <li><img src="images/img2.jpg"></li>
      <li><img src="images/img3.jpg"></li>
      <li><img src="images/img4.jpg"></li>
     </ul>
    </div>
　　 <div class="sliderlogo">
      <p>文字１</p>
      <p>文字２</p>
    </div>

```
### 試したこと

スクリプトにcenterModeを付け加えたり、cssにtext-alignを付け加えたりしました。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

slick sliderで画像を中央に配置したいです。

### 前提

HTMLとCSSでハンバーガーメニューを作成したのですが、メニュー展開時にスクロールバーが表示され、下のコンテンツをスクロールできるようになってしまっています。

### 実現したいこと

メニュー展開時に表示されるスクロールバーを消したいです。
ご教授の程よろしくお願いします。

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

```HTML
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="test.js"></script>
    
    <link rel="stylesheet" href="test.css">
    
	<meta name="viewport" content="width=device-width,initial-scale=1">
    <title> Document </title>
</head>

<body>

  <input id="test" type="checkbox" />
  <label for="test">
      <svg class="burger" width="80" height="50" viewbox="0 0 150 150">
          <g stroke-width="12">   
              <line x1="6" y1="6" x2="80" y2="6"></line>
              <line x1="6" y1="28" x2="80" y2="28"></line>
              <line x1="6" y1="50" x2="80" y2="50"> </line>
          </g>
      </svg>
      <svg class="close" width="80" height="50" viewbox="0 0 150 150">
          <g stroke-width="12">   
              <line x1="42" y1="6" x2="42" y2="80"></line>
              <line x1="6" y1="42" x2="80" y2="42"></line>
          </g>
      </svg>
  </label>
  <div class="menu">
      <div><a href="https://www.instagram.com/">Home</a></div>
      <div><a href="https://www.instagram.com/">About</a></div>
      <div><a href="https://www.instagram.com/">Infomation</a></div>
      <div><a href="https://www.instagram.com/">Online Store</a></div>
      <div><a href="https://www.instagram.com/">Contact</a></div>
  </div>
  
</body>
</html>
```

```CSS
/* ハンバーガー開始 */
label {
    position: fixed;
    z-index: 1;
}
input {
    display: none;
}
input:checked ~ label {
    right: 0;
}
.burger {
    position: fixed;
    padding-top: 30px;
    cursor: pointer;
}
.burger g {
    stroke: #333333;
    transition: stroke 0.25s ease-in-out;  
}
.burger g:hover {
    stroke: darken(#333333, 20%);
}
input:checked ~ label .burger {
    opacity: 0;
}
.close {
    position: fixede;
    padding-top: 42px;
    cursor: pointer;
    opacity: 0;
}
ose g:hover {
    stroke: darken(#333333, 20%);
}
.close g {
    stroke: #333333;
    transition: stroke 0.25s ease-in-out;    
    transform: rotateZ(45deg);
    transform-origin: 50%;
}
.close line {
    transform-origin: 0%;
}
input:checked ~ label .close {
    opacity: 1;
}
.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffd700;
    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    pointer-events: none; /* 質問の回答 */
}
input:checked ~ .menu {
    opacity: 1;
}
.menu div {
    margin-top: 50px;
    transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input:checked ~ .menu div {
    margin-top: 0px;
    pointer-events: auto;/* 質問の回答 */
}
/* ハンバーガー終了 */
```

ハンバーガーメニュー展開時にスクロールを消す方法

### 前提

下記URLサイトのアイキャッチスライドのように水波紋のような画像スライドの方法を知りたいです。
http://www.nomula.co.jp/

URLサイトのソースコードを見たり、調べたりしてみましたが、これに関するソースコードを見つけることができませんでした。

もし、これに関するプラグインや実装方法などご存知の方いらっしゃいましたらご教唆いただきたいです。
よろしくお願いいたします。







