E_Mattsan https://blog.hatena.ne.jp/E_Mattsan/ エンジニアのソフトウェア的愛情 https://blog.emattsan.org/ CSS CSS の :chekced 擬似クラスを利用して表示を制御する方法です。 :checked - CSS: カスケーディングスタイルシート | MDN 参考にさせていただいたサイトです。 ドロワーやモーダルをCSSだけで実現する方法 | HPcode 上記のサイトでは要素を id で指定していますが、class で指定するように変更することで複数のモーダルの表示ができるようになります。 以下の例では同じページで二つのモーダルを表示させています。 コード HTML <label for="first-modal"><span>最初のモーダルを表示</span></label> <label fo… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.emattsan.org%2Fentry%2F2019%2F04%2F20%2F133849" title="CSSでモーダルを表示する覚え書き - エンジニアのソフトウェア的愛情" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/E/E_Mattsan/20190420/20190420132006.png Hatena Blog https://hatena.blog 2019-04-20 13:38:49 rich https://blog.emattsan.org/entry/2019/04/20/133849 1.0 100%