practice

　　　　

<html>

<meta charset="utf-8">
<style>
.ボックス{position:fixed;
top:40px;
left:40px;
height:334px;
width:490px;
border:solid 2px #999999;
border-radius:4px;
box-shadow:1px 2px 4px silver;}
.テキスト_01{position:relative;
top:20px;
left:108px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.テキスト_02{position:relative;
top:20px;
left:274px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.フレキシブル_01{display:flex;
flex-wrap:wrap;
position:absolute;
top:4px;
left:40px;}
.セット_01{position:absolute;
top:40px;
left:10px;
height:40px;
width:468px;
border:solid 1px #cccccc;
border-radius:30px;
box-shadow: 2px 2px 4px -2px gray inset;}
.サークル_01{position:relative;
top:2px;
left:11px;
height:30px;
width:30px;
border:solid 2px #000000;
border-radius:50%;
box-sizing:border-box;}
.サークル_01::before{content:"◀︎";
position:absolute;
top:-2px;
left:2px;
font-size:20px;
color:#000000;
transform:scale(1,0.7);
box-sizing:border-box;}
.サークル_02{position:relative;
top:2px;
left:82px;
height:30px;
width:30px;
border:solid 2px #000000;
border-radius:50%;
box-sizing:border-box;}
.サークル_02::before{position:absolute;
content:"▶︎";
top:2px;
left:6px;
font-size:20px;
color:#000000;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_01{position:relative;
top:1px;
left:148px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_01::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:#000000;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_02{position:relative;
top:1px;
left:150px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_02::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:#000000;
transform:scale(1,0.7);
box-sizing:border-box;}
.テキスト_03{position:absolute;
top:90px;
left:106px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.テキスト_04{position:relative;
top:90px;
left:208px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.フレキシブル_02{display:flex;
flex-wrap:wrap;
position:absolute;
top:6px;
left:0;}
.セット_02{position:absolute;
top:110px;
left:10px;
height:40px;
width:468px;
border:solid 1px #cccccc;
border-radius:30px;
box-shadow: 2px 2px 4px -2px gray inset;}
.レクタングル_03{position:relative;
top:0;
left:16px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_03::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_04{position:relative;
top:0;
left:18px;
height:30px;
width:100px;
border:solid 2px #000000;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_04::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_05{position:relative;
top:0;
left:48px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_05::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_06{position:relative;
top:0;
left:50px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_06::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.テキスト_05{position:absolute;
top:160px;
left:100px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.テキスト_06{position:relative;
top:160px;
left:156px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.フレキシブル_03{display:flex;
flex-wrap:wrap;
position:absolute;
top:0;
left:0;}
.セット_03{position:absolute;
top:180px;
left:10px;
height:40px;
width:468px;
border:solid 1px #cccccc;
border-radius:30px;
box-shadow: 2px 2px 4px -2px gray inset;}
.レクタングル_07{position:relative;
top:6;
left:16px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_07::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_08{position:relative;
top:6px;
left:18px;
height:30px;
width:100px;
border:solid 2px #000000;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_08::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_09{position:relative;
top:6px;
left:48px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_09::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_10{position:relative;
top:6px;
left:50px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_10::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.テキスト_07{position:absolute;
top:230px;
left:84px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.テキスト_08{position:relative;
top:230px;
left:98px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
.フレキシブル_04{display:flex;
flex-wrap:wrap;
position:absolute;
top:0;
left:0;}
.セット_04{position:absolute;
top:250px;
left:10px;
height:40px;
width:468px;
border:solid 1px #cccccc;
border-radius:30px;
box-shadow: 2px 2px 4px -2px gray inset;}
.レクタングル_11{position:relative;
top:6px;
left:16px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_11::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_12{position:relative;
top:6px;
left:18px;
height:30px;
width:100px;
border:solid 2px #000000;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_12::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_13{position:relative;
top:6px;
left:48px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_13::before{content:"◀︎";
position:absolute;
top:-2px;
left:36px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.レクタングル_14{position:relative;
top:6px;
left:50px;
height:30px;
width:100px;
border:solid 2px black;
border-radius:6px;
box-sizing:border-box;}
.レクタングル_14::before{position:absolute;
content:"▶︎";
top:1px;
left:40px;
font-size:22px;
color:black;
transform:scale(1,0.7);
box-sizing:border-box;}
.テキスト_09{position:relative;
top:294px;
left:-194px;
font-family:HiraKakuProN-W3;
font-size:14px;
color:#000000;}
</style>

<div class="ボックス">
<span class="テキスト_01">PART</span><span class="テキスト_02">INSTRUMENT</span>
<div class="セット_01">
<div class="フレキシブル_01">
<div class="サークル_01"></div>
<div class="サークル_02"></div>
<div class="レクタングル_01"></div>
<div class="レクタングル_02"></div>
</div></div>
<span class="テキスト_03">LEVEL</span><span class="テキスト_04">PAN</span>
<div class="セット_02">
<div class="フレキシブル_02">
<div class="レクタングル_03"></div>
<div class="レクタングル_04"></div>
<div class="レクタングル_05"></div>
<div class="レクタングル_06"></div>
</div></div>
<span class="テキスト_05">REVERB</span><span class="テキスト_06">CHORUS</span>
<div class="セット_03">
<div class="フレキシブル_03">
<div class="レクタングル_07"></div>
<div class="レクタングル_08"></div>
<div class="レクタングル_09"></div>
<div class="レクタングル_10"></div>
</div></div>
<span class="テキスト_07">KEY SHIFT</span><span class="テキスト_08">MIDI CH</span>
<div class="セット_04">
<div class="フレキシブル_04">
<div class="レクタングル_11"></div>
<div class="レクタングル_12"></div>
<div class="レクタングル_13"></div>
<div class="レクタングル_14"></div>
</div></div>
<span class="テキスト_09">DELAY</span>
</div>
<img src="front_panel-3.jpg"style="position:fixed;
top:420px;
left:40px;
height:334px;
width:493px;">

</html>