* { margin:0; padding:0; word-spacing:-2px; } .headerMessage { background:#DCEDC8; color:#212121; position: absolute; top: -250px; left: 0; width: 100%; height: 250px; padding: 50px; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); overflow: hidden; box-sizing: border-box; line-height:1.5em; font-size:0.9em; } #toggle { position:absolute; appearance:none; cursor:pointer; left:-100%; top:-100%; } #toggle + label { position:absolute; cursor:pointer; padding:10px; background: #689F38; width: 100px; border-radius: 3px; padding: 8px 10px; color: #FFF; line-height:20px; font-size:12px; text-align:center; -webkit-font-smoothing: antialiased; cursor: pointer; margin:20px 50px; transition:all 500ms ease; } #toggle + label:after { content:"開く" } .container { transition: margin 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94); padding:5em 3em; line-height:1.5em; font-size:0.9em; } #toggle:checked ~ .headerMessage { top: 0; } #toggle:checked ~ .container { margin-top: 250px; } #toggle:checked + label { background:#FF5722; } #toggle:checked + label:after { content:"閉じる" }
<input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"></label> <div class="container"> <p>東京市は、(1923年(大正12年)の関東大震災によって人口が増加した)周辺の町村を1932年(昭和7年)に合併し、35区になった[2]。市域は最終的には現在の東京都区部とほぼ同地域となった。</p> </div> <div class="headerMessage"> <p>1938年(昭和13年)6月に内務省が「東京都制案要綱」発表し、1943年(昭和18年)1月に政府が「東京都制案」を帝国議会に提出し可決されたことを受け、同年7月1日に東京都制が施行され、東京府と東京市を廃止する形で東京都に統合された[2]。35区は1947年(昭和22年)3月15日に東京22区に再編され、同年5月3日の地方自治法施行により同法の定める特別区となった。</p> </div>