画面を作っていく

HTMLでマークアップをして、画面の大まかな見た目を作っていきます。

・それでは早速モーダルウィンドウを作って行きます。

・モーダルウィンドウは大きく分けて3つの部品でできています。モーダルを開くためのボタンと開いたあとのグレーの背景、その上にモーダルウィンドウがあります。

・これらをHTMLでマークアップしていくところから始めていきます。

・それぞれJavaScriptで扱っていくのでid属性を付けて行きます。

・今回は初心者向けということで基本divタグを使って作っていきます。スタイルがしやすいというメリットがあります。

・まずはモーダルウィンドウを開くためのボタンを作っていきます。

・divタグにid属性を付けて行きます。idは開くためのボタンなのでopenとしておきます。そしてテキストは詳細を見るとしてあげればいいでしょう。

・次にモーダルウィンドウを開いたあとのグレーの背景を作っていきます。

・これは単純にdivタグのid名を決めるだけでいいので今回はmaskとしておきます。中身のテキストはいらないです。

・最後にモーダルウィンドウです。これはセクションタグで作っていきます。idをつけていきましょう。今回はmodalとしていけばいいでしょう。

・中身は説明文と閉じるためのボタンが必要なので文章はpタグ、閉じるボタンはdivタグで作っていきます。

・文章の中身は注意喚起や説明などを入れるとモーダルウィンドウになります。今回はダミーテキストとして適当な文章を入れておきます。

・閉じるボタンはdivタグで作っていきそこにもidをつけておきます。closeとしておきます。

・テキストは閉じるでいいでしょう。