practice

　　　　

<html>

<meta charset="utf-8">
<style>
body{background-color:#eeeeee;}
span{position:absolute;
top:6px;
left:14px;
font-size:24px;
color:white;
font-weight:bold;}
.ミキサー{position:relative;
top:20px;
left:20px;
width:940px;
height:540px;
border:2px solid black;
background-color:white;}
.サウンド_1 iframe{position:absolute;
top:10px;
left:20px;
width:80px;
height:510px;
border:2px dashed red;
z-index:11;}
.サウンド_2 iframe{position:absolute;
top:10px;
left:120px;
width:80px;
height:510px;
border:2px dashed red;
z-index:12;}
.サウンド_3 iframe{position:absolute;
top:10px;
left:220px;
width:80px;
height:510px;
border:2px dashed red;
z-index:13;}
.サウンド_4 iframe{position:absolute;
top:10px;
left:320px;
width:80px;
height:510px;
border:2px dashed red;
z-index:14;}
.サウンド_5 iframe{position:absolute;
top:10px;
left:420px;
width:80px;
height:510px;
border:2px dashed red;
z-index:15;}
.サウンド_6 iframe{position:absolute;
top:10px;
left:520px;
width:80px;
height:510px;
border:2px dashed red;
z-index:16;}
.サウンド_7 iframe{position:absolute;
top:10px;
left:620px;
width:80px;
height:510px;
border:2px dashed red;
z-index:17;}
.サウンド_8 iframe{position:absolute;
top:10px;
left:720px;
width:80px;
height:510px;
border:2px dashed red;
z-index:18;}
.ナンバー_1{position:absolute;
top:476px;
left:42px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_2{position:absolute;
top:476px;
left:142px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_3{position:absolute;
top:476px;
left:242px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_4{position:absolute;
top:476px;
left:342px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_5{position:absolute;
top:476px;
left:442px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_6{position:absolute;
top:476px;
left:542px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_7{position:absolute;
top:476px;
left:642px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.ナンバー_8{position:absolute;
top:476px;
left:742px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_A{position:absolute;
top:56px;
left:816px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_B{position:absolute;
top:56px;
left:876px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_C{position:absolute;
top:116px;
left:816px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_D{position:absolute;
top:116px;
left:876px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_E{position:absolute;
top:176px;
left:816px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_F{position:absolute;
top:176px;
left:876px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_G{position:absolute;
top:236px;
left:816px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
.プリセット_H{position:absolute;
top:236px;
left:876px;
height:40px;
width:40px;
border:solid 1px black;
border-radius:8px;
background-color:gray;}
</style>

<section class="ミキサー">
<div class="サウンド_1"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_2"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_3"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_4"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_5"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_6"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_7"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="サウンド_8"><iframe src="TEST_Fader.html"frameborder="0"></iframe></div>
<div class="ナンバー_1"><span>1</span></div>
<div class="ナンバー_2"><span>2</span></div>
<div class="ナンバー_3"><span>3</span></div>
<div class="ナンバー_4"><span>4</span></div>
<div class="ナンバー_5"><span>5</span></div>
<div class="ナンバー_6"><span>6</span></div>
<div class="ナンバー_7"><span>7</span></div>
<div class="ナンバー_8"><span>8</span></div>
<div class="プリセット_A"><span style="margin-left:-2px;">A</span></div>
<div class="プリセット_B"><span style="margin-left:-2px;">B</span></div>
<div class="プリセット_C"><span style="margin-left:-2px;">C</span></div>
<div class="プリセット_D"><span style="margin-left:-2px;">D</span></div>
<div class="プリセット_E"><span style="margin-left:-2px;">E</span></div>
<div class="プリセット_F"><span style="margin-left:-2px;">F</span></div>
<div class="プリセット_G"><span style="margin-left:-2px;">G</span></div>
<div class="プリセット_H"><span style="margin-left:-2px;">H</span></div>
</section>

</html>