こうへい

概要の説明とHTMLファイルの作成をしていきます。 概要の説明 index.htmlの作成 viewportの設定 概要の説明 ・今回はハンバーガーメニューの作り方について勉強していきましょう。 ・い ...

要素をアニメーションさせる方法と要素の重なり順を指定する方法を見ていきます。 transitionプロパティ z-index transitionプロパティ ・最後の仕上げをしていきます。前回まででJ ...

「詳細を見る」ボタンにclickイベントを設定して、クリックしたらマスクとモーダルが現れるようにします。 clickイベントの設定 hiddenクラスの付け外し clickイベントの設定 ・ではJav ...

JavaScriptを読み込む設定と、要素の取得をしていきます。 main.jsの作成 要素の取得 main.jsの作成 ・では前回の続きをしていきます。 マスクとモーダルを非表示にする ・前回までで ...

hiddenクラスをつけることで、マスクとモーダルを表示しないようにします。 hiddenクラスの設定 隠し方 hiddenクラスの設定 ・では続きをしていきます。 マスクとモーダルのスタイルを整える ...

マスクとモーダルウィンドウのスタイルを調整していきます。 背景のスタイリング モーダルウィンドウのスタイリング 背景のスタイリング ・では前回の続きをしていきましょう。 スタイリングをしていこう CS ...

CSSで、画面全体と「詳細を見る」「閉じる」の各ボタンのスタイルを調整していきます。 スタイリング ボタン スタイリング ・では前回は内容を書いていったので今回スタイリングをしていきます。 画面を作っ ...

HTMLでマークアップをして、画面の大まかな見た目を作っていきます。 3つの画面 ボタン 背景 モーダルウィンドウ 3つの画面 ・それでは早速モーダルウィンドウを作って行きます。 JavaScript ...

完成版を確認したあとで、必要なファイルを作っていきます。 完成版の確認 index.htmlの作成 完成版の確認 ・今回からWEB制作で使うJavaScriptの活用方法について見ていきます。 ・まず ...

イベントの伝播についてとそのメリットについて確かめていきます。 イベント伝播 target currentTarget イベント伝播 ・今回はイベントの伝播について見ていきます。 ・例えばclick ...