経緯
偉い人「VAS作って」
蝦「はい」
そもそもVASとは
Google先生で一番上に出てくるページを参照
VAS of 脊髄外科ジャーナル
医療や看護の分野でよく使うのだとか。
作るもの
シンプル イズ ベスト
今回は0から10までの10段階で押せるようにする。勿論増やせば100段階でも可。
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
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属性の背景色を変更する。
終わり
なんかあったらコメントください。
↧