モーダルウィンドウの仕組み
制作ページURL
制作期間
4日間
制作範囲
デザイン / コーディング / 機能実装
使用ツール
HTML / CSS / JavaScript (jQuery使用)
目的
スクールの朝礼課題で、基本的なコーディングの練習としてシングルページサイトを制作しました。約10分ほどの発表資料として使用。
概要
JavaScriptによる動的な機能実装の練習として制作した課題です。
まず、ハンバーガーメニューと仕組みが類似しているモーダルウィンドウを実現しました。そして、ポートフォリオへの応用を想定した複数コンテンツ連動型の実装へ発展させています。特に、データ属性を用いた複数ボタンと複数モーダルの連携に挑戦しました。
情報設計
授業で習ったハンバーガーメニューの知識をモーダルウィンドウに応用し練習から実践へ段階的に構成しました。特に、クラスメイトにも伝わりやすいよう、データ属性などの必須技術やプログラムの流れをまとめています。CodePenを使用し、視覚的・実用的な資料としての機能を持たせています。
課題
学んだ知識を実践までセットで取り組み、スキルを定着させることです。