モダールウィンドウをHTMLとCSSとJavascriptで実装してみよう
HTML-код
- Опубликовано: 5 окт 2024
- #入門 #HTML #CSS #モーダル #Javascript #ポップアップウィンドウ
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
【この動画を視聴するメリット】
・HTML/CSS/JSを用いてモーダルウィンドウを自作できます
・CSSアニメーションが学べます
・ポップアップウィンドウが自作できます
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数：200以上
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★今回のソースコード★
github.com/Shi...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
![[Limbus Company - PV] Chapter.7 - Oblivion](http://i.ytimg.com/vi/VUpkXPkvoxU/mqdefault.jpg)
自信を持ってください
出来ますと言っちゃっていいです
ウルっと来ました🥺（涙）
BGMとしても心地よい声リズムが良いですよね！！！
モーダル理解出来ました。シンさんの動画見ると、情報に信頼があってこれでOK!と思えます！！頑張りますありがとうございます😊
嬉しいコメントありがとうございます！
励みになります。dokin-chanさんもお勉強がんばってくださいね
5:32 htmlの裏技だ
2:30 普通は、灰色のバックグラウンドとボーダーがあります。
作ってみる
いつも見ながらコーディングさせてもらってます！
聞きとりやすいし、めっちゃ勉強になります！
りらくぜえしよんさん、ご視聴ありがとうございます！ぜひ参考程度にご利用くださいね。
非常に分かりやすかったです！勉強になります。
個人情報
めっちゃわかりやすい！ ありがとうございました。
チャンネル登録させていただきました😀
ありがとうございます！
コメント欄にて失礼いたします。
いつも天的な説明で大変わかりやすくて勉強になります！
ありがとうございます！
お世話になります。
プロゲート後の学習として動画を拝見しています。
わかりやすい説明で勉強になります＾＾
今後もよろしくお願いいたします！
まだ1人で実装できない人向けの内容もあってうれしいです。とてもスマートでわかりやすい説明です。😊最後の部分はモーダルウィンドウの部分をクリックしても閉じないのに、buttonClose.addEventListener(“click”, () => { modal.style.display = “none”;});を
modal. addEventListener(“click”, () => { modal.style.display = “none”;});とするとどこをくりっくしても閉じるのが不思議です。modal のidの効いてる？効いてない？が。まだまだ初心者です。
返信失礼します。addEventListenerの意味を教えます！
addEventListenerは、イベントを追加すると言う意味です！これは、HTMLでもできます。ボタンを例に考えてみましょう。例:クリック
そう。onclickがありますよね？onclickは、クリック時の意味を指しています。
これの例えは、addEventListenerです！
例:variable.addEventListener("", ())
addEventListener("イベント名", ←カンマがありますよね。そう。これは、onclickと同じの関数を入れるところです。関数を呼び出す所なのです。()[カッコ]で、()[カッコ]の中に、文字を入れます。これは、パラメーターです。パラメーターで、コンソールを出したりなどをするパラメーターです。addEventListenerの事は、イベントを追加。つまり、イベント名を入れて追加って意味になるのです。イベントには、クリックや、closeなどがあります。一方、onイベント名の方はonloadなどがあります！意味が分かりましたか？長文失礼しました。
×ボタンは×だったのですね！目から鱗笑
最近HTMLとCSSだけでモーダル使えるらしいです！
そういうやり方もあるんだなと思いましたが、ちょっと惜しいですね。
モーダル画面が閉じられるまで親画面の処理を一時停止させる同期処理にするのか、それとも非同期で親画面の処理を続行させておくのかまで説明した方が良いと思います。今のままだと非同期ですよね。
ブラウザ標準のダイアログだとダイアログが閉じられるまで親画面は一時停止しますよね。
それに今ならタグとshowModalメソッドを使った方が今風な気がします。もちろん親画面と同期させる場合は処理を追加しなければなりませんが。
いつもお世話になってます！
ワードプレスについての動画は今後、出されることはありますか？
さくらさん、いつもご視聴ありがとうございます。
ワードプレスですね。以前アップロードしようと思いましたがやめた経験があります。
もしかしたらアップロードするかもしれません。ですが確実でないのでご了承くださいませ。
@@programming_tutorial_youtube ご返信ありがとうございます😭
承知致しました！これからもどんどん勉強させて頂きます🙇♂️