CSS HTML Javascript

モーダルウィンドウを作ってみよう

完成版を確認したあとで、必要なファイルを作っていきます。

  • 完成版の確認
  • index.htmlの作成

完成版の確認

・今回からWEB制作で使うJavaScriptの活用方法について見ていきます。

・まずはモーダルウィンドウというUIを作っていく方法について学んでいきましょう。

・モーダルウィンドウとはクリックするとページはそのままで背景が暗くなりメッセージが上からヒョコッと現れて閉じるボタンもしくは暗くなった背景をクリックするともとに戻るUlです。

・メリットとしては必ずそのメッセージを見てくれるので目に止まりやすくなるのとクリックしなければ出てこないのでWEBページを見やすくすることができます。

index.htmlの作成

・では早速モーダルウィンドウを作るためにHTMLから書いていきましょう。

・この時ブラウザーはChrome, エディターはVSCodeを使っていきます。

・HTMLの詳しい書き方は過去の記事を見ていただきたいのですが簡単に書くとまずVSCodeでHTMLファイルを作成してその中にコードを書いていきます。

・<!DOCTYPE html>で文書宣言をして<html lang="ja">で日本語使うよーと言って、head,body要素を作って行きます。

・headの中には文字化けしないようにメタタグで<meta charset="utf-8">と文書の種類を書いてタイトルを書いて行きます。

・そしたら準備ができたのでbodyの中にWEBページの内容を書いていきましょう。

-CSS, HTML, Javascript