厚木市プログラミングスクール上級編｜JavaScriptで「モーダル表示」を学ぶ
JavaScriptで学ぶ画像拡大・詳細表示
平素は格別のご高配を賜り、厚く御礼申し上げます。
晩秋の候、皆様におかれましては、ますますご清栄のこととお喜び申し上げます。
株式会社Voleurでは、神奈川県厚木市生涯学習課との共同事業として、年間を通じたプログラミングスクールを実施しております。
2026年11月11日（水）には、上級編第4回となる**「モーダル（画像拡大・詳細表示）」**をテーマにした授業を開催いたしました。上級編では、中級編で学んだHTML・CSSの知識を土台に、JavaScriptを活用した動きのあるWebサイト制作に取り組んでいます。
第1回の「クリックで表示」、第2回の「アコーディオン」、第3回の「タブ切り替え」に続き、今回はWebサイト上で画像や詳細情報を表示する「モーダル」の仕組みについて学びました。実際のWeb制作でも幅広く活用されている技術を通じて、プログラミングの仕組みと、利用者にとって使いやすいWebサイトの設計について理解を深める機会となりました。
JavaScriptで学ぶ「モーダル」とは？
モーダルとは、Webサイト上でボタンや画像をクリックした際に、現在表示しているページの上に別の画面を重ねて表示する仕組みです。
例えば、商品画像をクリックすると拡大画像が表示されたり、サービスの詳細情報が画面中央に表示されたりする機能が挙げられます。企業のホームページやECサイト、予約サイトなど、さまざまなWebサービスで活用されている機能の一つです。モーダルを活用することで、利用者は別のページへ移動することなく、必要な情報を確認できます。
HTML・CSS・JavaScriptを組み合わせたWeb制作
モーダル機能を制作する際には、主に3つの技術を組み合わせます。
HTML： 拡大画像や詳細情報など、表示するコンテンツの構造を作成する
CSS： モーダルの配置や背景、デザイン、表示状態を調整する
JavaScript： クリック操作に応じてモーダルを開閉する仕組みを実装する
これまで学習してきたHTML・CSSにJavaScriptを組み合わせることで、Webサイトにさまざまな機能を追加できるようになります。今回のテーマであるモーダル表示も、実際のWeb制作現場で使用されている技術です。
株式会社Voleurでは、単にプログラムを完成させることだけではなく、**「なぜその機能が必要なのか」「どのようにすれば利用者にとって使いやすくなるのか」**を考えることも大切にしています。
上級編も第4回へ｜より実践的なWebサイト制作に挑戦
2026年度のプログラミングスクール上級編も、今回で全6回のうち4回目を迎えました。
上級編では、JavaScriptを活用することで、これまで制作してきたWebサイトに動きや機能を追加する方法を段階的に学習しています。
クリックによる表示の切り替えから始まり、アコーディオン、タブ切り替え、そして今回のモーダル表示へと、学習内容もより実践的になっています。これらの機能は、企業のコーポレートサイトやサービスサイトなどでも使用されているものです。
Webサイトを利用する側から、実際に制作する側へ。
普段何気なく使っているWebサイトの仕組みを理解することで、プログラミングやWeb制作をより身近に感じていただきたいと考えています。
限られた6時間だからこそ、学びの質と楽しさを大切に
本プログラミングスクールの上級編は、1回60分、全6回のカリキュラムで構成されています。合計6時間という限られた授業時間の中で、受講者の皆様にできる限り深く学び、何よりプログラミングを楽しんでいただけるよう、授業内容や教材の構成を工夫しています。
特に力を入れているのが、授業後にも見返して復習できるオリジナル教材の制作です。授業では重要なポイントを絞って分かりやすくお伝えしながら、教材には学習内容を振り返るための情報を整理しています。
限られた時間内ですべてを覚えることだけを目的とするのではなく、授業後に自分自身で調べ、試行錯誤しながら学びを深められる環境づくりを大切にしています。初級編・中級編から継続して参加されている方はもちろん、上級編から新たに参加された皆様にも、生涯にわたって学び続けるきっかけを提供できるよう取り組んでまいります。
講師紹介｜Web事業部責任者 中村仁人（なかむら ひろと）
本プログラミングスクールの中級編・上級編では、**株式会社Voleur Web事業部責任者の中村仁人（なかむら ひろと）**が講師を務めています。中村は、株式会社VoleurのWeb事業「WASABI」において、Web制作・SEO対策・Webデザイン・プログラミングなど、各専門チームを統括しています。
Webサイトの企画・制作から検索エンジン対策、デザイン設計まで幅広い業務に携わり、近年では行政からの依頼や大手企業の制作案件、著名YouTuberの動画編集案件など、多岐にわたるプロジェクトを担当しています。
こうした実務経験を活かし、プログラミングスクールでは、コードの書き方だけではなく、実際のWeb制作現場で技術がどのように活用されているのかという視点を大切にしています。株式会社VoleurのWeb事業「WASABI」が掲げる理念は、**「ただのWeb制作ではなく、そのサイトに人が集まる理由を設計する」**ことです。
Webサイトを制作する際には、デザインや機能性だけではなく、利用者にとって分かりやすく、必要な情報が自然に伝わる設計が求められます。今回のモーダル表示も、こうしたWeb制作の考え方につながる技術の一つです。今後も実際の制作現場で培ってきた知識と経験を地域の皆様へ還元し、実践的なプログラミング教育を提供してまいります。
厚木市との連携によるICT・AI教育への取り組み
株式会社Voleurでは、厚木市生涯学習課との共同事業によるプログラミングスクールに加え、行政や教育委員会と連携したICT・AI教育にも継続して取り組んでいます。
代表取締役の**福住 隆哉（旧氏名：中村 隆哉）**は、約3年前から行政・教育委員会のご依頼のもと、厚木市内の小学校において全校児童を対象としたプログラミング授業を担当しています。
また、学校の長期休業期間には、教職員を対象としたCanvaや動画編集などのICT研修も実施しており、児童だけではなく、教育現場を支える先生方への技術支援にも取り組んでいます。
こうした教育活動に対し、厚木市内の小学校より感謝状をいただき、その取り組みについて地域情報紙「タウンニュース」でも紹介されました。
※令和8年6月10日付で姓を変更いたしました。
▼タウンニュース掲載記事
株式会社Voleurでは、教育事業「SWITCH」を通じて、プログラミングスクールやWeb制作、ゲーム制作、生成AIの活用をはじめとしたICT・AI教育、オリジナル教材の開発、教職員向け研修などを実施しています。
初級編を代表取締役の福住隆哉、中級編・上級編をWeb事業部責任者の中村仁人が担当し、それぞれの専門性を活かしたプログラミング教育を提供しています。
上級編はいよいよ終盤へ｜次回は「スクロール連動」
上級編では、JavaScriptを活用したさまざまな機能の制作を通じて、より実践的なWebサイト制作に取り組んでいます。
次回は、ページのスクロール操作に合わせて表示や動きが変化する「スクロール連動」をテーマに学習する予定です。
【上級編 今後のカリキュラム】
開催日 | テーマ |
11月25日（水） | 第5回：スクロール連動 |
12月9日（水） | 第6回：統合・最終仕上げ |
上級編は、中学生・高校生・大学生を対象に、18時30分から19時30分までの60分間で実施しています。最終回では、これまで学んだ内容を組み合わせながら、Webサイト制作に必要な知識や技術を振り返ります。
SDGs目標4「質の高い教育をみんなに」の実現に向けて
株式会社Voleurでは、人材紹介・採用支援事業を通じて一人ひとりのキャリア形成を支援するとともに、教育事業「SWITCH」を通じて、子どもたちや教職員の皆様に向けたICT・AI教育を提供しています。
私たちが大切にしているのは、年齢や経験にかかわらず、誰もが新しいことに挑戦できる機会をつくることです。AIやデジタル技術が急速に発展する現代において、プログラミングを学ぶことは、単にコードを書く技術を身につけるだけではありません。
自ら考え、試行錯誤しながら課題を解決する経験は、さまざまな分野で活かせる力につながると考えています。教育事業「SWITCH」では、**「できない」を「できる」に。**という理念のもと、子どもたちの好奇心を学びのきっかけへとつなげることを大切にしています。
「AIが答えを出す時代に、私たちは子どもたちの『問いを生み出す力』を育む。」
今後も厚木市生涯学習課をはじめ、行政・教育委員会・学校法人との連携を大切にしながら、SDGs目標4「質の高い教育をみんなに」の実現に向け、地域社会に根差した教育活動を継続してまいります。
株式会社Voleurは、これからも人材紹介・採用支援・Web制作・ICT・AI教育を通じて、一人ひとりの可能性を広げ、社会に新たな価値を届けてまいります。
