結果を表示する
元にもどす
<html> <meta charset="utf-8"> <style> body{background-color:white;} .ボックス{height:190px; width:628px; border:2px solid black; padding:4px; background-color:silver; border-radius:4px;} .パネル{display:grid; gap:4px; grid-template-rows:124px 62px; grid-template-columns:388px 56px 176px;} .ウインドウ_A{grid-row:1; grid-column:1/2; font-size:24px; color:#ffffff; background-color:#f0dbff; padding:10px;} .ウインドウ_B{grid-row:1; grid-column:2/3; font-size:24px; color:#ffffff; background-color:#db86ff; padding:10px;} .ウインドウ_C{grid-row:1; grid-column:3/4; font-size:24px; color:#ffffff; background-color:#a2b0ff; padding:10px;} .ウインドウ_D{grid-row:2; grid-column:1/4; font-size:24px; color:#ffffff; background-color:#e2e7ff; padding:10px;} </style> <div class="ボックス"> <div class="パネル"> <div class="ウインドウ_A">A</div> <div class="ウインドウ_B">B</div> <div class="ウインドウ_C">C</div> <div class="ウインドウ_D">D</div> </div> </div> </html>