body{background-color: #bfb;} h1{ background: #b0dcfa; /*背景色*/ padding: 0.5em;/*文字周りの余白*/ color: white;/*文字を白に*/ border-radius: 0.5em;/*角の丸み*/ text-align: center; } .mainbox { display: table; width: 70%; margin: 0 auto;table-layout: fixed;} .box { display: table-cell;vertical-align: middle; text-align: center; border:5px solid black; padding:10px;width:12em;} .box:nth-child(1):hover {background: #99CCFF;transition: background 1s;transition-delay:0.2s;} .box:nth-child(2):hover {background: #99CCFF;transition: background 1s;transition-delay:0.2s;} .box:nth-child(3):hover {background: #99CCFF;transition: background 1s;transition-delay:0.2s;} .accordion_box { width: 300px; } .accordion_box label { border-bottom: solid 1px white; background-color: #ccc; cursor: pointer; padding: 10px; font-weight: bold; display: block; } .accordion_box input { display: none; } .accordion_box .accordion_contents { display: none; } .accordion:checked + .accordion_contents { display:block; border: solid 1px #ccc; margin: 0px; padding: 10px; }