こんにちは、「なゆた」です！
皆さんってサイトを見るとき、
ボタンを押したらページを変えなくても詳細情報が出てくることってありますよね？
これは、「モーダルウィンドウ」と呼ぶんです。
そんな「モーダルウィンドウ」が、HTMLとCSSだけで簡単に作れちゃうんです！
今回は、CSSで「モーダルウィンドウ」を作る方法をお教えします。
こんな人に読んで欲しい！
モーダルウィンドウの作り方を知りたい人
作り方
まずは、HTML上での作業です。
最初に「button」タグを作ります。
次に「div」タグを作ってidとclass属性を付けます。
これは、CSSでの作業をしやすくするためです。
さらに、その中に「div」タグを再び作って、何かしらの文字と「閉じるボタン」を入力します。
そして、先ほどのbuttonタグに「a」タグでid付きdivタグへのリンクを付けます。
id属性は「#」で入力します。
次は、CSS上での作業です。
まず、「modal」クラスに手を加えます。
positionは固定にして、top、right、bottom、leftは必ず0で入力しましょう。
表示される際に周りの画面が暗くなるように、背景色を設定しましょう。
opacity（不透明度）は0にしましょう。
次に「:target」で表示された際の条件を入力して、
modalクラス内のdivタグのCSSで、モーダルウィンドウの見た目を決めましょう。
そして「close」クラスのCSSで、ボタンの見た目を決めましょう。
すると、CSSだけであっという間にモーダルウィンドウが出来上がりました！
最後に
いかがでしたか？
皆さんもぜひ、HTMLとCSSだけで自分だけのモーダルウィンドウを作ってみてください！
以上です、ありがとうございました！
コメント