常連

### 前提・実現したいこと
Adobe Dreamweaver2020+Bootstrap4で作成しています。
レイアウト崩れを解消したいです。（Firefoxのみ崩れているようです。）

### 発生している問題・エラーメッセージ

FireFoxの表示のみですが、ページの再読み込み（リロード）を押すと、
フッターがページの上部に移動する等、レイアウトが崩れてしまいます。
特にスクロールが長くなるときに起きるようです。
（常に起きるわけではないですが、再読み込みを何度か押した際、数回起きます。）

### 該当のソースコード![イメージ説明](fb68832fdcd7acb04982c85ffeba0f5a.png)
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title>aaaaaaa | bbbbbbb</title>

<link href="/css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="/css/midashi-style.css" rel="stylesheet">
<script src="/js/jquery-3.4.1.min.js"></script> 
<script src="/js/popper.min.js"></script> 
<script src="/js/bootstrap-4.4.1.js"></script> 


</head>
<body class="fixnavbar-margin" id="">

<div class="container mt-1">
  <div class="row"> 
    
    <div class="col-lg-3 order-2">
      <nav id="sidebar">
        <div class="pt-5">
          <h5 class="border-sidebar"><strong>ああああああ</strong></h5>
        </div>
      </nav>
    </div>
    <div class="col-lg-9 pl-md-5 order-lg-2">
      <h1 class="midashi">いいいいいいいいいいいいいい</h1>
      <h2 class="midashi">ううううううううう </h2>
      <h3 class="midashi"> </h3>
<div class="row px-2 text-justify">
        <div class="col-lg-12">
          <section>
            <h2 class="midashi-2 mt-0">ええええええええ</h2>
            <h3 class="midashi-2">おおおおおおおおおおおおおおお</h3>
            <p>
              　この文章はダミーです。ここに文章が入ります。</p>
            <p>&nbsp;</p>
          </section>
        </div>
      </div>
      </div>
  </div>
</div>
<footer class="py-5 mt-5 bg-dark text-white">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center d-md-flex justify-content-between align-items-center">
        <ul class="nav d-flex justify-content-center">
          <li class="nav-item"> <a class="nav-link active text-white-50" href="#">HOME</a></li>
          <li class="nav-item"> <a class="nav-link text-white-50" href="#">サイトマップ</a></li>
        </ul>
        <p class="mb-0 py-1">Copyright(C) All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>
<div id="page_top"><a href="#"></a></div>
</body>
</html>
```
```
@charset "UTF-8";
/* CSS Document */
.border-sidebar {
  border-bottom: 2px solid #A5090C;
  padding-bottom: 5px;
}
.brgp {
  background-position: 0% 100%;
  background-repeat: repeat-x;
  background-image: url(../img/header-obi.png);
  background-size: contain;
}
.my-navborder {
  border-right: 1px solid #B3B3B3;
  margin-top: 9px;
  margin-bottom: 8px;
}
.fixnavbar-margin {
  padding-top: 85px;
}
.wrap {
  overflow: hidden;
}
.h4-midashi-1 {
  font-size: 1.4rem;
  font-weight: bold;
  color: #008b8b;
  border-bottom: 1px solid #000000;
  padding-bottom: 8px;
  margin-bottom: 1.5em;
}
h1.midashi {
  font-size: 1.5rem;
  padding-top: 0.8em;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-bottom: 0.8em; /*文字周りの余白*/
  color: #fff; /*文字色*/
  background-color: #AC0000; /*背景色*/
  border-left: 6px solid #000000; /*左線（実線 太さ 色）*/
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.6em;
}
h2.midashi {
  color: #AC0000;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
  border-bottom-style: solid;
  padding-bottom: 0.5em;
  border-bottom-width: 1px;
}
h2.midashi-2 {
  font-size: 1.5rem;
  padding-top: 0.8em;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-bottom: 0.8em; /*文字周りの余白*/
  color: #494949; /*文字色*/
  background-color: #F8F8F8; /*背景色*/
  border-left: 6px solid #A5090C; /*左線（実線 太さ 色）*/
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.6em;
}
h3.midashi {
  color: #494949;
  font-size: 1.3rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
}
h3.midashi-2 {
  color: #AC0000;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
}
h3 {
  font-size: 1.5rem;
}
h4.midashi {
  font-size: 1.5rem;
  padding-top: 0.8em;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-bottom: 0.8em; /*文字周りの余白*/
  color: #494949; /*文字色*/
  background-color: #F8F8F8; /*背景色*/
  border-left: 6px solid #A5090C; /*左線（実線 太さ 色）*/
  font-weight: bold;
  margin-bottom: 1em;
  margin-top: 1.6em;
}
h5.midashi {
  color: #AC0000;
  font-size: 1.5rem;
  margin-bottom: 1em;
  font-weight: bold;
  margin-top: 2em;
}
.top-midashi {
  font-size: 3rem;
  font-family: ‘Noto Serif Japanese’, serif;
}
.top-midashi-sf {
  font-size: 2.5rem;
  font-family: ‘Noto Serif Japanese’, serif;
  font-weight: initial;
}
#sidebar ul li {
  font-size: 0.9rem;
}
#sidebar ul li a {
  text-decoration: none;
  padding: 11px 1px 8px 1px;
  display: block;
  color: black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#accordion_menu > li {
  border: #ccc 1px solid;
  margin-bottom: -2px;
}
#accordion_menu a {
  color: #666;
}
#accordion_menu a, [data-toggle="collapse"] {
  display: block;
  padding: 10px;
  text-decoration: none;
  position: relative;
}
#accordion_menu a[data-toggle="collapse"]:hover {
  background: #e7e7e7;
}
#accordion_menu a:hover {
  background: #e7e7e7;
}
#accordion_menu li a:hover {
  background: #e7e7e7;
}
#accordion_menu li:hover {
  background: #e7e7e7;
}
#accordion_menu a[data-toggle="collapse"]::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: #666 1px solid;
  border-right: #666 1px solid;
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#accordion_menu a[aria-expanded=false]::after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  transition-duration: 0.3s;
}
#accordion_menu a[aria-expanded=true]::after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  transition-duration: 0.3s;
}
[id^="menu"] li {
  padding: 4px 10px 0px 20px;
}
#accordion_menu li {
  border-style: none;
}
#accordion_menu #menu01 li, #accordion_menu #menu02 li, #accordion_menu #menu03 li, #accordion_menu #menu04 li, #accordion_menu #menu05 li, #accordion_menu #menu06 li, #accordion_menu #menu07 li, #accordion_menu #menu8 li, #accordion_menu #menu09 li, #accordion_menu #menu10 li, #accordion_menu #menu11 li, #accordion_menu #menu12 li, #accordion_menu #menu13 li, #accordion_menu #menu14 li, #accordion_menu #menu15 li, #accordion_menu #menu16 li, #accordion_menu #menu17 li, #accordion_menu #menu18 li, #accordion_menu #menu19 li, #accordion_menu #menu20 li, #accordion_menu #menu21 li {
  border-style: none;
  text-indent: -8px;
  padding-left: 1.3em; /* アイコンと文章の間のスペース */
}
#menu01 li a:before, #menu02 li a:before, #menu03 li a:before, #menu04 li a:before, #menu05 li a:before, #menu06 li a:before, #menu07 li a:before, #menu8 li a:before, #menu09 li a:before, #menu10 li a:before, #menu11 li a:before, #menu12 li a:before, #menu13 li a:before, #menu14 li a:before, #menu15 li a:before, #menu16 li a:before, #menu17 li a:before, #menu18 li a:before, #menu19 li a:before, #menu20 li a:before, #menu21 li a:before {
  content: "\f105";
  position: relative;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  left: -0.3em; /* アイコンのスタート位置。左揃えの場合 ul のpadding-leftと同じ値 */
}
#page_top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #A5090C;
  opacity: 0.6;
  z-index: 2;
}
#page_top a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
a.midashi-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #fff;
  border: 1px solid #a9a9a9;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  margin-bottom: 5px;
  color: #000;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
a.midashi-btn:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #a9a9a9;
  border-right: 2px solid #a9a9a9;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
a.midashi-btn:hover {
  background: #dcdcdc;
  color: #000;
}
a.midashi-btn:hover:before {
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}
.font-small a {
  font-size: 0.8rem;
}
.font-large a {
  font-size: 1.1rem;
}
.anchor {
  display: block;
  padding-top: 200px;
  margin-top: -200px;
}
.anchor2 {
  display: block;
  padding-top: 275px;
  margin-top: -275px;
}
.col-md-4 .page-btn h3 {
  font-size: 1.2rem;
  background-color: #f0edc9;
  color: #A5090C;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  font-weight: bold;
}
```
### 試したこと

スクロールが長くならないよう、記事を減らしたら表示されませんでした。
ただ、どうしても長くなるページもあるので、改善したいです。
### 補足情報（FW/ツールのバージョンなど）
Adobe Dreamweaver2020で作成しています。

ページの再読み込みを押すと、レイアウトが崩れてしまいます。

### 前提・実現したいこと

JavaScriptの打鍵テストを実施する際に、「どのコードを通ったか」を可視化したいです。
そのようなツールやブラウザ拡張等をご存じないでしょうか。

※自動テストでは[istanbul](https://istanbul.js.org/)等でカバレッジを見ることができますが、打鍵テストでやりたいと考えています。
※`TypeScript`や`React`や`Vue`等のソースマップも辿って元ソースのカバレッジを見てくれると嬉しいなぁ、と考えています。

打鍵テストで通ったコードが可視化できるツールはないでしょうか

CSSを指定する際に、効率的なやり方はないかと思い、ご助言を頂戴したく質問させて貰いました。
下記コードの「ul」要素の中の「li」の２番目と３番目以外に対してCSSを当てたい場合、逆に2番目と３番目のみにCSSを合てたい場合、効率的な方法としましては、どのような方法があるでしょうか？
[qiita](https://qiita.com/ituki_b/items/62a752389385de7ba4a2)の記事を参考に考えていたのですが、特定の要素番目や奇数番目、偶数番目などの指定方法はあったのですが、「２つの要素」以外などの指定方法が分からなかったもので...


```html
<div class="top_content">
  <ul class="page_list">
    <li>
      <i class="black_circle_svg"></i>
      <p>来院目的</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>予約日選択</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>予約時間選択</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>情報入力</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>入力確認</p>
    </li>
    <li>»</li>
    <li>
      <i class="circle_svg"></i>
      <p>登録完了</p>
    </li>
  </ul>
</div>

```

複数の要素以外及び、複数の要素のみのCSSの指定方法について

### 前提・実現したいこと

DBから取得したデータを順番通りに出力したい。

### 該当のソースコード

```Javascript
$.each(users,function(index,val){
    (async()=>{
        console.log(index); //一つ目
        dataExperience = database.ref('/experience/' + val.experience_id);
        var p = await new Promise(resolve=>{
            setTimeout(()=>{resolve(dataExperience.once("value"))},0);
        })
        .then(function(snapshot) {
            console.log(index); //二つ目
        });
    });
});
```

### 発生している問題

今回はデータベースから取得したデータを元に、別テーブルも参照してデータを取得したい。
データ自体は出力できるのだが、indexの値が非同期内の場合、逆になってしまう。
いくら非同期だといえ、逆になる原因が不明。

一つ目のコンソールログ
```
0
1
2
3
4
5
```

二つ目のコンソールログ
```
5
4
3
2
1
0
```

【javascript】each時のindexの値がおかしい

A B C D
1 4 8 9
1 4 8 8
1 3 8 7
4 1 8 7

このようなテキストを読み取ってABCDのそれぞれの値がDBに存在するかチェックみたいな事をするのに、
毎行SQLを発行したくないので、一旦DBのABCD情報を取得して

class PojoA {
    private int a;
    private int b;
    private int c;
    private int d;
}

このようなPOJOクラスのリストに入れておき、それに対して検索したいのですが、
for (PojoA pojoA : pojolist) {
    if (pojoA.a = text.a
        && pojoA.b = text.b
        && pojoA.c = text.c
        && pojoA.d = text.d
    )
        return true
}
こんな感じのメソッドを作ってテキストの毎行呼び出すようにしています。
なんとなくもっとスマートなやり方があるような気がしたのですが、
このやり方は通常ですか？冗長なやり方になっていますか？

Javaで取得したデータ（POJOのリスト）に対して検索をする方法

jsで、imgタグの内容もしくは、img.srcに設定するbase64イメージをクリップボードにコピーして、Excelなどに貼り付けられないか調査しています。

テキストのコピーについてはできることは確認できたのですが、画像についてはうまくいきません。
サンプルとして見つけた([参考](http://embed.plnkr.co/CCalCBmouRtAkoE5arHF/))ページがあり、実行してみたところ、エラーにはならないのですが、クリップボードに画像はコピーされませんでした。

他のサイトで見るやり方もこのサンプルのイメージではあります。
なにか権限が足らないのか、そもそもできるはずがないのかというところを確認したいです。

実際にはChrome拡張で実装できればと思っていますので、Chrome拡張の機能ならできるということでも構いません。

気になるのが、Chrome拡張にあるスクリーンキャプチャのアプリはどれを見てもクリップボードに直接コピーしてくれる機能がありません。クリップボードにコピーしたければ、右クリックして。。という説明があります。

jsでの実現は難しいのでしょうか？

-----------------------------
ご意見いただいたことからわかったのですが、
サンプルページのような実装で、imgをクリップボードにコピーすることはできるようです。
ただし、base64のimgについてはコピーされません。

これは、ロジックの問題というより、仕様的なものかもしれません。

base64デコードページというものが提供されています。([リンク先](https://tomari.org/main/java/base64d.html))
こちらのページで適当な画像のbase64文字列を貼り付けて下にその画像を表示し、画像を右クリックして「画像をコピー」でコピーしたものをExcelに貼り付けても、同じように白い画像が貼り付くだけです。
ここで普通にコピペできるような状態でないと、プログラムでもコピーできないのではないかと思います。

base64画像を何らかの変換でimg.srcに通常の画像として設定するような方法はあるのでしょうか？

JavaScriptで画像をクリップボードにコピーしたい

atomic designでatomにするものは「これ以上分解できない最初の単位」と存じます。

propsでkeyTypeをもらってaかbによって表示する内容を判定するロジックを入れようとしてますが、
それをatomに書いても「これ以上分解できない最初の単位」の規約に違反されないでしょうか。

以下のようなコードです。

```
<template>
  <span :class="getKeyAttr(keyType, 'class')">
    <img
      :src="getKeyAttr(keyType, 'src')"
      :alt="getKeyAttr(keyType, 'alt')"
    >
  </span>
</template>

<script>
const keyType: KeyOptions = {
  a: {
    spanClass: 'aaa',
    alt: 'aaa',
    src: 'aaa.png'
  },
  b: {
    spanClass: 'bbb',
    alt: 'bbb',
    src: 'bbbpng'
  }
};

@Component
export default class extends Vue {
  private getKeyAttr( type: KeyTypes, prop: keyof KeyOption ) {
    return keyType[type][prop];
  }
}

</script>
```