常連

注目の的

質問力

自己紹介

```ここに言語を入力
(HTML)
<input type="text" name="id">
<input type="password" name="pw">
<input type="tel" name="tel">
<button in="btn">check</button>
```

```ここに言語を入力
(JavaScript)
document.querySelector("#btn").addEventListener("click",
function() {
  document.querySelectorAll("input").forEach(
    function(input) {
      if(!input.value) {
        alert(input.name + " :error");
      }
    });
});
```
JavaScript４行目「function(input)」の仮引数inputには、
３行目の「document.querySelectorAll("input")」から返される
NodeList内のinput要素が、渡されるのでしょうか？
よろしくお願い致します。

querySelectorAll()の返り値について

２つの要素を左右に設置し、真ん中に区切り線を設置したいのですが、方法が分からないです。
具体的には、下記の画像のようにしたいと考えています。
![イメージ説明](dde888726531c9bbac925db11a4e290b.png)

以下は現時点で作成しているコードになります。
```html
 <div class="info">
        <p class="name">データ</p>
        <div>
          <p>test</p>
          <p>項目1:数学</p>
          <p>項目2:英語</p>
        </div>
      </div>
```
```css
.name::after{
    content:"";
    display:inline-block;
    height:3rem;
    background-color:red;
    border: solid 1px;
  }
  .info{
    display: flex;
    justify-content: space-around;
    background-color: #F5F5F5;
    border: solid 1px #C4C4C4;
    
  }
```

``after``要素に``height``を設定してみましたが、「テスト」の文字がどんどん下がっていってしまい、``margin-left``を設定しても、バーが詰まってしまったような形であまり動かない状態です。

[jsfiddle](https://jsfiddle.net/ycfqz34k/10/)にて、動作確認可能な状態となっております為、こちらよりご確認頂けましたら幸いです。

ご助言の程、よろしくお願いします。

真ん中に区切り線を設置したい

以下ソースにてリスト全体を中央寄せしようとしたところ、
黒点は左のままでリスト内文字列（例：リスト１）のみ中央寄せがされました。

これは、以下のようにリスト内文字列がインライン要素であるため、
起きた事象で宜しいでしょうか。

【li】
→ブロック要素のため、以下に記載したcssの影響を受けない。

【リスト内文字列】
→インライン要素のため親ブロック要素divのtext-align：center;の
　影響を受け中央寄せになった。

リスト全体の中央寄せについては、divのtext-align:center;を消し、
liにmargin:auto;を追記することで実現できる事は確認済みです。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta cherset="utf-8">
	<link rel="stylesheet" href="test2.css">
</head>
<body>
<div class="div_a">
	<ul class="list1">
		<li class="li_1">リスト１</li>
		<li class="li_2">リスト２</li>
		<li class="li_3">リスト３</li>
	</ul>
</div>
</body>
</html>
```

```CSS
.div_a{
	text-align:center;
}

.li_1{
	width:400px;
	background-color:green;

}

.li_2{
	width:400px;
	background-color:yellow;

}

.li_3{
	width:400px;
	background-color:blue;

}
```

リストの中央寄せについて（リスト内文字列はインライン要素か）

スライドショー画像の幅と高さをユーザーの画面サイズに合わせながら次のコンテンツを下に表示したい


スライドショーの画像の幅と高さは指定しないで、下のコンテンツ（class="main-contents"）をスライドショーの下にもってきたいのですが、どうしても画像に次のコンテンツが重なってしまいます。

なにか他に方法があったら教えてくださいm(_ _)m

幅か高さのどちらかを指定しないとできないのであれば、高さは600pxで固定でも良いのですが、横の画像がきれいに縮小してセンタリングになるようにしたいです。


分かる方がいましたら、ご伝授お願いいたします。

```html
<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サイト1</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/menu.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="warp">
<header class="header">
	<div class="sns_icon">
	    <ul class="sns_l">
			<li class="sns_l_1"><a href="#"><img src="images/icon_line.png" alt="LINE"></a></li>
			<li class="sns_l_1"><a href="#"><img src="images/icon_insta.png" alt="instagram"></a></li>
			<li class="sns_l_1"><a href="#"><img src="images/icon_cart.png" alt="オンラインショップ"></a></li>
		</ul>
  　　</div>
    <h1 class="header__logo">
        <a href="#" class="header__logo-link"><img src="images/logo.png" alt=""></a>
    </h1>
    <div class="nav__btn js-menu">
        <a href="javascript:void(0)" class="nav__btn-link">
			<div id="humberger">
			  <div></div>
			  <div></div>
			  <div></div>
			</div>
		</a>
    </div>
</header>

	
	<div class="nav">
		<div class="nav__overlay js-menu"></div>
		<div class="nav__content">
			<div class="nav__btn js-menu">
				<a href="javascript:void(0)" class="nav__btn-link">
				<span class="dli-close"></span>
				</a>
			</div>
			<nav class="nav__inner">
				<div id="globalMenuSp">
					  <ul id="manu" class="menu">
					  <li><a href="#">実店舗のご案内</a></li>
						  <ul>
							  <li class="tenpo"><a href="#">ショップ</a></li>
							  <li class="tenpo"><a href="#">カフェ</a></li>
							  <li class="tenpo"><a href="#">アクセス</a></li>
							  <li class="tenpo"><a href="#">カレンダー</a></li>
						  </ul>
					  <li><a href="#">ご案内</a></li>
					  <li><a href="#">オンラインショップ</a></li>
					  <li><a href="#">お問い合わせ</a></li>
						  <div class="menu_icon">
							  <div class="menu_icon1">
								  <div class="menu_sns_icon">
									  <p class="sns_icon1"><a href="#"><img src="images/icon_line.png" alt="LINE"></a></p>
									  <p class="sns_icon1"><a href="#"><img src="images/icon_insta.png" alt="instagram"></a></p>
									  <p class="sns_icon1"><a href="#"><img src="images/icon_cart.png" alt="オンラインショップ"></a></p>
								  </div>
							  </div>
						  </div>
					</ul>
				</div>
			</nav>
		</div>
	</div>
	
	
	
	<ul id="slideshow" class="slideshow">
	  <li class="showSlide"><img src="images/main01.png"></li>
	  <li><img src="images/main02.png"></li>
	  <li><img src="images/main03.png"></li>
	</ul>
	<script src="js/slideshow.js"></script>
	
<main class="main-contents">
	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</main>
<footer class="footer">
    <p>footer</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

</div>
</body>
</html>
```

```CSS
body{
	margin:0px;          /* ページ全体のmargin */
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
}


#warp
    {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width:100%;         /* 幅を決定する */
    }

/*ヘッダー*/


.header__logo-link img{
	height: 70px;
	width:auto;
}


.sns_icon{
	
}

.sns_l{
	display: table;
	
}

.sns_l_1{
	display: table-cell;
	
}

.sns_l_1 a img{
	width: 22px;
	padding-right: 15px;
	
}

/*スライドショー*/

.slideshow {
  width: 100%;
  height: 100%;
  list-style-type: none;
  position: relative;
}

.slideshow > li {
  opacity: 0;
  position: absolute;
  transition: opacity 3s ease-in-out;
}

.slideshow > li.showSlide {
  opacity: 1;
}

.slideshow > li > img {
  display: block;
  mnax-height: 100vh;
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
}

/* SP用メディアクエリ */
@media screen and (max-width:600px){
  .slideshow{
    width: 100%;
  }
}


.main-contents{

}

.header{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  padding: 5px 10px;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  z-index: 10;
}
.header__logo{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
}
.header__logo-link{
  color: #333;
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: normal;
  text-decoration: none;
}
.header .nav__btn{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  position: static;
}
.header .nav__btn-link{
  display: block;
  color: #666;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.15;
  font-size: 11px;
  font-size: 1.1rem;
}
.main-contents{
  height: 1055px;
  margin: 0px;
  padding-top: 55px;
}

/*  ナビ  */
.nav__overlay{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  background-color: rgba(0,0,0,0.6);
}
.nav__content{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
}
.nav__btn{
  position: absolute;
  top: 0;
  left: -55px;
}
.nav__btn-link{
  display: none;
}


body.is-open .nav__btn-link{
  display: block;
  padding-top: 15px;
  color: #fff;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  font-size: 11px;
  font-size: 1.1rem;
}
body.is-open .nav__overlay,
body.is-open .nav__inner{
  display: block;
}
.nav__inner{
  display: none;
  width: 250px;
  padding: 10px;
  overflow: auto;
  background-color: #fff;
}

li.tenpo a{
	padding-left: 18px;
	font-weight:100;
	font-size:14px;
}

.menu{
	padding-left: 30px;
	padding-top: 20px;
}

.menu li{
	padding-bottom: 20px;
	font-weight: bold;
}

.menu li a{
	text-decoration: none;
}

.menu_icon{
	position: relative;
	height: 100px;
}


.menu_icon1{
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 0;
}

.menu_icon1 a img{
	width: 100%;
}

.menu_sns_icon{
	width: 100%;
	display: table;
}

.sns_icon1{
	display: table-cell;
}

.sns_icon1 a img{
	width: 26px;
	padding-right: 15px;
}


/*ハンバーガーメニュー三本線*/

#humberger {
  position: relative;
  height: 24px;
  width: 24px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 24px;
  background-color: #444;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  top: 0;
}
#humberger div:nth-of-type(2) {
  top: 10px;
}
#humberger div:nth-of-type(3) {
  bottom: 0;
}

/*ハンバーガーメニュー閉じるボタン*/

.dli-close {
  display: inline-block;
  color: #fff;
  line-height: 1;
  width: 2em;
  height: 0.2em;
  background: currentColor;
  border-radius: 0.2em;
  position: relative;
  transform: rotate(45deg);
}

.dli-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}

/*フッター*/

footer{
	width: auto;
    height:70px;
    background-color :#000;
    color : #fff;
    text-align : center;
	padding-top: 60px;
}
```

```js
$(function(){
  var imgs = $("#slideshow > li");
  var imgLen = imgs.length;
  var count = 0;
  function changeImg(){
    count = (count + 1) % imgLen;
    imgs.removeClass("showSlide").eq(count).addClass("showSlide");
  }
  setInterval(changeImg, 5000);
})
```
```js
var scrollTopValue = 0;
$(window).scroll(function() {
    scrollTopValue = $(this).scrollTop();
});
$(function() {
    /* サイドメニュー */
    var saveScrollTopValue = 0;
    $(".js-menu").on("click", function(){
        $("body").toggleClass("is-open");
        if ($("body").hasClass('is-open')) {
            saveScrollTopValue = scrollTopValue;
            $('body').css({"top":-scrollTopValue + 'px'});
        } else {
            $('body').css('top','');
            $(window).scrollTop(saveScrollTopValue);
        }
    });
    var windowH = window.innerHeight;
    $('.nav__overlay, .nav__inner').css("height", windowH);
});

/*クリックで閉じる*/

$('#manu a[href]').on('click', function(event) {
        $('#humberger').trigger('click');
    });
```

スライドショー画像の幅と高さをユーザーの画面サイズに合わせながら次のコンテンツを下に表示したい

flexボックスでboxを横並びに配置しております。
abc
 d
のようにdだけ横並びから除外したいのですがflex-boxを使用してこのような
ことはできますでしょうか？
ご助言のほど、よろしくお願い申し上げます。

```HTML
<style>
#wrapper{
 display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: flex;
}
</style>
<div id="wrapper">
 <div id="a"></div>
 <div id="b"></div>
 <div id="c"></div>
 <div id="d"></div>

</div>
```

flexボックスを使用するときに一部のボックスは横並びにさせない

### 実現したいこと

現在WordPressを利用してウェブサイトの構築を行っております。
ローディング画面を実装したのですが、現状はページが更新されるたびに処理が発生しております。
そこで、外部からのアクセス時~~（初回アクセス時）~~のみローディング画面を発生させたいです。

古い記事ではあるのですが、下記記事を参考に
[jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法](http://black-flag.net/jquery/20111115-3552.html)

を読み、jquery.cookie.jsを用いて、記事のサンプルをそのまま利用しても機能しない状態です。

また、私自身javascriptの知識がないに等しいため、紹介記事等を参考に組んでおります。
どなたか初回アクセス時のみ以下の処理を行うorローディング画面を発生させる方法をご教授いただけないでしょうか。
よろしくお願いいます。


### 該当のソースコード

```
<script type="text/javascript">
var time=new Date().getTime();
$(function() {
  var h = $(window).height();

  $('#loader-bg ,#loader').height(h).css('display','block');
});

//全ての読み込みが完了したら実行
$(window).on('load',function () {
  var now = new Date().getTime();
  if (now-time<=3000) {
    setTimeout('stopload()',5000-(now-time));
    return;
  } else {
    stopload();
  }
});

//5秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout('stopload()',5000);
});

function stopload(){
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
}
</script>
```
現在は上記コードでローディング画面の発生・終了までは処理できております。

よろしくお願いいたします。



---追記---

Jqueryのバージョンや、Cookie.jsを使用した際のコードを書いたほうがいいとのご指摘をいただいたので、
追記させていただきます。

【ブラウザ】
GOOGLE Chrome
（バージョン: 67.0.3396.99（Official Build） （64 ビット））

【jQuery】
jquery-3.3.1.min.js

### 参考サンプルを記述したもの

```
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
  if($.cookie("access")){
    $('#first').css({display:'none'});
  }
  $(window).load(function(){
    $.cookie("access",$('body').addClass('access'));
  })
});
</script>
```

以上よろしくお願いいたします。


---追記---

外部からのアクセス時（初回アクセス時）のみ
と書いてありますが、私の説明不足でした。

主にページ内の内部リンクを対象と考えております。
トップページに直接アクセスした際にはローディング画面を表示。
サブページ等からトップページにアクセスした際にはローディング画面を非表示

と考えております。
私の記載内容がまとまっておらず、ご迷惑おかけしましたことおお詫び申し上げます。

初回アクセス時のみローディング画面を表示する方法について

ローディングアニメーションを実装したのですが、最初の一度だけ(リロード時は表示されないように)アニメーションをしたいのですがうまくいきません。
試したのはこちらです。こちらを組み合わせるのかそれとも１から作り直すのでしょうか？

```javaScript
window.addEventListener("load", function() {
  setTimeout(function() {
    document.getElementById("loading").classList.remove("active");
  },3000)
});

window.onload = function () {
  if(localStorage.getItem('loading') === null || localStorage.getItem('loading') != "1"){
 
    localStorage.setItem('loading',"1");
  }
 
 };
```

ローディングアニメーションを1度だけ実装したいのですがうまくいきません

### 外部サイト（検索とかブックマーク）からアクセスしたときはロゴサインアニメーションを表示して、 サイト内リンクでトップページに戻ったりするときは表示させない方法

現在ウェブサイトの構築を行っております。
ロゴサインアニメーション画面（トップページ）を実装したのですが、現状はページが更新されるたびに処理が発生しております。
そこで、外部からのアクセス時（初回アクセス時）のみロゴサインアニメーション画面（トップページ）を発生させたいです。
ロゴサインアニメーションは下記記事を参考にしました。
[ローディングー手書き風ロゴアニメーションー](https://coco-factory.jp/ugokuweb/move01/4-1-6/)
使用プラグインはvivus.jsです。

私自身、初心者でjavascriptの知識がないに等しいため、検索し紹介記事を参考にしております。
どなたか初回からアクセス時のみローディング画面を発生させ、サイト内リンクでトップページに戻った時は表示させない方法を
ご教授いただけないでしょうか。何卒よろしくお願い申し上げます。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
  
  <script>
  // vivus.js サインアニメーション描画プラグイン
  /* global Vivus*/ //←Vivusプラグイン存在してることを伝えるための記述
  var stroke;
      stroke = new Vivus('mask', {  //アニメーションをするIDの指定
          start:'manual', //自動再生をせずスタートをマニュアルに
          type: 'scenario-sync',  // アニメーションのタイプを設定
          duration: 125,  //アニメーションの時間設定。数字が小さくなるほど速い
          forceRender: false, //パスが更新された場合に再レンダリングさせない
          animTimingFunction:Vivus.EASE,  //動きの加速減速設定
      });
    
  $(window).on('load',function(){
          $("#splash").delay(3900).fadeOut('slow');//ローディング画面を4秒（4000ms）待機してからフェイドアウト
          $("#splash_logo").delay(3900).fadeOut('slow');//ロゴを1.5秒（4000ms）待機してからフェイドアウト
            stroke.play();//SVGアニメーションの実行
      });
  </script>
```
現在は上記コードでローディング画面の発生・終了までは処理できています。

よろしくお願いいたします。
### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

【ブラウザ】
GOOGLE Chrome
バージョン: 88.0.4324.146（Official Build） （x86_64）

【jQuery】
jquery-3.5.1.min.js

外部からのアクセスのみローディング画面表示

現在webサイトでトップページにローディングアニメーションを実行していますが、現状は一度トップページに入り、下層ページに入り、またページ内のリンクでトップページに戻った際もローディングアニメーションが表示されてしまいます。これをタイトルのように、外部のページからのアクセスの時にのみ、ローディングアニメーションを表示するようにしたい（外部からのアクセスであれば何度でも表示したい）のですが、どのように改変すればよいでしょうか？お力添え頂けると嬉しいです。
### 試したこと
[こちらの質問](https://teratail.com/questions/135126)を参考に下記のように表記してみたのですが、変わらずページ内リンクからでもトップにローディングアニメーションが表示されてしまいます。
```js

const host = window.location.hostname;


if (host !== "www.example.com") { //実際は自分のサイトのURLです

	$(function() {
		setTimeout(function(){
	     $('.trans3').addClass('move');
			$('.start p').fadeIn(1600);
		},500
	); //0.5秒後にロゴをフェードイン
		setTimeout(function(){
			$('.start').addClass('st-fade');
		},2500); //2.5秒後にロゴ含め背景をフェードアウト
	});

}
```
```HTML
...
</header>

<div class="start">
    <p><img src="/images/fuminsp.svg"></p>
    <div class="trans3"></div>
</div>

<main>
...
```
```css
.start {
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
  transform: scale(none);
  visibility: visible;
  opacity: 1; 
}

.start p {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  width: 280px; 
}

.start p > img {
  width: 100%; 
}

.st-fade {
  transform: scale(1.05, 1.05);
  transition: visibility 0.8s cubic-bezier(0.22, 0.11, 0.22, 1) 0s, opacity 0.7s cubic-bezier(0.22, 0.11, 0.22, 1) 0s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  opacity: 0;
  visibility: hidden; 
}

/*線を引く*/

/* 開始時の状態 */
.trans3 {
  width: 0%;
  height: 1px;
  position: fixed;
  top: 56vh;
  background: #772F6D;
  -webkit-transition: width 1.3s cubic-bezier(0.9, 0.1, 0.3, 0.9) 0s;
  transition: width 1.3s cubic-bezier(0.9, 0.1, 0.3, 0.9) 0s; 
}

/* 終了時の状態 */ 
.trans3.move {
  width: 100%;
}


```

環境
【ブラウザ】
Google Chrome
バージョン: 95.0.4638.54
safari バージョン12.1.2 (14607.3.9)でも同じ結果でした。

【jQuery】
バージョン: 3.6.0

外部のページからトップページにアクセスした時のみローディングアニメーションを表示したい

以下のhtml、cssのコードで問題があります。
わかっている人にしたら基本的な問題なのだと思いますが、いつになっても解決しないので質問させてください。

問題点は二つです。
１、見たままなのですが、tabboxの部分が上に重なってしまい上手く表示されません。
２、わかりにくい箇所ですが、ボタンの部分がhoverするとき、外側の部分(marginの部分)にカーソルを持っていくだけで、hoverが発生してしまう。

１に関して、distinctiveのposition:absoluteに問題があると思うのですが、これを消すとdistinctive-leftとrightの部分が消えてしまい緑の帯のような表現が出来なくなってしまうので出来ることなら消したくありません。
distinctive-left、center、rightを一つのdivにまとめてしまうことも考えたのですが、レスポンシブの関係でまとめたくはありません。

制限があり、コードも長くわかりづらいとは思いますがよろしくお願いします。

(追記)ウインドウの幅を狭くしていくと、ボタンがずれる瞬間があるのでこれも直したいです。(追記終了)

```html
<!DOCTYPE html>
<html lang="ia">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
        function ChangeTab(tabname) {
            // 全部消す
            document.getElementById('tab1').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';
            document.getElementById('tab3').style.display = 'none';
            // 指定箇所のみ表示
            document.getElementById(tabname).style.display = 'block';
        }
    </script>
</head>
<body>    
    <div id="mainContents">
        <div id="distinctive">
            <div id="distinctive-left"></div>
            <div id="distinctive-main">
                <h2>タイトル</h2>
                <ul id="distinctive-first">
                    <li>
                        <h3>見出し1</h3>
                        <p>あああああああああああああああああああああああああああああああああああああああああああ</p>
                    </li>
                    <li>
                        <h3>見出し2</h3>
				        <p>あああああああああああああああああああああああああああああああああああああああああああ</p>
                    </li>
                    <li>
                        <h3>見出し3</h3>
                        <p>あああああああああああああああああああああああああああああああああああああああああああ</p>
                    </li>
                </ul>
                <ul id="distinctive-second">
                    <li><a href="#">ボタン1</a></li>
                    <li><a href="#">ボタン2</a></li>
                    <li><a href="#">ボタン3</a></li>
                </ul>
            </div>
            <div id="distinctive-right"></div>
            <div id="distinctive-bottomleft"></div>
            <div id="distinctive-bottomcenter"></div>
            <div id="distinctive-bottomright"></div>
        </div>
        <div class="tabbox">
            <p class="tabs">
                <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">タブ1</a>
                <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">タブ2</a>
                <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">タブ3</a>
            </p>
            <div id="tab1" class="tab">
                <p>(タブ1の中身。何でも記述できます。)</p>
            </div>
            <div id="tab2" class="tab">
                <p>(タブ2の中身。HTMLタグも記述可能です。)</p>
            </div>
            <div id="tab3" class="tab">
                <p>(タブ3の中身。いくつでも増やせます。)</p>
            </div>
        </div>
    </div>
<script type="text/javascript">
  // デフォルトのタブを選択
  ChangeTab('tab1');
// </script>
</body>
</html>
```
```css
*{
	margin: 0px;
	padding: 0px;
}
body{
    background: gray;
}
#mainContents {
	overflow:hidden;
    width: 100%;
	max-width: 960px;
    height: auto;
    margin: 0 auto;
    background-color: rgb(255,255,255);
	
	
}
#distinctive {
    position: absolute;
}
#distinctive-left {
	background: #aacf53;
	margin-top: 10px;
	margin-left:-20px;
	width: 20px;
	height: 237px;
	float: left;
}
#distinctive-main {
	background: #aacf53;
	margin-top: 10px;
    color: #fff;
    text-align: center;
	width: 100%;
    max-width: 960px;
	float: left;
}
#distinctive-main h2 {
	margin: 10px 0px 10px 0px;
	padding-top: 10px;
	text-shadow: 1px 1px 3px #000000;
}
#distinctive-first li {
	position: relative;
    float: left;
    width: 33%;
    text-align: center;
	list-style: none;
}
#distinctive-first li:nth-child(2) {
	border-left: 1px dotted #ffffff;
	border-right: 1px dotted #ffffff;
}
#distinctive-main h3 {
	margin: 10px 0px 10px 0px;
	text-shadow: 1px 1px 3px #000000;
}
#distinctive p {
	display: block;
	margin: 10px 20px 10px 20px;
}
#distinctive-second li {
	position: relative;
    float: left;
    width: 33.33%;
    text-align: center;
	list-style: none;
}
#distinctive-second li a{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 25%;
	display: block;
    padding: 16px 0;
	width: 50%;
    background-image: linear-gradient(180deg,#2d5434 0%,#29905e 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    text-shadow: 1px 1px 3px #000000;
}
#distinctive-second > li:hover > a{
	background-image: linear-gradient(180deg,#29905e 0%,#2d5434 100%);
}
#distinctive-right {
	background: #aacf53;
	margin-top: 10px;
	margin-right:-20px;
	width: 20px;
	height: 237px;
	float: left;
}
#distinctive-bottomleft {
	clear: both;
	background-image: linear-gradient(26.565051145046deg,transparent 49%,#86aa30 50%,#86aa30 100%);
	margin-left:-20px;
    left: 0px;
    float: left;
    width: 20px;
	height: 10px;
}
#distinctive-bottomcenter {
	background-image: linear-gradient(180deg,#969696 0%,#ffffff 100%); 
    float: left;
    width: 100%;
	height: 10px;
}
#distinctive-bottomright {
	background-image: linear-gradient(153.434948694794deg,#86aa30 49%,transparent 50%,transparent 100%);
	margin-right:-20px;
	right: 0px;
    float: left;
    width: 20px;
	height: 10px;
}
/* 表示領域全体 */
div.tabbox {
    margin: 0px; padding: 0px; width: 400px;
}
/* タブ部分 */
p.tabs {
    margin: 0px; padding: 0px;
}
p.tabs a {
    display: block; width: 5em; float: left;
    margin: 0px 1px 0px 0px; padding: 3px;
    text-align: center;
    border-radius: 12px 12px 0px 0px; /* 角を丸くする */
}
p.tabs a.tab1 {
    background-color: blue; color: white;
}
p.tabs a.tab2 {
    background-color: #aaaa00; color:white;
}
p.tabs a.tab3 {
    background-color: red; color: white; 
}
p.tabs a:hover {
    color: yellow;
}
/* タブ中身のボックス */
div.tab {
    height: 150px; overflow: auto; clear: left; 
}
div#tab1 {
    border: 2px solid blue; background-color: #ccffff;
}
div#tab2 {
    border: 2px solid #aaaa00; background-color: #ffffcc;
}
div#tab3 {
    border: 2px solid red; background-color: #ffcccc;
}
div.tab p {
    margin: 0.5em; 
}
```

position:absoluteを使うと次のブロックが重なってしまう

セレクトボックスの初期設定を appearance:none;　で一度無効にし,疑似要素で矢印のデザインを変えたいと思っております。
しかし、写真のようにセレクトボックスの外にはみ出して表示されてしまいます。この▼をセレクトボックスの中の右端に入れたいのですが、方法がわかりません。分かる人がいたら、ぜひ教えて頂けると非常に助かります。
![イメージ説明](ebd5b114a14ecdaae3eb990f57dfc2bd.png)

```html
<!doctype html>
  <html>
    <head>
       <title>模写１</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="style7.css">
    </head>
      
      
<body>
    <div class="box">
      <select class="place">
          <option>東京</option>
          <option>神奈川</option>
          <option>栃木</option>
          <option>福岡</option>
    </select>
    </div>
    
</body>
</html>
```
```css
.box::after{
    content:'▼';
}

.place{
    width: 200px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}
```

セレクトボックスの中に疑似要素で矢印を入れたい

### 前提・実現したいこと

bootstrap4を利用したWEBページの作成をしています。

### わからないこと

bootstrapのcssを見ると、
「-webkit-box-flex」や「-webkit-box-shadow」といった記述があります。

この頭の「-webkit」にはどういった意味があるのでしょうか？

検索してみましたが、全くヒットしないのでモヤモヤしています。
ご回答よろしくお願いいたします。

Bootstrap4のcss「-webkit」の意味

windows１０で開発しているのですが、safariの動作確認はどのようにしたらよいのでしょうか？

普段はchrome使っていて、そこの検証でスマホの形のところから端末選んだりはできるのですが、ブラウザは選べませんよね？

実際にそのブラウザでやろうと思ったのですが、Windows用のsafariがもうないみたいで、どうしたものかと。。。

一応普段使っている携帯はiPhoneなのでどうにかしたらできるのかな？とも思うのですが、わからなかったので質問させていただきました。

やりたいことは、windowsで現在開発しているプロジェクトのサファリでの表示の確認です。

以上です。経験したことのある方や、何かわかる方いましたらよろしくお願いいたします

windowsで開発。safariの動作確認

Visual Studio Codeでホームページを作成しています。

CSSで、flexぼｘを使用しているのに横並びにならずに困っています。
何が原因なのかもわからずです。

```HTML
    <main>
      <section class="subtance">
        <h2 class="subtance-heading">活用・採用事例</h2>

        <figure>
          <div href=""><img src="img/活用・採用事例1.JPG" alt="文字の代替">
            <figcaption class="decorator">詳細はこちら＞</figcaption>
          </div>
        </figure>

        <figure>
          <div href=""><img src="img/活用・採用事例2.JPG" alt="文字の代替">
            <figcaption class="decorator">詳細はこちら＞</figcaption>
          </div>
        </figure>

        <figure>
          <div href=""><img src="img/活用・採用事例3.JPG" alt="文字の代替">
            <figcaption class="decorator">詳細はこちら＞</figcaption>
          </div>
        </figure>

        <figure>
          <div href=""><img src="img/活用・採用事例4.JPG" alt="文字の代替">
            <figcaption class="decorator">詳細はこちら＞</figcaption>
          </div>
        </figure>

      </section>
      <div class="sidebar"></div>
    </main>

```

```CSS
main {
  width: 900px;
  display: flex;
  flex-wrap: center;
  margin: 10 auto;
  padding: 70px 15px;
}

.subtance {
  width: 600px;
  margin-right: 150px;
}

.subtance-heading {
  border-bottom: 8px solid #c0c0c0;
  text-align: center;
  line-height: 0.5%;
}

main figure {
  width: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

main figure img {
  width: 100%;
  display: flex;
  justify-content: center;
}

main figure figcaption {
  font-size: 20px;
  color: #ffffff;
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
}
```

親要素だけにflexを入れていたりしましたが、
子要素に反映されずにいました。

Flexboxを使用し画像を横並びにする方法

サイト内の背景（今回はヘッダー部分）に動画を組み込みたいと思っております。
・形式はmp4で<video>タグにて組み込む場合と、youtubeにアップしたものをjQueryなどで動かすもののどちらがよいのでしょうか。

・以前、<video>タグにてmp4動画を組み込んだ際、動画の周りに黒い帯（レターボックス？）が表示されてしまったのですが、これはどのようにしたら消すことが出来るのでしょうか。サイズを1280×720に変更してアップしても左右に帯がはいってしまいます。

・スマホ対応の場合、iosでもｍｐ4は表示されるのでしょうか。

質問が多くなってしまい、申し訳ございません。
どうぞよろしくお願いいたします。

Webサイトに動画を表示させたい

<video>タグにてphotoshopで作成したmp4動画をアップしたいのですが、サイズが合わず、左右に黒帯が出てしまいます。
**★960×550のサイズで実際のサイトにはアップしたいのですが、制作する動画サイズはいくつが望ましいでしょうか。また、<video>タグやCSS等で統制する方法はありますでしょうか**

①　**960×720（3：4の比率）**で作成した動画をHTML上に入力し、
```HTML5

<div id="samv">
<video  id="video" autoplay loop width="960" height="720" ><source src="sample.mp4">
</video>
</div>

```


CSSで、高さを550pxに制御すると、動画の下の部分（170px分）は切れてしまいますが、**黒帯は無く表示されます**

```CSS3
#samv {
    width: 960px;
    height: 550px; 
    margin: auto;
    overflow: hidden;
}
```



②　しかし、元の動画を**960×550で制作**し、
<video  id="video" autoplay loop width="960" height="550" >と入力し、
先程のCSSと組み合わせると、画像は全て出るのですが、元のサイズではなく、左右に黒帯が出てしまいます。
この時、動画のサイズは変更され、黒帯含めて、960×550となってしまいます。

![Chromeでの表示](b233e41504615e383ff3f7d54ac15099.jpeg)

★3:4の比率で作成した動画では黒帯が出ないので望ましいと思ったのですが、画像を切ることなく、黒帯を出すことも無く、960×550のサイズで表示させることは難しいのでしょうか。
①の例の場合、CSSで統制できたのですが、②の場合は<video>タグやcssでサイズを変更しても、黒帯は消えません。
解決法ございましたら教えてください。。。

<video>タグと動画サイズについて

### 前提・実現したいこと
自動販売機のお釣り計算の機能を作成しています。

返却ボタンが押された際にメソッドが動く仕様にしています。

ここまで２通り（if文・for文）ほど書いてきたが、
演算子のみの使用でfor文やif文は使用せずに記述できるそうです。
お釣りの硬貨の種類は500円、100円、50円、10円。
各硬貨の上限枚数は99枚。
自動販売機に投入することが可能な金額もそれぞれの硬貨を99枚投下した際の和となっております。

少しひらめきのような問題とのことですが、上記2つの書き方以外に見つかりません。
お教えいただけますと幸いです。

### 該当のソースコード
***********_Miasuu  = 各硬貨の枚数を入れる変数
MAISUUJOUGEN  = 99 (硬貨の最大投入枚数)
Tounyukingaku 　＝投入金額の現在数値
***********KOUKA = 各硬貨の値段
 ```ここに言語を入力 C#
①for文使用
for
(Fivehundred_Miasuu = 0; Fivehundred_Miasuu < MAISUUJOUGEN && Tounyukingaku >= FIVEHKOUKA; Fivehundred_Miasuu ++)
            {Tounyukingaku = Tounyukingaku - FIVEHKOUKA;}

for 
(Onehundred_Miasuu = 0; Onehundred_Miasuu < MAISUUJOUGEN && Tounyukingaku >= ONEHKOUKA; Onehundred_Miasuu++)
            {Tounyukingaku = Tounyukingaku - ONEHKOUKA; }
for 
(Fifty_Miasuu = 0; Fifty_Miasuu < MAISUUJOUGEN && Tounyukingaku >= FIFTYKOUKA; Fifty_Miasuu ++)
            {Tounyukingaku = Tounyukingaku - FIFTYKOUKA;}
for (Ten_Miasuu = 0; Ten_Miasuu < MAISUUJOUGEN && Tounyukingaku >= TENKOUKA; Ten_Miasuu++)
            {Tounyukingaku = Tounyukingaku - TENKOUKA;}
```
```ここに言語を入力
②if文使用
AmariKingaku = 各硬貨で割って余った金額を借り代入しておく変数
            // 投入金額が硬貨の値以上
            if (tounyuukinngaku >= FIVEHKOUKA)
            {
                // 500円硬貨の枚数
                Fivehundred_Miasuu = tounyuukinngaku / FIVEHKOUKA;
                // 500円硬貨の枚数が枚数上限より大きい場合
                if (Fivehundred_Miasuu > MAISUUJOUGEN)
                {
                    // 余剰金の計算
                    AmariKingaku = (Fivehundred_Miasuu - MAISUUJOUGEN) * FIVEHKOUKA;
                    // 500円硬貨の枚数　＝　上限枚数
                    Fivehundred_Miasuu = MAISUUJOUGEN;
                    // 投入金額の更新
                    tounyuukinngaku = tounyuukinngaku - (FIVEHKOUKA * MAISUUJOUGEN);
                    // 投入金額　＝　投入金額 + 余剰金
                    tounyuukinngaku = tounyuukinngaku + AmariKingaku;
                }
                else
                {
                    tounyuukinngaku = tounyuukinngaku - (FIVEHKOUKA * Fivehundred_Miasuu);
                }
            }
・
・
・
・
・
・
・
・
//これを各硬貨行い、最後に各硬貨の枚数を取得しました。
```
```ここに言語を入力
C#
```
### 補足情報（FW/ツールのバージョンなど）

Visual Studio 2019を使用しています。

C#　if文やfor文を使わずにお釣りの硬貨の枚数を計算したい。

JavaScript初心者です。
textareaの残り文字数をカウントダウンしようとしています。
onkeyupでJavaScriptのメソッドをcallして残り文字数を更新しているのですが、コピー＆ペーストを行うと更新されないケースがあります。
・スマホでロングタップして貼り付け
・PCでマウス操作による貼り付け
の場合に更新されません。
PCで[ctrl]+vで貼り付けたときは更新されるので、上記２ケースではkeyupイベントが発生していないためと考えています。
いくつかネットに紹介されている実装例を見てみましたが、同じ問題があるように思います。
回避方法がありましたらご教示ください。

【補足】
回答ありがとうございます。
情報が抜けていて申し訳ありません。jQueryでの解決方法をお願い致します。
ご提示のありましたchangeイベントは、textareaからフォーカスが外れないと発火しないので使用目的には合いませんでした。
oninputで検知すると確かにマウスでの貼り付けでもうまく動作しますが、IE8では対応されていないのでしょうか。
APIを見てもinputイベントというのは見当たりませんので気になります。

JavaScriptでの残り文字数カウント

PHPで <input type="text"> や <textarea> の受け取り方で最も良い方法はどのようなものでしょうか？

入門書を見ても統一されてなくてどれがベストなのかわかりません。

例えば以下のようなフォームがあったとします。

```HTML
  <form action="accept.php" method="post">

  苗字：
  <input type="text" name="lName" size="25" maxlength="15" required>

  名前：
  <input type="text" name="fName" size="25" maxlength="15" required>

  題名：
  <input type="text" name="subject" maxlength="30" size="30">

  コメント：
  <textarea name="comment" cols="30" rows="7" maxlength="200" required></textarea>

  <input type="submit" value="送信">

</form>

```

これを受け取るPHPコードは以下です。(※CSRF対策はしていません)

```PHP
$errors = [];

$space=[" ", "　"]; //半角と全角スペース

//苗字と名前(必須)
if (($_POST["fName"]==="")||($_POST["lName"]==="")){
  $errors[] = "空です。";
}else {
  $fName = $_POST["fName"];
  $fName = mb_substr($fName, 0, 15);
  $fName = str_replace($space, "", $fName);
  $fName = trim(mb_convert_kana($fName, "s", 'UTF-8'));

  $lName = $_POST["lName"];
  $lName = mb_substr($lName, 0, 15);
  $lName = str_replace($space, "", $lName);
  $lName = trim(mb_convert_kana($lName, "s", 'UTF-8'));
}

//題名
if (isset($_POST["subject"])){
  $subject = $_POST["subject"];
  $sybject = trim(mb_convert_kana($subject, "s", 'UTF-8'));
  $subject = strip_tags($subject);
  $subject = mb_substr($subject, 0, 30);
} else {
  $subject = "";
}

//コメント(必須)
if (isset($_POST["comment"])){
  $comment = $_POST["comment"];
  $comment = trim(mb_convert_kana($comment, "s", 'UTF-8'));
  $comment = strip_tags($comment);
  $comment = mb_substr($comment, 0, 200);
} else {
  $comment = "";
  $errors[] = "空です。";
}

```
一応、出力のコードも記載します。

```PHP
//エラーがあったとき
if (count($errors) > 0){
  foreach ($errors as $value) {
    echo $value;
  }
  exit();
}else {
  //h()はHTMLエスケープ関数
  echo h($fName);
  echo h($lName);
  echo h($subject);
  echo h($comment);
}
```

入力値チェックの後にやっていることはほとんど同じですが、

題名subject(必須でない)については、変数がセットされてない、又はそれがNULLであれば空文字に置き換えるという処理をしています。入力値がNULLになるときはあるのかわかりませんが...

入門書を読むと、フォーム値の受け取りで if($_POST["fName"]==="")のように空でないかチェックしていたり、issetやemptyを使っていたりします。

**安全面も考慮すると、初めの入力値チェックはどのように行うのがよいのでしょうか？if else の構成はどのようにすべきですか？また必須項目でなくてもNULLはエラー対象にするべきでしょうか？**

**入力値チェックの後、文字数制限をしてスペースを取り除いてよい場合は上記の方法で問題ないでしょうか？**

ご回答よろしくお願いします。

PHP 安全な<input>や<textarea>の受け取り方について

次のテキストエリアの入力文字数を制限したいのですが、どうもうまくいきません。

```html
<div id="#postexcerpt" class="wpuf-fields">
<span id="excerpt-count"></span>
<textarea class="textareafield wpuf_post_content_4" id="post_content_4" name="post_content" data-required="yes" data-type="textarea" ></textarea>
</div>
```
wordpressなので、functions.phpにこのように書いているのですが、間違いをご指摘いただけませんでしょうか？
```php

function excerpt_count() {
?>
<script>
  (function($) {
    var count = 100;
    $('#postexcerpt .wpuf_post_content_4').after('<span style=\"padding-left:1em; color:#888; font-size:12px;\">現在の文字数： <span id=\"excerpt-count\"></span> / '+ count +'</span>');
    $('#excerpt-count').text($('.wpuf_post_content_4').val().length);
    $('#excerpt').keyup(function() {
      $('#excerpt-count').text($('.wpuf_post_content_4').val().length);
      if ( $(this).val().length > count ) {
        $('#excerpt-count, #postexcerpt .wpuf-fields textarea').css('color', '#f00');
      } else {
        $('#excerpt-count, #postexcerpt .wpuf-fields textarea').css('color', '#888');
      }
    });
    $('#postexcerpt .wpuf-fields textarea').html('※ここに入力した内容は一覧画面で <strong>"'+ count +'文字"</strong> までは表示されますが、それ以降は省略表示されます。').css('color', '#888');
  }(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'excerpt_count' );
add_action( 'admin_footer-post.php', 'excerpt_count' );
```
よろしくお願いいたします。<(_ _)>