HTMLでVAS(Visual Analogue Scale)を作る。

#経緯
偉い人「VAS作って」
蝦「はい」

#そもそもVASとは
Google先生で一番上に出てくるページを参照
[VAS of 脊髄外科ジャーナル](http://www.katano-hp.or.jp/annai/sekitsui/journal/topics/pg283.html)

医療や看護の分野でよく使うのだとか。

#作るもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425022/ade43433-f4e6-25bd-9c88-a9944acea3d4.png)
シンプル　イズ　ベスト
今回は0から10までの10段階で押せるようにする。勿論増やせば100段階でも可。

#HTML

```html:vas.html
<!DOCTYPE html>
<html lang="ja">
  <body>
     <h1>VAS</h1>
      <div class="content">
        <div id="vas-wrapper">
          <div class="vas-edge">0</div>
          <div id="vas">
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-1"
            />
            <label class="vas-label" for="vas-1"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-2"
            />
            <label class="vas-label" for="vas-2"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-3"
            />
            <label class="vas-label" class="vas-label" for="vas-3"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-4"
            />
            <label class="vas-label" for="vas-4"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-5"
            />
            <label class="vas-label" for="vas-5"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-6"
            />
            <label class="vas-label" for="vas-6"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-7"
            />
            <label class="vas-label" for="vas-7"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-8"
            />
            <label class="vas-label" for="vas-8"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-9"
            />
            <label class="vas-label" for="vas-9"></label>
            <input
              class="radio-none-dsplay"
              type="radio"
              name="vas"
              id="vas-10"
            />
            <label class="vas-label" for="vas-10"></label>
          </div>
          <div class="vas-edge">10</div>
        </div>
      </div>
  </body>
</html>
```

ひたすらinputとlabelを並べていく。Vue等のフレームワークを使うならリストレンダリングで楽にできるはず。

#CSS
```css:style.css
/* VAS */
/* 両端の数字とVAS本体が横に並ぶようにする */
#vas-wrapper {
  display: flex;
}

#vas {
  display: flex;
  width: 300px;
  height: 3rem;
  background-color: cyan;
  white-space: nowrap;
}

/* 幅と余白を調整する。 */
.vas-label {
  background-color: transparent;
  height: 100%;
  width: 10%;
  margin: 0;
  padding: 0;
}
/* 両端の数字が必ず真ん中に来るようにする。 */
.vas-edge {
  display: flex;
  align-items: center;
}
.radio-none-dsplay:checked + .vas-label {
  background-color: blue;
}

```

## flex最強説
display:flexにしてlabelを横並びにする。終わり

## 結合子
例によって隣接兄弟結合子(+)で選択されたinputの直後のlabel属性の背景色を変更する。

#終わり
なんかあったらコメントください。