practice

　　　　

<html>

<meta charset="utf-8">
<style>
.コンテナ_1{display:grid;
position:fixed;
top:100px;
left:100px;
margin:0;
height:480px;
width:960px;
padding:20px;
border:solid 1px silver;
background-color:#f8f8f8;
grid-template-columns:160px 160px 160px 160px 160px 160px;
grid-template-rows:40px 100px 100px 100px 100px 40px;
grid-template-areas:"T_1 T_1 T_1 T_1 T_1 T_1"
"ボックス_1 ボックス_2 ボックス_3 ボックス_4 ボックス_5 ボックス_6"
"ボックス_7 ボックス_8 ボックス_9 ボックス_10 ボックス_11 ボックス_12"
"ボックス_13 ボックス_14 ボックス_15 ボックス_16 ボックス_17 ボックス_18"
"ボックス_19 ボックス_20 ボックス_21 ボックス_22 ボックス_23 ボックス_24"
"B_1 B_1 B_1 B_1 B_1 B_1";
border-radius:10px;}
.ボックス_トップ{grid-area:T_1;
text-align:center;
font-size:18px;
font-weight:bold;
padding-top:6px;
border-top:solid 1px black;
border-right:solid 1px black;
border-bottom:none;
border-left:solid 1px black;
background-color:white;
border-radius:10px 10px 0 0;}
.ボックス_1{grid-area:ボックス_1;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_2{grid-area:ボックス_2;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_3{grid-area:ボックス_3;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_4{grid-area:ボックス_4;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_5{grid-area:ボックス_5;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_6{grid-area:ボックス_6;
border-top:solid 1px black;
border-right:solid 1px black;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_7{grid-area:ボックス_7;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_8{grid-area:ボックス_8;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_9{grid-area:ボックス_9;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_10{grid-area:ボックス_10;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_11{grid-area:ボックス_11;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_12{grid-area:ボックス_12;
border-top:solid 1px black;
border-right:solid 1px black;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_13{grid-area:ボックス_13;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_14{grid-area:ボックス_14;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_15{grid-area:ボックス_15;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_16{grid-area:ボックス_16;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_17{grid-area:ボックス_17;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_18{grid-area:ボックス_18;
border-top:solid 1px black;
border-right:solid 1px black;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_19{grid-area:ボックス_19;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_20{grid-area:ボックス_20;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_21{grid-area:ボックス_21;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_22{grid-area:ボックス_22;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_23{grid-area:ボックス_23;
border-top:solid 1px black;
border-right:none;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_24{grid-area:ボックス_24;
border-top:solid 1px black;
border-right:solid 1px black;
border-bottom:none;
border-left:solid 1px black;
background-color:white;}
.ボックス_ボトム{grid-area:B_1;
text-align:center;
font-family:"Arial Black";
font-size:14px;
font-weight:bold;
padding-top:12px;
border-top:solid 1px black;
border-right:solid 1px black;
border-bottom:solid 1px black;
border-left:solid 1px black;
background-color:white;
border-radius:0 0 10px 10px;}
</style>

<div class="コンテナ_1">
<div class="ボックス_トップ">部品 : Volume / Effect</div>
<div class="ボックス_1"></div>
<div class="ボックス_2"></div>
<div class="ボックス_3"></div>
<div class="ボックス_4"></div>
<div class="ボックス_5"></div>
<div class="ボックス_6"></div>
<div class="ボックス_7"></div>
<div class="ボックス_8"></div>
<div class="ボックス_9"></div>
<div class="ボックス_10"></div>
<div class="ボックス_11"></div>
<div class="ボックス_12"></div>
<div class="ボックス_13"></div>
<div class="ボックス_14"></div>
<div class="ボックス_15"></div>
<div class="ボックス_16"></div>
<div class="ボックス_17"></div>
<div class="ボックス_18"></div>
<div class="ボックス_19"></div>
<div class="ボックス_20"></div>
<div class="ボックス_21"></div>
<div class="ボックス_22"></div>
<div class="ボックス_23"></div>
<div class="ボックス_24"></div>
<div class="ボックス_ボトム">SC-8.8</div>
</div>

</html>