モーダルウィンドウの仕組み
制作ページURL
制作期間
4日間
制作範囲
デザイン / コーティング
使用ツール
HTML / CSS / JavaScript(AI使用) / Photoshop
目的
クラスの方に自分が身につけたWEBサイト技術をシェアするため
概要
概要学校で『HTML・CSSを使ってWEBサイトの1ページを作成して発表』という課題があり制作しました。プレゼンテーションで使用するため、画像やコードの内容が直接確認できるCodePenを埋め込むことで口頭では伝えにくいところを閲覧してもらうだけで伝わるようにしました。また、情報過多にならないように最低限の情報とシンプルなデザインで作りました。
情報設計
朝礼は10分程度と短いため、サイトの内容が即座に把握できるよう、ナビゲーションと目次欄を設置しました。これらをクリックすると、目的の箇所へ自動でスクロールするように設定しています。プレゼンテーションで使用するWebページとして、サイト内の説明文は簡潔に抑え、口頭での補足を前提に、写真やCodePen（コードペン）配置し、視覚的に理解しやすい構成を心がけました。
課題
HTML、CSS(JavaScript)を使ってWEBサイトの1ページを作成してクラスの方に発表。WEBサイトのテーマは『WEBサイト制作の技術シェア』