HTMLとCSSのみで作成。JavaScriptは未使用。
スライドアウトを表示<link rel="stylesheet" href="cssui/cssui.css"> <link rel="stylesheet" href="cssui/slideout/slideout.css"> <style> [data-slideout-panel] { --slideout-animation: left .5s ease-in-out; } @media only screen and (max-width: 767px) { [data-slideout-panel] { --slideout-size: 66vw; } } </style> <a href="#slideout" data-slideout-toggle>スライドアウトを表示</a> <div id="slideout" data-slideout-panel> <div data-slideout-header> <h3>スライドアウト</h3> <a href="#" data-slideout-close> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </a> </div> <p>画面外の左から右に表示されるのがスライドアウト。</p> </div>