常連

### 前提

Javascriptを使用してWebサイトを構築しています。
clickイベントでボタンを押下後、さらにマウスの左右のクリックの判定によってUIに変化を加える処理中に思うような動作を得られませんでした。
下記ソースコードはその一例です。

### 実現したいこと
1.[クリック]ボタン押下→"色変化"出力(黒色)→マウス左クリック時には赤色に変化し、右クリック時には青色に変化する
2.赤/青色の変化は一度変化したら繰り返さない
### 発生している問題
[クリック]ボタン押下時に、左クリックの判定も入ってしまうため、赤色への変化がせず困っております。
どのように改善すれば上記の[実現したいこと]ができるでしょうか。ご教授いただければ幸いです。
### 該当のソースコード

```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p1>右：青　 左：赤</p1>
      <button id="btn">クリック</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      let btn = document.getElementById('btn');
      btn.onclick = function () {
        console.log('クリック！！');
        let p = document.createElement('p');
        p.innerHTML = '色変化';
        btn.after(p);

        $('html').one('click contextmenu', function (e) {
          console.log(e.which);
          if (e.which == 1) {
            //左クリック
            console.log('左クリック');
            if (!e.target.closest('#btn')) {
              p.style.color = 'red';
            }
          } else if (e.which == 3) {
            //右クリック
            console.log('右クリック');
            p.style.color = 'blue';
          }
        });
      };
    </script>
  </body>
</html>
```





clickイベント内でのclickイベントが思うような動作をしない

### 前提
404ページを作りたいのですが、正しい方法がわかりません。

私は「コンテンツがないとき＝404にするとき」とざっくりした認識を持っています。
しかし下記のような三者三様のバリエーションを見つけ、混乱しています。

どういうケースで、どれが良いのでしょうか？

### バリエーション

|リンク|twitter|qiita|teratail|
|:--:|:--:|:--:|:--:|
|URL|https://twitter.com/ghjaomgrhoaijgorf|https://qiita.com/ghjaomgrhoaijgorf|https://teratail.com/questions/ghjaomgrhoaijgorf|
|ページ|「404」は表示なく、「このアカウントは存在しません」と普段のページデザインを維持|「404」と表示|「404」と表示|
|コンソール|コンソールに404である情報はなし|コンソールに「GET https://qiita.com/ghjaomgrhoaijgorf 404」と表示|コンソールに404である情報はなし|


### 質問事項

質問①
それぞれどんな思惑と効果が考えらるでしょうか？

質問②
ページに「404」と表示されない、twitterの設計はアリなのでしょうか？
私もそもそもユーザーにとってよく意味のわからない「404」などの数字は無意味で不要と思っていたのですが、いざ表示されないとアリなの？と疑問です。（例えばGoogle的にはナシとか、各所での意見はないのでしょうか？）

質問⑶ 
コンソールに「GET https://qiita.com/ghjaomgrhoaijgorf 404」と表示されない、twitterとteratailの設計はアリなのでしょうか？
これはつまり `header("HTTP/1.1 404 Not Found");` がないということですよね？アリなのでしょうか？

404ページのバリエーションと使い分け方

### 前提

JavaScriptで、フォームの内容を取得し、次のページへクエリで引き継ぎたい。

### 実現したいこと

**1.フォームに入力**

名前:あ
ID:い（表示していない）
選択肢ボタン:3
ラジオボタン:2
お問合せ内容:う

**2.次へボタンを押すと、クエリに入力内容を入れて次のページへ移動**
https://***.com/next.html/?name=あ&id=い&section=3&radio=2&text=う
### 発生している問題
ボタンを押しても動作しない

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

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> 
  <title>お問い合わせフォーム</title>
p {

font-family: "font_1";
}
.text {
font-family: "rogpurs";
}
.user{
 display:none !important;
}
</style>
</head>


<body onload="into()">
    <form method="post">
        <div>
            <div>
                <div>
                    お名前
                    <span>必須</span>
                </div>
                <div>
                    <input type="text" name="f01" id="name" value="" />
                </div>
            </div>
<div class="user">
           <input type="text" name="f01" id="id" value="" />
</div>

   <div>
                <div>
                    お問い合わせカテゴリ
                </div>
                <div>
                    <div>
                        <select id="target" name="f05">
                            <option value="" selected="selected">----- 選択してください -----</option>
                            <option value="1">商品について</option>
                            <option value="2">配送について</option>
                            <option value="3">その他</option>
                        </select>
                        <span></span>
                    </div>


                </div>
            </div>

            <div>
                <div>
                    購入状況

                </div>
                <div>
                    <div>
                        <label>
                            <input type="radio" name="f04" id="ct" value="1" />
                            <span>購入前</span>
                        </label><label>
                            <input type="radio" name="f04" id="ct" value="2" />
                            <span>商品の到着待ち</span>
                        </label><label>
                            <input type="radio" name="f04" id="ct" value="3" />
                            <span>商品が到着済み</span>
                        </label>
                    </div>


                </div>
            </div>


            <div>
                <div>
                    お問い合わせ内容

                </div>
                <div>
                    <textarea id="text" name="f02"></textarea>


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

                <button type="button" onclick="nextPage();"text"name="action" value="next">次へ</button>
            </div>

    </form>
</div>
<script language="JavaScript" type="text/javascript">  
function nextPage() {
  let checkValue = '';
  for (let i = 0; i < len; i++){
    if (byRadio.item(i).checked){
      checkValue = byRadio.item(i).value;
    }
  }
let byRadio = document.getElementsByName('by');
let len = byRadio.length;
byRadio[0].checked = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
  
              var element = document.getElementById( "target" ) ;
                var a = element.value ;
                name = document.login_form.name.value
                id = document.login_form.id.value;
                ct = a
                by = checkValue
                text = document.login_form.text.value
                location.href = "next.html/?name="+name+"&id="+id+"&ct="+ ct +    "&by="+by+"&text="+ text ;
            }
        </script>
```

### 試したこと

どうしたらいいのか何もわからなかった

JavaScriptでフォームの回答をクエリで引き継ぎ

初歩的かもしれませんが、dtやddの中にdivを入れても問題はないでしょうか？

[【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ](https://webliker.info/html/46840/)のサイトで見たところdtとddの中に入れられるタグの中にdivが入っておりません。ただし「…などなど」と書かれているので本当に入れられないかが不明です。

もしご存知の方がおられましたら、ご教示お願いします。
可能なら確証が持てるドキュメントもお願いします。

↓この書き方はOKですか？
```html
<dl>
    <dt>
        <div></div>
        <div></div>
    </dt>
    <dd>
        <div></div>
        <div></div>
    </dd>
</dl>
```

[html] dtやddの中にdivを入れても問題ですか？

### 前提
Javascript初心者です。
Javascriptで、チェックボックスのチェックできる数を制限しています。

### 実現したいこと
質問事項が複数ある中で、各質問項目ごとにチェック数の制限をしたいです。
例：
質問1で、チェックを3つまで
質問2でも、チェックを3つまで

### 発生している問題・エラーメッセージ
全てのチェックボックスの中で3つまでとなってしまい、「各質問ごとに」という制限をする方法がわかりません。

foreachや、for文などで質問項目ごとに対して、要素の取得する時どのような考え方でコードを書いたら良いかいまいちわかりません。
どうか、アドバイス最適な実装方法をご教示いただけますと幸いです。

何卒よろしくお願いいたします。


### 該当のソースコード
**【HTML】**
```ここに言語を入力
<div class="q-block">
	<div class="title">質問1（3つまで選択できます。）</div>
	<div class="checkbox-group js-check-limited">
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢1</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢2</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢3</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢4</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢5</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢6</span>
				</label>
			</span>
		</div>
	</div>
</div>

<div class="q-block">
	<div class="title">質問2（3つまで選択できます。）</div>
	<div class="checkbox-group js-check-limited">
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢6</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢7</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢8</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢9</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢10</span>
				</label>
			</span>
		</div>
		<div class="checkbox-group__item">
			<span class="checkbox-field">
				<label>
					<input type="checkbox" name="test" class="js-check-item">
					<span>選択肢11</span>
				</label>
			</span>
		</div>
	</div>
</div>
```


**【javascript】**
```ここに言語を入力
		const checkMax = 3;
		const checkBoxes = document.querySelectorAll('.js-check-item');
	
		function checkCount(target) {
			let checkCount = 0;
			checkBoxes.forEach(checkBox => {
				if (checkBox.checked) {
					  checkCount++;
				}
			});
			if (checkCount > checkMax) {
				alert('最大3つまで');
				target.checked = false;
			}
		}
		
		checkBoxes.forEach(checkBox => {
			  checkBox.addEventListener('change', () => {
				checkCount(checkBox);
			  })
		});
```




【Javascript】各フォーム項目ごとにチェックボックスのチェックできる数を制限

### boxを中央配置した状態で、子要素（boxを基準に85％で指定した背景色）を全画面表示にさせたいです
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-22/8a60b9a4-ce77-472c-a0bb-ebb91152713f.png)
・上の画像は画面幅を3000pxにした時の状態です。
・紫色で囲っているのが中央配置したboxです。
・ピンク色で囲っているのがboxに対して85％で指定した背景色です。本来は右側の余白部分も背景にしたいです。

### 該当のソースコードはboxを中央配置にすることを第一優先に考え、max-widthを指定しています

```HTML
<div class="concept">
  <h2>アリスの国</h2>
  <section class="wrapper">
    <h3>ふしぎなお話</h3>
    <p>
      　アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈しはじめていました。
    </p>
  </section>

  <section class="story">
    <div class="box_right">
      <div class="broken_right">
        <img src="https://picsum.photos/400/250">
      </div>
      <div class="wap">
        <h3>おもしろいお話</h3>
        <p>
          <span class="text_right">
            アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈しはじめていました。
          </span>
        </p>
        <a class="btn_decoration" href="#">MORE</a>
      </div>
    </div>
  </section>

  
  <img class=" broken_left" src="https://picsum.photos/200/200">
</div>
```

```CSS
a {
  text-decoration: none;
}

/* ---------------------------------*/
.concept {
  max-width: 125rem;
  margin-right: auto;
  margin-left: auto;
}

.wrapper {
  padding: 0 2rem;
}

.wrapper {
  max-width: 65rem;
}

.wrapper h3,
.wrap h3 {
  margin-bottom: 1rem;
}

.wrapper p {
  padding-right: 1rem;
  padding-bottom: 4rem;
}

/* brタグを非表示にする*/
.wrapper p br,
.text_right br {
  display: none;
}

.story {
  margin-top: 3rem;
  text-align: left;
  position: relative;
}

.box_right {
  width: 85%;
  margin-left: auto;
  background-color: pink;
}

/* broken_right */
.broken_right {
  text-align: right;
  position: relative;
}

.broken_right img {
  width: 90%;
  max-width: 50rem;
  position: relative;
  top: -4rem;
}

.wap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-bottom: 5.5rem;
  width: fit-content;
  margin-left: auto;
}

.wap h3,
.wap p {
  margin-left: 2rem;
  padding-right: 1.5rem;
}

/* ボタンの作成 */
.btn_decoration {
  position: relative;
  right: 2.5rem;
  bottom: 0rem;
  font-size: 1.2rem;
  display: inline-block;
  line-height: 3rem;
  padding: 0 0 0 3rem;
  margin: 2rem 3rem 0 4.5rem;
  z-index: 100;
}

/* 丸の作成 */
.btn_decoration::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  z-index: -1;
  width: 2.5rem;
  height: 2.5rem;
  background: blue;
  border-radius: 50%;
  transition: 0.3s ease-out;
}

/* 矢印の作成 */
.btn_decoration::after {
  position: absolute;
  content: "";
  top: 42.5%;
  right: -1.5rem;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
}

/* ホバー時の挙動　faqボタンも共通*/
.btn_decoration:hover,
.btn_decoration_ct:hover {
  color: white;
}

.btn_decoration:hover::before,
.btn_decoration_ct:hover::before {
  width: 10.6rem;
  border-radius: 2rem;
}

.btn_decoration:hover::after,
.btn_decoration_ct:hover::after {
  border-top: 1.5px solid white;
  border-right: 1.5px solid white;
}

/* broken_left */
.broken_left {
  width: 35%;
  max-width: 26rem;
  position: relative;
  top: -3rem;
}

```

### 試したこと
HTMLの構造から変えようと思い、boxを基準にピンク色の背景を付けた子要素の階層を親要素と同じにしたのですが、上手くいきませんでした。

boxの中央配置と子要素（boxを基準に85％で指定した背景色）を全画面表示にすることの両方を叶える手段が見つけられません。

boxを中央配置した状態で、子要素（boxを基準に85％で指定した背景色）を全画面表示にさせたい

### 前提

現在、HTML,CSSをWordpress化し、サイト作成しています。
そこでCSSレイアウトの微調整をしているとpaddingが反映されておらず、
デベロッパーツールでは、invalid property value と表示されていました。
ただ、全角では入力していませんし、
一番解せないのは、デベロッパーツール上で同じclass内のプロパティのチェックマークを外すと、
そのプロパティがwidthだろうがheightだろうがcolorだろうが、paddingが問題なく適用されます。
※画像参照（①が初期のinvalid、②がそれぞれのプロパティのチェックを外した状態、③が外したチェックを再度戻した状態）
①![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-30/8c4f0b7b-4bc0-4529-9292-e994bae7f87f.png)
②![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-30/cb4337f8-dd02-4640-9f8f-597471be5e69.png)
③![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-30/8edd63a2-9ebc-421b-b5f2-e2699a5ec4b1.png)

コードの反映は、毎回Shift＋F5で更新して確認しています。

この問い合わせフォームはWordpressのContact Form 7のプラグインで作成していますが、
paddingを適用させようとしているところは、HTMLに直接記述したdivです。

### 実現したいこと

paddingを正常動作させたい。

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

```
invalid property value
（デベロッパーツールで覗いた最初のみ）
```

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

```CSS
      .Contact-contents{
        height: auto;
        position: absolute;
        width: 100%;
        color: #E8E9E5;
        padding: 0 12.5vw 30px;
	  }

CSSをアップロードした初めは問題なく適用されていましたが、
12.5vwよりもう少し余白を大きくしたいなと思い、17.5vwと入力すると上述のエラーが出たので、
12.5vwに戻しましたが元には戻りませんでした。
他のところはいじっていない（と思います。）
```

### 試したこと

全角入力がないかチェック。値を変える。これより優先度が上の記述がないか捜索。

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

Wordpressのサーバーに上げたファイルをローカルに落として上げ直したらうまく適用されましたが、
これでなぜ解決できたのか理由が分からなかったので、一応続けて回答募集します。


CSSのpaddingがうまく適用されない。（invalid property value）


こんにちは
連日質問させていただいています。

現在htmlを勉強しておりまして、外部へ出せませんが仮インターネットサイトのページをカンプに合わせて作成しています。

画像のような構造の場合、
自分はまず骨組みになるHTMLですが、 セレクタはimg,div,pのみを使っています。（section等は今回無しで）
その時同じ形の構造が３つ並んでいるのがわかるので、画像と右のQAを合わせて１つの塊としまずはそこのHTMLを書いていきます。その後２回コピペします。
そしてそれぞれの要素に対して一つずつclass名をつけていきます。
この画像の場合１５個のclass名を作ります。
その後その１５個のclass名をCSSにセレクタをコピーし、１つの要素ずつ完成させていきます。
３つの塊のうち、１つができたらhtml同様２回ずつコピペします。
あとはずれているところを調整していって完成です。

正直初心者なのでこのやり方しかほぼ知りません。
見ようみまねでdd,dtやli,ulなどを使ってみましたがうまくできませんでした。
class名を少なく設定して、被っている要素を一つにまとめて一つのセレクタでやってみたこともあるのですが、カンプにどうしても合わなくなり（大体は合うが若干ずれてしまう）諦めました。

見た目は完成しているので自分のやり方は間違いではないのでしょうがソースコードが膨大な量になってしまうため、早いところ脱却したいと思っています。
みなさんも同じような経験あったりしますでしょうか？
このソースコードを見たら、プロはどう思いますか？
初心者でもできるおすすめのHTML構造、CSS構造などありますでしょうか。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-19/5bd8a6db-6fd5-4817-8416-dd82d0022629.png)

以下コードです。

```HTML

    <section class="qa">
        <div class="qa__content">
            <h2></h2>
            <div class="qa__flex1">
                <div>
                <img src="img/q1.png" alt="" class="qa__img1">
                </div>
                <div>
                <div class="qasubflex">
                    <p class="qa__Q1">Q</p>
                    <p class="qa__text1">文章文章文章</p>
                </div>
                <div class="qasubflex">
                    <p class="qa__A1">A</p>
                    <p class="qa__text2">文章文章文章</p>
                </div>
                </div>
            </div>

            <div class="qa__flex2">
                <div>
                <img src="img/q2.png" alt="" class="qa__img2">
                </div>
                <div>
                <div class="qasubflex">
                    <p class="qa__Q2">Q</p>
                    <p class="qa__text3">文章文章文章</p>
                </div>
                <div class="qasubflex">
                    <p class="qa__A2">A</p>
                    <p class="qa__text4">文章文章文章</p>
                </div>
                </div>
            </div>

            <div class="qa__flex3">
                <div>
                <img src="img/q3.png" alt="" class="qa__img3">
                </div>
                <div>
                <div class="qasubflex">
                    <p class="qa__Q3">Q</p>
                    <p class="qa__text5">文章文章文章</p>
                </div>
                <div class="qasubflex">
                    <p class="qa__A3">A</p>
                    <p class="qa__text6">文章文章文章</p>
                </div>
                </div>
            </div>
        </div>
    </section>
```