1/28開催：HTMLとCSSで作るモーダルとループ

HTMLとCSSだけで作るモーダルとループ──今回のセミナーが目指す学習のポイント

クリーク・アンド・リバー社（C&R社）が2026年1月28日（水）に開催する無料オンラインセミナー「デモンストレーションを見ながら学ぶサイト制作の基礎（3）〜モーダルウィンドウとループを使用してコンテンツを表現してみる〜」は、これまでjQueryなどのスクリプトで実装してきた表現を純粋なHTMLとCSSのみで再現する手法の理解を目的としています。本セミナーは、Webサイトのstructure（構造）とpresentation（見せ方）を分けて理解することを重視し、実際のデモンストレーションを通じて具体的な実装イメージを掴める構成になっています。

セミナーは全4回のシリーズの第3回にあたり、シリーズを通して1つのWebサイトをheaderから順に作成していく流れの中で、今回の回ではモーダルウィンドウとループ（同様のコンテンツを繰り返し表現する手法）に焦点を当てます。参加者は、HTML/CSSの基礎知識を前提に、より実践的なレイアウトや表現の作り方を学ぶことができます。

学習の重点項目

本セミナーで解説される主要項目は以下の通りです。実装の仕組みだけでなく、構造設計やアクセシビリティの観点も含めた解説が行われます。

• モーダルウィンドウの基本構造と仕組み：HTMLの要素配置とCSSの疑似クラス、フォーカス管理を含めた説明。
• ループ表現の設計：同一構造の繰り返しをCSSで制御する手法、マークアップの最適化。
• HTMLとCSSのみでの実装手法：JavaScriptに依存しない表現のメリットと制約。

制作サンプルのイメージとして、C&R社は参考となる動画リンク（https://www.youtube.com/watch?v=PXCMrJu9CJg）を提示しています。実務やポートフォリオ制作で応用できる知見を得たい方にとって有益な内容です。

開催概要と参加方法：日時・定員・申し込み手順を確認する

セミナーの実施日時は2026年1月28日（水）19:00〜20:00で、開催形式はオンラインです。参加費は無料で、定員は60名に設定されています。申込締切は当日である2026年1月28日（水）20:00までですが、定員になり次第受付が終了する可能性があります。

申し込みや詳細ページはC&R社が運営するCREATIVE VILLAGEのイベントページにて案内されています。参加希望者は次のURLから詳細を確認し、申込み手続きを行ってください：
https://www.creativevillage.ne.jp/category/crv_event/170550/

参加対象と推奨スキル

本セミナーは主に以下の方を対象としています。事前にHTML/CSSの基礎的な理解があることが参加条件の一つです。

対象

Webデザイナー、コーダー、専門学校やスクールでWeb制作を学んでいる方

前提スキル

基本的なHTMLとCSSの理解

また、セミナー内容はポートフォリオ制作や就職活動に向けたスキル強化、デザインとコーディングの相互関係を深く理解したい方にも適しています。学習効果を高めるため、実際に手を動かしながら視聴することが推奨されます。

登壇者プロフィールとセミナーの構成詳細

当日の登壇者は塚田大祐（つかだ・だいすけ）氏です。塚田氏は「祐（たすく）」代表取締役としてWeb・OfficeインストラクターやWebディレクターの業務を行っており、実務・教育の両面で豊富な経験を持っています。

経歴としては東放学園 放送広告科卒業後、海外向け広告代理店でDTPによる印刷物制作に携わり、専門学校での教員経験を経て独立。雑誌レイアウト、チラシ、カタログ、Webサイト制作に加え、大学・専門学校での非常勤講師や企業のデザイン研修、Office研修を主に行っています。ほかにも就職活動支援の講座運営スタッフや、大学院設立の運営スタッフとしてのサイト作成支援、Mac検定委員会の検定準備委員会役員などの実績があります。著作に『マックでマンガ』（共著）があります。

当日の進行イメージと解説の深さ

セミナーはデモンストレーション中心の構成で、モーダルウィンドウとループ表現を実際のマークアップとスタイルで順を追って解説します。解説は実務者向けに具体的なコード例と設計上の考え方を含めた内容です。

以下はセミナーで取り扱う具体的な項目です。参加者はデモに合わせて構造の理解と実装手順を追うことができます。

1. モーダルウィンドウのHTML構造の設計と要素の配置
2. CSSだけで制御する表示・非表示の手法（疑似クラスやチェックボックスハック等）
3. ループ表現のマークアップ最適化とCSSによる繰り返し表現
4. アクセシビリティやフォーカス管理の実践的注意点

クリーク・アンド・リバー社の教育・研修サービスと関連情報

C&R社は1990年創業のクリエイター支援を目的としたエージェンシーで、今回のセミナーを運営する教育部門はPEC（Professional Education Center）と呼ばれます。PECはこれまでに多数のウェビナーを実施しており、今回案内している「デモンストレーションを見ながら学ぶサイト制作の基礎」シリーズもその一環です。

また、企業向けにウェビナーのアーカイブコンテンツをパッケージ化したオンライン研修サービス「PECスタ」も開始されています。IT・デジタル・クリエイティブ分野に強みを持つコンテンツが揃っており、法人のリスキリングや研修に利用可能です。サービス詳細は以下のURLで案内されています：
https://www.cri.co.jp/news/005792.html

関連セミナーと情報配信

C&R社はCREATIVE VILLAGEを通じて各種デザイン・クリエイティブ関連セミナーを案内しています。たとえば「卓越したUIを作る　ゲーム、アプリ、Webサイト（eラーニング）」や「Figma入門講座（eラーニング／全21回）」などのプログラムが用意されています。関連情報は以下のリンクから確認できます。

• CREATIVE VILLAGE イベント一覧: https://www.creativevillage.ne.jp/category/crv_event_category/crv_event_creative-design/
• C&R社のニュースページ（関連リンク）: https://www.cri.co.jp/news/006075.html?prt

さらに、イベント情報はCREATIVE VILLAGEのサイトで公開されるほか、メールマガジンでも配信されています。C&R社の各種公式アカウントやアプリも案内されており、詳細は以下の通りです。

公式Webサイト

https://www.cri.co.jp/

X（Twitter）

https://twitter.com/creekcrv

Facebook

https://www.facebook.com/creekandriver

note

https://note.com/creek

LinkedIn

https://www.linkedin.com/company/cr.creekandriver

YouTube

https://www.youtube.com/channel/UCS9MHzddqWKsOAgmUnTgxIg

CREATIVE VILLAGEアプリ（iOS）

https://apple.co/3qLDNbT

CREATIVE VILLAGEアプリ（Android）

https://bit.ly/3dkO2AS

また、C&R社はドローン撮影による会社紹介映像やブランドサイト『Go Beyond the Limit』など、多面的な情報発信を行っています。ドローン映像のURLは https://youtu.be/2YRqMPcsv3o です。

要点の整理（日時・申込・連絡先を含む情報の一覧）

以下の表は、本記事で紹介したセミナーの主要情報を整理したものです。参加を検討する際の確認用として活用してください。記事本文ですでに述べた詳細も合わせて参照することで、申込や視聴準備がスムーズになります。

以上が今回のセミナーに関する要点の整理です。具体的な申込み方法や当日の視聴環境、資料の配布有無などは申込ページおよび主催者の案内を必ずご確認ください。