シラバス詳細

区分

環境情報科目

ディプロマ・ポリシーとの関係

カリキュラム・ポリシーとの関係

カリキュラム全体の中でのこの科目の位置づけ

科目の目的

本科目は、現代の情報発信において不可欠なWebサイト制作の基盤技術であるHTMLとCSSを体系的に習得し、自らの手でWebサイトを企画・構築・公開できる実践的な能力を養うことを目的とします。単にツールの使い方やコードの記述方法を覚えるだけでなく、インターネットの仕組みやユーザビリティを考慮したWebデザインの基本原則といった理論的背景を理解した上で、適切な文書構造の定義と効果的な視覚表現の手法を学びます。最終的には、多様なデバイス環境に対応したレスポンシブなWebサイトを、設計段階から実装、そして公開準備まで一貫して行える総合的なスキル基盤を確立することを目指します。

到達目標

本科目を履修することで、受講者は以下の能力を習得することを目標とします。

1. Webの基本的な仕組みとデザインの原則を理解し、サイトの目的達成に向けた構成案（サイトマップ）やページの設計図（ワイヤーフレーム）を作成できるようになります。
2. HTMLの役割を理解し、文書構造を意味的に正しく定義するセマンティックなマークアップを行うスキルを習得します。
3. CSSの基本概念であるボックスモデルを深く理解し、プロパティを適切に使用して文字装飾や色彩設計を行い、意図したデザインをブラウザー上で再現できるようになります。
4. FlexboxやCSS Gridを用いた現代的で効率的なレイアウト手法と、メディアクエリによるレスポンシブWebデザインの技術を習得し、スマートフォンとPCの両方に最適化されたWebサイトを構築できるようになります。
5. シングルカラム、2カラム、タイル型など異なるレイアウトを持つ複数のWebサイト制作プロジェクトを実践し、外部サービスの連携や公開に必要な設定、基本的なトラブルシューティングを行う応用能力を身につけます。

科目の概要

本科目では、全30回の授業を通じてWebサイト制作に必要な知識と技術を基礎から段階的に学習します。授業の序盤では、Webデザインとインターネットの基礎知識、制作環境の準備、そして制作フローと設計図の作成方法について学びます。続いて、Webページの骨格となるHTMLによる文書構造化と、装飾やレイアウトを担うCSSの基礎を集中的に習得します。ここでは、ボックスモデルの概念、FlexboxやCSS Gridといった主要なレイアウト技術、そしてマルチデバイス対応のためのレスポンシブWebデザインの考え方と実装方法に重点を置きます。中盤以降は、これらの知識を統合し、カフェサイト（シングルカラム）やニュースサイト（2カラム）など、具体的なテーマに基づいたWebサイト構築プロジェクト演習を行います。終盤では、SNS連動や地図埋め込みなどの機能拡張、Webサーバーへの公開準備、制作過程で直面する問題への対処法を学び、実践的なWebサイト制作の全プロセスを体験します。最後に総復習を行い、知識の定着を図ります。

科目のキーワード

HTML、CSS、Webデザイン原則、レスポンシブWebデザイン、ボックスモデル、Flexbox、CSS Grid、セマンティックマークアップ、ワイヤーフレーム、ユーザビリティ、デバッグ、Webサイト公開

授業の展開方法

授業は、各回のテーマに関する理論的な解説と、それに基づいたPCを用いた実習（ハンズオン）を組み合わせて進行します。前半の基礎学習フェーズでは、教科書の内容に沿ってHTMLタグやCSSプロパティの役割と使い方を確実に理解しながら、小さな演習課題を積み重ねていきます。後半のプロジェクトフェーズでは、学んだ知識を複合的に活用して一つのWebサイトを完成させるプロセスを追体験し、設計からコーディング、表示確認、修正までの実務的な流れを学習します。学習者の理解度を深めるため、適宜、習得内容を確認するための小課題や振り返りの時間を設け、自律的に問題を解決できる能力の向上も図ります。

担当教員は、Webアプリケーション開発・ディレクションに30年以上従事してきた実務経験を有しており、その経験を本科目の各回に以下のように活用する。第1回～第4回の制作フローおよび設計図の解説においては、実際の受託開発における企画・要件定義・設計工程の事例を提示する。第5回～第15回のHTML/CSSの基礎学習においては、保守性・アクセシビリティ・SEOの観点を取り入れた実務的なマークアップおよびCSS設計の考え方を、現場での具体的な事例とともに解説する。第16回～第25回のWebサイト制作プロジェクトにおいては、現場のコーディング規約やコードレビューの観点を導入し、学生の成果物に対して実務に準じたフィードバックを行う。第26回～第27回の機能拡張および公開準備においては、外部サービス連携やOGP設定をめぐる運用上のトラブル事例と対処方法を実務経験に基づき紹介する。第28回～第30回の総括においては、Web技術の変遷と最新の動向を担当教員自身の業務経験と重ねて解説し、学生に今後の学習の方向性を示す。

オフィス・アワー

神馬一博：【前期】
Web環境システム概論木曜5限
【後期】
Web環境システム開発Ⅰ（Webアプリケーションの実装）水4限・5限
Web環境システム開発Ⅱ（クライアント再度・プログラミング）木5限
渡辺謙：【前期】
環境データベース概論
環境データベースⅡ
環境プログラミングⅣ（永続化技法）
全科目：木曜5限
【後期】
環境データベースⅠ
環境データベースⅢ
コンピュータ・アーキテクチャ論
全科目：木曜5限

科目コード

UC3050

学年・期

2年・前期

科目名

Web環境システム概論

単位数

授業形態

演習

必修・選択

必修

学習時間

前提とする科目

展開科目

関連資格

担当教員名

神馬一博・渡辺謙

回	主題	コマシラバス項目	内容
1	Webデザインとインターネットの基礎	科目の中での位置付け	本Webサイト制作演習科目の初回となる本講義では、具体的な制作技術の学習に入る前の導入として、Webデザインが果たすべき本質的な役割と、Webサイトが動作する基盤となるインターネットの仕組みについて基礎知識を習得する。これは、今後学んでいくHTMLやCSSといった技術が、どのような目的のために用いられ、どのような環境下で機能するのかを理解するための重要な土台となる。
		コマ主題細目	① よいWebデザインの条件と目的 ② Webサイトの種類と役割 ③ インターネットとWebの仕組み
		細目レベル	① 授業の冒頭において、まず「デザイン」という言葉が一般的に持つ多様な意味合いについて触れつつ、Webにおけるデザインの本質的な目的を学術的な視点から定義する。Webデザインとは、単に表層的な視覚的装飾を施すこと（「かっこいい」「かわいい」）だけではなく、情報がユーザーに正しく伝わり、ユーザーがサイトを訪れた目的をスムーズに達成できるようにするための設計行為であることを、教科書の記述に基づき論理的に解説する。具体的には、デザインの主たる目的は相手に情報を「伝える」ための手段であるという点を強調する。その上で、ユーザーにとっての「使いやすさ」を指す「ユーザビリティ（Usability）」という極めて重要な概念を導入する。ユーザビリティが低いサイト、例えば目的の情報が見つけにくい、文字と背景のコントラストが低く読みにくい、ナビゲーションが分かりづらいといったサイトでは、ユーザーがストレスを感じて離脱してしまうリスクがあることを説明し、学生自身のWeb利用経験と結びつけながら理解を促す。具体的な構成要素として、背景色と文字色の明度差による視認性の確保、目立たせたい重要な要素（ボタンなど）の明確化、サイト全体でのレイアウトの統一性、結論を先に書くといった読みやすい文章構造、そしてクリック後の挙動が予想できる操作性などが、よいWebデザインを構成する条件であることを体系的に講義する。また、デザインは「問題解決の手段」でもあり、ユーザーによりよい体験や生活を提供するためのものであるという視点も提示する。授業進行においては、視認性の悪い配色例と改善例を比較したスライドを提示し、なぜ見づらいのか、どう改善すべきかを学生に問いかける小演習を挟むことで、主観ではなく客観的な視点でデザインを評価する能力の基礎を涵養する。この細目では、Webデザインが見た目の美しさだけでなく、情報伝達と機能性を兼ね備えた論理的な設計行為であることを深く理解させることが目標である。この細目で理解すべき範囲は、Webデザインにおける「伝える」という目的の重要性、ユーザビリティの定義とその重要性、および視認性や操作性を高めるための具体的なデザインの条件まで。
			② Webサイトは、その構築目的によって多様な種類に分類されることを概観し、それぞれの特性と役割について体系的に解説する。Webサイト制作のプロセスにおいては、まず「何のために作るのか」という目的と、「誰に伝えたいのか」というターゲットユーザーを明確にすることが不可欠であり、それらの目的に応じて適切なサイトの種類や構成を選択する必要があることを前提知識として共有する。教科書で紹介されている主要な分類に基づき、それぞれの定義、主な目的、そしてターゲットとなるユーザー層の違いを詳説する。具体的には、企業の情報を掲載し信頼性向上や採用を目的とする「コーポレートサイト」、特定の商品やサービスの販売促進に特化した「プロモーションサイト」、自身の作品や制作実績を掲載してスキルをアピールする「ポートフォリオサイト」、商品をオンラインで販売するための「ショッピングサイト（ECサイト）」、ニュースや特定の分野の情報を提供する「メディアサイト」、そしてユーザー間のリアルタイムなコミュニケーションを主とする「SNS（ソーシャル・ネットワーキング・サービス）」について取り上げる。それぞれのサイトがどのような意図で設計され、どのような情報が優先的に配置されているかという構成の違いを強調する。授業では、これらの種類の異なる実際のWebサイトの事例をスクリーンショット等を用いて提示し、それぞれのサイトの目的とターゲットを推定させる比較分析を行う。これにより、学生はWebサイトを単なる情報の集合体としてではなく、特定の意図を持ったメディアとして捉える視点を養うことができる。また、一つのWebサイトが、例えばコーポレートサイトでありながらメディアサイトの要素も併せ持つなど、複数のタイプを組み合わせて構成される場合があることにも触れ、柔軟な視点を持つことの重要性も説く。この細目を通じて、今後学生自身がWebサイトを企画・制作する際に、目的に合致した適切なサイト構成を選択するための基礎的な判断能力を涵養する。この細目で理解すべき範囲は、主要なWebサイトの種類とその定義、それぞれの主な目的と役割の違いまで。
			③ 私たちが普段何気なく閲覧しているWebサイトが、その背後でどのような技術的仕組みによって表示されているのかを、情報科学的な基礎概念に基づいて解説する。まず、日常用語としては混同されがちな「インターネット」と「Web（World Wide Web）」の定義の違いを明確にする。インターネットは世界中のコンピューター同士を接続する巨大なネットワーク基盤そのものであり、Webはそのネットワークインフラを利用して、HTML文書や画像などの情報を共有・閲覧するためのシステムの一つであることを説明する。次に、Webページがブラウザーに表示されるまでの具体的な仕組みとして、「Webサーバー」と「Webクライアント」という二つの役割について詳説する。WebサーバーはWebサイトの情報（HTMLファイル、CSSファイル、画像データなど）を24時間保管し提供する側のコンピューターであり、Webクライアントは情報を要求し閲覧する側（私たちが利用するPCやスマートフォンのブラウザーなど）であることを定義する。そして、クライアントが目的のページのURLを指定してサーバーに対して情報の「要求（リクエスト）」を送り、サーバーが該当するデータを探し出して「応答（レスポンス）」として送り返すという、一連の通信プロセスを図解を用いて視覚的に説明し、学生の理解を深める。さらに、Web上の情報の「住所」にあたるURL（Uniform Resource Locator）の構造についても解説する。URLが、「http://」や「https://」といった通信の規約を示す「プロトコル」、情報のありかを示す「ドメイン名」、サーバー内のフォルダーを示す「ディレクトリ名」、そして具体的な「ファイル名」といった各パーツから構成されており、それぞれが重要な役割を持っていることを具体例を示しながら説明する。これらの基礎知識は、今後の授業で学ぶHTMLファイルの作成や、作成したファイルをサーバーへアップロードして公開するといった実践的な作業を行う上で不可欠な前提知識となる。この細目で理解すべき範囲は、インターネットとWebの違い、クライアントとサーバーによるリクエストとレスポンスの仕組み、およびURLの基本的な構造まで。
		キーワード	① ユーザビリティ ② コーポレートサイト ③ World Wide Web ④ Webサーバー ⑤ URL
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習授業で学んだ「よいWebデザインの条件」と「Webサイトの種類」の理解を深めるため、自身が普段よく利用するWebサイトを一つ選定し、分析を行ってください。そのサイトの種類（コーポレート、ショッピングなど）と主な目的を特定した上で、ユーザビリティの観点から「優れている点」と「改善の余地がある点」をそれぞれ具体的に挙げてください。例えば、配色のコントラスト、メニューの分かりやすさ、情報の探しやすさなどに着目して考察すること。 ◆次回授業の予習次回の授業では、Webサイト制作に必要な環境構築と、制作の流れについて学びます。自分自身が使用するパソコンのOS（WindowsまたはMac）と、インストールされているブラウザーの種類を確認しておくこと。また、授業内で使用するテキストエディター「Visual Studio Code (VSCode)」について、教科書の記述を参考に、可能であれば自身のPCへのインストールを試みてください。
2	ユーザビリティと制作環境の準備	科目の中での位置付け	本コマは、全30回にわたるWebサイト制作演習の第2回目であり、第1部「Webサイトの基本概念と制作準備」の中核を成す。前回学習したインターネットとWebの基礎的な仕組みの上に立ち、これから実際にWebサイトを設計・制作していく上で最も重要な指針となる「ユーザビリティ（使いやすさ）」の概念を確立する。同時に、次回以降の具体的なコーディング作業に不可欠な制作環境（テキストエディターとブラウザー）を自身のPC上に構築する、理論と実践の接続点となる重要な回である。
		コマ主題細目	① ユーザビリティの概念とWebデザインの本質 ② 優れたユーザビリティを実現するためのデザイン原則 ③ Web制作環境の構築：テキストエディターとブラウザーの導入
		細目レベル	① 本主題では、Webサイト制作における最も根源的な目的である「ユーザビリティ（使いやすさ）」について、その定義と重要性を学術的な視点から解説する。一般的に「デザイン」という言葉は、表層的な美しさや装飾性を指すものと捉えられがちである。しかし、Webデザインにおける本質は、情報伝達の機能性と、ユーザーが目的を達成するための効率性にあることを学生に深く理解させる必要がある。まず、ユーザビリティとは単に操作が簡単であることだけでなく、ユーザーがストレスを感じずに目的の情報へ到達できるか、提供側の意図が正確に伝わるかという、サイトとユーザーとの相互作用の質を指す概念であることを定義する。その上で、デザインとは「伝えるための手段」であり、さらにはユーザーの抱える問題を解決し、より良い体験を提供するための「問題解決の手段」であるという視点を提示する。教科書に示された、見た目は良いが内容が不明瞭なサイトと、目的が即座に理解できるサイトの対比などを通じて、制作者の自己満足ではなく、常にターゲットとなるユーザーの視点に立って設計することの不可欠性を論じる。また、デザイン能力は先天的な「センス」のみに依存するものではなく、体系的な知識と基本原則の習得によって向上可能なスキルである点にも触れ、今後の学習への動機付けを行う。この細目で理解すべき範囲は、Webデザインにおけるユーザビリティの定義から、ユーザー中心設計の必要性、そしてデザインが持つ問題解決としての側面まで。
			② 本主題では、前項で定義したユーザビリティを具体的なWebサイトの形として実現するための実践的なデザイン原則について詳説する。ユーザビリティを構成する要素を「見やすさ」「読みやすさ」「操作しやすさ」の三つの側面に分解し、それぞれの具体的な手法を解説する。まず「見やすさ」の観点からは、視認性を確保するための配色とコントラストの重要性を論じる。背景色と文字色の明度差が低い場合に情報が伝達されにくくなる物理的な側面を指摘し、目に優しく疲労を与えにくい配色への配慮の必要性を説く。次に「読みやすさ」に関しては、Web媒体特有のユーザーの行動様式（流し読みの傾向など）を踏まえ、結論を先に提示する文章構成や、見出し、箇条書きを適切に用いた情報構造化の技術を指導する。また、ターゲット層に応じた専門用語の適切な使用基準についても触れる。最後に「操作しやすさ」として、リンクやボタンがクリック可能であることが直感的に理解できるデザイン（アフォーダンス）の重要性や、クリック後の挙動が予想可能であることの安心感、そしてページの表示速度がユーザー体験に与える決定的な影響について解説する。これらの要素が複合的に機能することで初めて、優れたユーザビリティが達成されることを理解させる。この細目で理解すべき範囲は、視認性を高める配色とコントラスト、Webに適した文章構成の技術、そしてユーザーの期待に応える操作性の実現手法まで。
			③ 本主題では、Webサイト制作の実践的な第一歩として、必要なソフトウェア環境を学生各自の計算機上に構築する。Webページは最終的にHTMLやCSSといったテキスト形式のコードによって記述されるため、これらの編集に特化した「テキストエディター」が不可欠である。標準的なOSに付属する簡易なメモ帳アプリと、制作専用のテキストエディターを比較し、後者が持つコード補完機能（入力予測）、シンタックスハイライト（役割別の色分け表示）、エラー検知機能などが、いかに作業効率を高め、人為的なミスを低減させるかを客観的に解説する。本コースでは、現在広く普及している標準的なツールとしてMicrosoft社の「Visual Studio Code (VSCode)」を採用し、その導入手順と、日本語化を含む基本的な初期設定の方法を指導し、受講生全員が同一の制作環境を整えることを目指す。続いて、作成したコードをWebページとして可視化するための「Webブラウザー」の役割について再確認する。ブラウザーの種類によって表示結果に微細な差異が生じる可能性に触れつつ、開発の基準となる標準ブラウザーとして「Google Chrome」の利用を推奨し、その導入を確認する。さらに、デザインカンプ作成のためのグラフィックツールについても概観し、Web制作に関わるツールの全体像を把握させる。この細目で理解すべき範囲は、Web制作に特化したテキストエディターの利点とVSCodeの基本設定、そしてWebブラウザーの役割と主要な種類、制作環境としての導入完了まで。
		キーワード	① ユーザビリティ ② コントラスト ③ テキストエディター ④ Visual Studio Code (VSCode) ⑤ Webブラウザー
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回学んだユーザビリティの三つの側面（見やすさ、読みやすさ、操作しやすさ）を意識しながら、普段自身が頻繁に利用しているWebサイトを一つ選び、批評的に分析してみること。具体的にどの部分が使いやすいと感じるか、あるいはストレスを感じるか、それは授業で扱ったどの原則に基づいているか（例えばコントラストが適切か、リンクが分かりやすいか等）を言語化して整理すること。また、授業内でインストールを行ったVSCodeとGoogle Chromeが、自身のPC上で問題なく起動し、動作することを確認しておくこと。 ◆次回授業の予習次回は、Webサイトが完成するまでの全体的な制作フローと、その設計図となる資料について学習する。テキストを事前に通読し、企画から公開に至るまでの大まかな工程（企画、サイトマップ作成、ワイヤーフレーム作成、デザイン、コーディング、公開）を把握しておくこと。特に、「サイトマップ」と「ワイヤーフレーム」という二つの異なる設計図が、それぞれサイトの何を定義するために用いられるものであるか、その役割の違いに着目して予習を行うこと。
3	Webサイト制作の流れと設計図	科目の中での位置付け	本コマは、全30回の講義における第1部「Webサイトの基本概念と制作準備」の最終回に位置づけられる。これまで学習したインターネットの仕組みやユーザビリティの基礎知識を踏まえ、Webサイトが具体的にどのような工程を経て制作されるのか、その全体像を把握するための重要な回である。特に、実際の制作作業に入る前の「設計」段階の重要性を理解し、具体的な設計図の作成方法を学ぶことで、次回以降始まるHTMLとCSSを用いた実践的なコーディング実習への円滑な移行を目的とする。
		コマ主題細目	① Webサイト制作の全体プロセスと企画の重要性 ② 構造とレイアウトの設計図：サイトマップとワイヤーフレーム ③ 効率的な制作環境の構築とツールの選定
		細目レベル	① Webサイトの制作は、単に見た目を作るデザイン作業やコードを書くコーディング作業だけで完結するものではない。本細目では、一つのWebサイトが完成し公開されるまでの一般的な制作フロー全体を概観し、各工程の相互関係と役割について解説する。標準的な制作プロセスは、大まかに「企画」「設計」「デザイン」「コーディング」「公開・運用」という段階を経て進行する。それぞれのフェーズで何が行われ、どのような成果物が求められるのかを体系的に理解させる。特に、すべての出発点となる「企画」段階の重要性について詳説する。企画とは、なぜそのWebサイトを作るのかという「目的（ゴール）」を明確にし、誰に利用してもらいたいかという「ターゲットユーザー」を定める作業である。目的が曖昧なまま制作を進めると、デザインの方向性が定まらず、結果としてユーザーにとって使いにくい、成果の上がらないサイトになってしまうリスクがあることを説明する。目的設定においては、メインゴール（例：商品の売上向上）とそれを達成するためのサブゴール（例：商品の認知度アップ、SNSでの拡散）を具体的に設定する必要性を説く。また、ターゲットユーザーの定義においては、単なる属性（性別、年代など）だけでなく、具体的な人物像としての「ペルソナ」を設定する手法を紹介する。ペルソナの趣味嗜好、行動パターン、抱えている課題などを詳細に想定することで、ユーザー視点に立ったデザインやコンテンツ設計が可能になることを具体的な事例を交えて解説し、企画段階での綿密な検討がプロジェクトの成否を分けることを強調する。この細目で理解すべき範囲は、Webサイト制作の一般的な6つの工程の全体像と、その最初の段階である企画における目的設定とターゲットユーザーの定義方法まで。
			② 企画段階で定めた目的とターゲットに基づき、Webサイトの具体的な構成を検討する「設計」段階について解説する。ここでは、サイト全体の構造を示す「サイトマップ」と、各ページのレイアウト構成案である「ワイヤーフレーム」という二つの重要な設計図について、その役割と作成方法を詳説する。まず、サイトマップとは、Webサイトに含まれる全てのページを書き出し、それらの階層構造や相互のリンク関係をツリー状などの図として可視化したものである。ユーザーが目的の情報に迷わずたどり着けるよう、情報を適切にグループ化し、論理的な階層構造を設計することの重要性を説く。一般的に、階層が深すぎるとユーザーの利便性が損なわれるため、可能な限り浅い階層（2〜3階層程度）に収めることが望ましいといった設計上の原則についても触れる。次に、ワイヤーフレームについて解説する。これは、各ページ内にどのようなコンテンツ（ロゴ、ナビゲーション、メインビジュアル、見出し、本文、画像、ボタンなど）を配置するか、その大まかなレイアウトを示した線画の設計図である。この段階では色や装飾といったデザイン要素は排除し、情報の優先順位と配置、ユーザーの視線誘導（例えば、左上から右下への視線の動き）などを考慮して、骨組みを決定することに集中する。ワイヤーフレームを作成することで、デザイン作業に入る前に必要な要素の過不足を確認し、制作チーム内やクライアントとの間で認識の齟齬を防ぐことができる利点を説明する。作成手法としては、手書きによるラフなスケッチから、専用のツールを用いたデジタルな作成まで多様な方法があることを紹介する。この細目で理解すべき範囲は、Webサイトの構造を設計するサイトマップと、各ページのレイアウト構成案であるワイヤーフレームそれぞれの役割、作成目的、および基本的な作成手順と留意点まで。
			③ 設計図が完成した後に続く、具体的なデザイン制作とコーディング作業を効率的かつ正確に進めるために必要なツール群と制作環境の構築について解説する。Webサイト制作には、役割に応じた複数の専門的なソフトウェアが必要となる。まず、ワイヤーフレームに基づき、最終的なWebページの見た目となる「デザインカンプ」を作成するためのグラフィックツールについて紹介する。代表的なツールとして、Adobe PhotoshopやIllustrator、そして近年Webデザインの現場で主流となりつつあるFigmaなどの特徴と用途の違いを概説する。次に、デザインカンプを基に、実際にWebブラウザーで表示可能な形式（HTMLファイルやCSSファイル）に変換するコーディング作業に必要な「テキストエディター」について詳説する。OS標準のメモ帳などでも記述は可能だが、制作効率と正確性を高めるためには、コードの入力補完機能、構文ハイライト表示（色分け表示）、エラー検出機能などを備えた高機能なテキストエディターが不可欠であることを説明する。本講義では、現在広く利用されているMicrosoft製の無料エディター「Visual Studio Code (VSCode)」を標準ツールとして採用することを示し、その基本的な特徴や、日本語化などの初期設定方法について実演を交えて解説する。最後に、作成したHTMLやCSSファイルが意図通りに表示されるかを確認するための「Webブラウザー」についても触れる。Webブラウザーの種類によって表示が微妙に異なる可能性があるため、開発用として標準的なブラウザー（Google Chromeなど）を定めつつ、複数のブラウザーでの動作確認（クロスブラウザーチェック）の必要性についても言及する。これらのツールを用意し、適切に設定することで、プロの現場と同様の制作環境が整うことを理解させる。この細目で理解すべき範囲は、デザインカンプ作成のためのグラフィックツール、コーディングのためのテキストエディター、表示確認のためのブラウザーそれぞれの役割と代表的なソフトウェアの種類、および基本的な制作環境の構築方法まで。
		キーワード	① 制作フロー ② ターゲットユーザー ③ サイトマップ ④ ワイヤーフレーム ⑤ クロスブラウザーチェック
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだWebサイト制作の全体フロー（企画から公開まで）を再確認し、各工程の目的を自身の言葉で説明できるように整理すること。特に「企画」段階におけるターゲット設定の重要性と、具体的な人物像を設定する「ペルソナ」の手法について、テキストの該当箇所を読み返し深く理解すること。また、サイトマップとワイヤーフレームの違いとそれぞれの役割について復習し、なぜデザインの前にこれらの設計図が必要なのかを再考すること。 ◆次回授業の予習次回からはいよいよHTMLを用いたWebページの構造化の実践に入る。テキストを読み、HTMLとは何か、どのような役割を持つ言語なのかについて予備知識を持っておくこと。また、今回の授業で解説したテキストエディター「Visual Studio Code (VSCode)」とWebブラウザー「Google Chrome」が自身のPCにインストールされ、日本語化等の設定が完了し、問題なく起動できる状態にあるか必ず確認してくること。
4	Webサイト制作の流れと設計図	科目の中での位置付け	本Webデザイン演習科目において、第1部「Webサイトの基本概念と制作準備」の最終回となる重要なコマである。第1回、第2回で学習したインターネットの基礎知識や制作環境の構築を踏まえ、本講義では実際に手を動かす制作フェーズに入る直前の段階として、Webサイトが完成するまでの全体工程を俯瞰する。特に、Webサイトの骨格を決定づける「設計図」の作成方法を習得することは、次回以降の第2部「HTMLによるWebページの構造化」へスムーズに移行するための必須要件となる。
		コマ主題細目	① Webサイト制作の全体フローと企画立案 ② サイトの構成図：サイトマップの作成 ③ ページの設計図：ワイヤーフレームの作成
		細目レベル	① Webサイト構築は、無秩序に作業を開始するのではなく、体系的なプロセスを経て行われるべきプロジェクトである。本細目では、まず企画から公開に至るまでの一般的な制作フロー全体を概観し、各工程の相互関係と重要性を理解させる。具体的には、企画、サイトマップ作成、ワイヤーフレーム作成、デザイン、コーディング、そして公開という一連の流れを提示し、それぞれのフェーズで何が行われ、どのような成果物が求められるのかを解説する。特に、プロジェクトの出発点となる「企画」フェーズの重要性について詳説する。Webサイトは目的によってその構成やデザインが大きく異なるため、制作に着手する前に「誰に」「何を」伝え、「どのような行動を促すのか」という目的を明確に定義する必要があることを、教科書の事例を交えて説明する。その際、主軸となる目標（メインゴール）と、それを達成するための中間的な目標（サブゴール）を設定する意義について触れ、定量的な目標設定の有効性を示す。さらに、ターゲットユーザーの選定についても深く掘り下げる。単に性別や年齢層といった属性だけでなく、具体的な人物像としての「ペルソナ」を設定することが、後続のデザインやコンテンツ制作においてブレのない意思決定を行うための羅針盤となることを理解させる。学生には、Webサイト制作が単なる技術的な作業ではなく、戦略的な思考に基づく問題解決のプロセスであることを認識させ、その基盤となる企画立案の能力を涵養することを目指す。この細目で理解すべき範囲は、Webサイト制作の全体的な流れと、その出発点となる企画立案における目標およびターゲット設定の重要性まで。
			② 企画段階で定義されたWebサイトの目的とターゲットに基づき、具体的にどのようなコンテンツやページが必要となるかを洗い出し、それらを構造化するプロセスについて解説する。ここで作成されるのが、Webサイト全体の構成図である「サイトマップ」である。本細目では、サイトマップが情報アーキテクチャ（IA）の基礎となる重要なドキュメントであることを学術的な視点から説明する。まず、必要な情報の棚卸しを行い、関連性の高い情報をグルーピングしていく手法を学ぶ。教科書に示された温泉宿の例などを参考に、情報を論理的な階層構造（ツリー構造）として整理することの重要性を説く。階層化においては、ユーザーが目的の情報にストレスなく到達できるよう、ナビゲーションの深さを適切に設計する必要がある。一般的に、トップページから2クリックまたは3クリック以内で主要なコンテンツに到達できる構造が望ましいとされる理由を、ユーザビリティの観点から解説する。また、各ページの優先順位付けについても触れ、ユーザーのニーズが高い情報ほどアクセスしやすい場所に配置する原則を理解させる。サイトマップの作成方法としては、手書きによるラフなスケッチから始め、修正や共有が容易なデジタルツール（Cacooなど）を活用する段階への移行についても触れる。学生には、Webサイト全体を俯瞰し、情報を論理的かつ体系的に整理・構造化する能力を身につけさせる。この細目で理解すべき範囲は、Webサイトの全体構成を可視化するサイトマップの役割と、情報を論理的に整理するための階層構造の設計方法まで。
			③ サイトマップによってWebサイト全体の構造が決定した後は、個々のページごとのレイアウト設計へと移行する。ここで作成されるのが、ページの設計図とも呼ばれる「ワイヤーフレーム」である。本細目では、ワイヤーフレームがデザイン（意匠）の前段階として、情報配置の骨組みを決定するために不可欠な工程であることを解説する。ワイヤーフレームにおいては、色や装飾といった視覚的な要素を極力排除し、線とボックスのみを用いて、どこに何（ロゴ、ナビゲーション、メイン画像、見出し、本文など）を配置するかを検討することに集中する必要があることを強調する。その際、重要な指針となるのが「コンテンツの優先順位」と「ユーザーの視線の動き」である。ページ内で最も伝えたい重要な要素を特定し、それをユーザーの視線が自然と向かう場所（一般的には左上から右下へ、あるいはF型やZ型と呼ばれるパターン）に配置する原則について詳説する。これにより、ユーザーを目的の情報へとスムーズに誘導するレイアウト設計の基礎を習得させる。また、現代のWeb制作において必須となる「モバイルファースト」の視点についても触れる。スマートフォンでの閲覧を前提とした場合、PCとは異なる狭い画面内での情報配置や表示順序の検討が必要となるため、モバイル版のワイヤーフレームも併せて検討することの重要性を理解させる。最終的なビジュアルデザインである「デザインカンプ」との違いを明確にしつつ、論理的な画面設計のスキルを涵養する。この細目で理解すべき範囲は、個別ページのレイアウト設計図であるワイヤーフレームの役割と、ユーザーの視線誘導やデバイス特性を考慮した情報配置の基本原則まで。
		キーワード	① サイトマップ ② ワイヤーフレーム ③ ペルソナ ④ デザインカンプ ⑤ コーディング
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学習したWebサイト制作の全体フローを改めて確認してください。特に、企画から設計段階における「サイトマップ」と「ワイヤーフレーム」の違いについて、それぞれの目的、記載内容、作成時の注意点という観点から自身の言葉で整理し、説明できるようにしておくことが重要です。なぜデザイン（意匠）に取り掛かる前にこれらの設計図が必要なのか、その理由をしっかりと理解しておきましょう。 ◆次回授業の予習次回からはいよいよ第2部に入り、Webページの骨組みを作成するための言語であるHTMLの学習を開始します。テキストを読み、HTMLがどのような役割を持つ言語なのか、予備知識として概要を把握しておいてください
5	テキストコンテンツのマークアップ	科目の中での位置付け	第4回で学んだHTMLの基本構造（html、head、body）の内部、特にbodyタグ内に記述される具体的なコンテンツのマークアップ方法を学ぶ回である。Webページの最も基礎的な構成要素であるテキスト情報に対し、見出し、段落、リストといった論理的な構造（セマンティクス）を付与するための主要なタグを習得し、適切な文書構造を構築するための基盤を確立する重要な位置づけにある。
		コマ主題細目	① 見出しタグによる階層構造の構築 ② 段落タグと改行によるテキストの構造化 ③ リストタグを用いた情報の箇条書き表現
		細目レベル	① Webページにおけるテキストコンテンツは、単に文字が羅列されているだけでは可読性が低く、情報の構造が伝わりにくい。そこで、書籍や論文における章、節、項のように、文書に明確な階層構造を与えるために用いられるのが見出しタグである。本細目では、HTMLにおいて見出しを定義するための`＜h1＞`から`＜h6＞`までの6種類のタグについて、その役割と適切な使用方法を概説する。まず、`＜h1＞`がそのページ内で最も重要な主題を表す大見出しであり、数字が大きくなるにつれて`＜h2＞`、`＜h3＞`と重要度が下がる小見出しとなる階層的な関係性を理解させる。授業では、前回の授業で作成した基本構造を持つHTMLファイルを用い、実際に`＜body＞`タグ内に各レベルの見出しタグを記述する実演を行う。ブラウザーで表示を確認すると、デフォルトのスタイルでは`＜h1＞`が最も大きく太い文字で表示され、階層が下がるにつれて文字サイズが小さくなることが視覚的に確認できる。しかし、ここで強調すべき最も重要な概念は、見出しタグは文字の大きさや太さを変えるための装飾目的で用いるものではなく、あくまで文書構造上の「意味（セマンティクス）」を定義するために存在するということである。例えば、単に文字を大きくしたいという理由だけで、見出しではないテキストに`＜h1＞`タグを使用してはならない。また、適切なマークアップの規則として、`＜h1＞`タグは原則として1ページにつき1回のみ使用し、ページのメイントピックを示すべきである点や、見出しレベルは`＜h2＞`の直下に`＜h4＞`を配置するような飛ばし方をせず、順序よく入れ子にしていくべきであるといった構造化の原則について詳説する。これらの規則を遵守することは、視覚障害者が利用するスクリーンリーダーなどの支援技術がページの構造を正しく読み上げるために不可欠であり、また、Googleなどの検索エンジンのクローラーがページのコンテンツを正しく理解し評価するためにも重要であることを説明する。学生には、提供されたプレーンテキストの原稿に対し、文書の内容を解釈した上で適切なレベルの見出しタグを適用する演習を行わせ、論理的な構造化の実践能力を養う。この細目で理解すべき範囲は、`＜h1＞`から`＜h6＞`までの見出しタグの役割と、それらを用いて論理的な階層構造を持つ文書を作成する原則まで。
			② 続いて、一般的な文章の基本単位である「段落」をHTMLでどのように表現するかについて解説する。見出し以外の一般的なテキストは、ひとまとまりの意味を持つブロック、すなわち段落として扱われるべきである。HTMLでは、この段落を定義するために`＜p＞`タグ（paragraphの略）を使用する。授業では、まとまった長さのテキストを`＜p＞`タグの開始タグと終了タグで囲んでマークアップし、ブラウザーで表示させる実演を行う。その際、`＜p＞`タグで囲まれたテキストのブロックの上下には、ブラウザーのデフォルトスタイルによって自動的に適度な余白が挿入され、視覚的にもひとまとまりの段落として認識されることを確認する。ここで、HTMLのソースコード記述における重要な特性として、ソースコード上でエンターキーによる改行やスペースキーによる空白文字を入力しても、ブラウザー上の表示には基本的に反映されず、それらはすべて単一の半角スペースとして集約されて扱われるという点を詳説する。この特性を学生に正しく理解させるため、ソースコード内で意図的に複数回の改行や多数のスペースを入れた場合と、それらを入れない場合のブラウザー表示を比較するデモンストレーションを実施する。その上で、段落内において文脈上、意図的に改行を行いたい場合に用いる`＜br＞`タグ（breakの略）について導入する。`＜br＞`タグは終了タグを持たない「空要素」であることを説明し、その記述方法を示す。`＜br＞`タグの使用にあたっては、住所の記載や詩の表現など、改行することに意味がある箇所でのみ限定的に使用すべきであり、単に段落間の余白を広げるレイアウト目的で`＜br＞`タグを連続使用することは、文書構造の意味を損なうため適切ではないというセマンティックな視点からの注意点を指導する。また、`＜p＞`タグは見出しタグと同様に「ブロックレベル要素」に分類され、基本的に親要素の横幅いっぱいに広がり、要素の前後に改行が入る挙動を示すことにも触れる。学生には、複数の段落から構成されるテキスト原稿に対し、適切に`＜p＞`タグによる段落分けを行い、必要な箇所にのみ`＜br＞`タグを配置する演習課題に取り組ませる。この細目で理解すべき範囲は、`＜p＞`タグによる段落の定義方法と、HTMLにおける空白・改行の扱い、および`＜br＞`タグによる強制改行の適切な使用方法まで。
			③ Webページ上のテキスト情報の中には、項目を並列に列挙したり、あるいは手順を順序立てて示したりする「箇条書き」の形式が適しているものが多々ある。HTMLにおいて、これらのリスト構造を意味的に正しく表現するためのタグ群、すなわち`＜ul＞`（unordered list：順序なしリスト）、`＜ol＞`（ordered list：順序付きリスト）、および`＜li＞`（list item：リスト項目）について解説する。まず、項目の並び順に特定の意味を持たない場合、例えば買い物リスト、成分表示、リンク集などを表現する際には`＜ul＞`タグを使用することを説明する。`＜ul＞`タグでリスト全体の範囲を定義し、その内部に個々のリスト項目を`＜li＞`タグで囲んで記述していく構造を実演する。ブラウザーでは通常、各項目の先頭に黒丸（・）などのリストマーカーが自動的に付与されることを示す。次に、料理のレシピの手順、ランキング、マニュアルの操作ステップのように、項目の順序が重要な意味を持つ場合には`＜ol＞`タグを使用することを説明する。`＜ol＞`タグを用いた場合、ブラウザーでは各項目の先頭に「1.」「2.」「3.」といった連番が自動的に振られることを確認する。ここで重要な構文規則として、`＜ul＞`タグおよび`＜ol＞`タグの直下（子要素）には、必ず`＜li＞`タグしか配置してはならないという点を強調する。見出しや段落などを直接`＜ul＞`や`＜ol＞`の中に書いてはならない。さらに、リストの中にさらに別のリストを含める「入れ子構造（ネスト）」の作り方についても詳説する。例えば、ある`＜li＞`タグの内容の中に、新たな`＜ul＞`または`＜ol＞`ブロック全体を記述することで、多階層のリストが表現できることを具体的なコード例とともに示す。これは複雑な情報を整理して提示する際に頻出する重要な技術である。学生には、例えば「Webサイト制作の手順」といった題材を与え、大項目に`＜ol＞`を、その下位の具体的なタスクに`＜ul＞`を用いるなど、状況に応じて適切にタグを使い分け、入れ子構造を用いた正しいリストのマークアップを行う演習を実施し、理解の定着を図る。この細目で理解すべき範囲は、順序なしリストと順序付きリストの意味的な違い、それぞれのタグの正しい記述規則、およびリストの入れ子構造の作成方法まで。
		キーワード	① 見出しタグ (h1-h6) ② 段落タグ (p) ③ 改行タグ (br) ④ リストタグ (ul/ol/li) ⑤ セマンティクス (意味論)
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだ見出しタグ（h1-h6）、段落タグ（p）、改行タグ（br）、そして2種類のリストタグ（ul、ol）とリスト項目タグ（li）をすべて使用して、簡単な「自己紹介ページ」のHTMLファイルを作成してください。例えば、`＜h1＞`で「〇〇の自己紹介」とし、`＜h2＞`で「趣味」「特技」「経歴」などのセクションを分け、それぞれの内容を段落やリストを用いて記述すること。作成したHTMLファイルをブラウザーで開き、意図した構造で表示されているか確認しましょう。 ◆次回授業の予習次回は、Webページに彩りを加える「画像の挿入」と、ページ間を移動するための「ハイパーリンク」について学びます。テキストを読み、画像を埋め込むための`＜img＞`タグの基本的な書き方（特に`src`属性と`alt`属性の役割）と、リンクを作成するための`＜a＞`タグの書き方（`href`属性の役割）について予習すること。
6	画像の挿入とハイパーリンクの設定	科目の中での位置付け	第6回は第2部「HTMLによるWebページの構造化」の中核を成す重要な回である。前回までに習得したテキスト情報の構造化に加え、本回ではWebコンテンツを視覚的に豊かにする画像の埋め込みと、Webの根源的な機能であるハイパーリンクによる情報同士の結合方法を学習する。これにより、静的な単一文書から、動的で相互接続されたWebサイトへと表現の幅を拡張するための基礎技術を確立する位置づけとなる。
		コマ主題細目	① 画像を表示するためのimgタグの構造と属性 ② ハイパーリンクを実現するaタグの基礎と実践 ③ 相対パスと絶対パスの概念および画像の適切な管理
		細目レベル	① 本主題では、Webページ上に静止画像を埋め込み表示させるためのHTML要素であるimgタグについて、その基本構造と必須属性を中心に詳細な解説と実践を行う。まず、imgタグがテキストマークアップで用いた開始タグと終了タグのペアとは異なり、終了タグを持たない「空要素」であることを理解させる。その上で、画像を表示するために不可欠な二つの主要属性、すなわち画像ファイルの場所を指定するsrc属性（sourceの略）と、画像が表示できない環境や視覚障がい者向けのスクリーンリーダー利用時に代替テキストとして機能するalt属性（alternativeの略）について詳説する。特にalt属性は、Webアクセシビリティの観点から極めて重要であり、単なる画像の補足ではなく、画像が持つ情報をテキストとして等価に伝える役割があることを強調し、具体的な記述例（例えば、単に「画像」とするのではなく「青空の下でノートパソコンを開いて作業する様子」のように具体的に記述するなど）を示しながら解説する。また、画像の表示サイズを制御するwidth属性とheight属性についても触れ、HTML側でサイズを指定することの意味と、後のCSS学習との関連性についても簡単な導入を行う。授業の進行としては、まずスライド資料を用いて各属性の役割を理論的に説明した後、学生各自のPCを用いた演習に移行する。演習では、事前に配布したサンプル画像ファイル、あるいは学生自身が用意した画像ファイルを用いて、実際にHTMLファイル内にimgタグを記述し、ブラウザ上で意図した通りに画像が表示されるかを確認させる。さらに、わざとsrc属性のファイル名を誤って記述し、画像が表示されない場合にブラウザがどのような挙動を示し、alt属性に記述した代替テキストがどのように表示されるかを体験させることで、alt属性の重要性を実感を伴って理解させることを目指す。これらの学習を通じて、学生は単に画像を貼り付けるだけでなく、情報の等価性とアクセシビリティを考慮した適切な画像のマークアップ能力を養う。この細目で理解すべき範囲は、imgタグの基本的な記述方法と、src属性およびalt属性の役割と重要性の理解まで。
			② 本主題では、World Wide Webの最も本質的な特徴である、文書間を相互に結びつける「ハイパーリンク」の概念と、それをHTMLで実現するaタグ（anchorの略）の具体的な使用方法について学習する。まず、インターネット上の膨大な情報がリンクによって網の目のように繋がっている現状を概観し、Webにおけるリンクの重要性を再確認する。続いて、aタグの基本構文を解説し、リンク先のURLを指定するhref属性（hypertext referenceの略）がリンク機能の核心であることを理解させる。aタグは開始タグと終了タグでテキストや画像を囲むことで、その囲まれた要素をクリッカブルなリンクとして機能させる仕組みであることを説明する。具体的な実践として、まず外部のWebサイト（例えば大学の公式ホームページや検索エンジンなど）へのリンクを作成する演習を行う。ここで「絶対パス（URL）」の概念に触れ、インターネット上の住所を完全に指定する方法を学ぶ。次に、同一サイト内における他のページへの移動、すなわち「内部リンク」の作成演習を行う。これは、将来的に複数ページで構成されるWebサイトを制作する際の基礎となる重要な技術である。さらに、リンクをクリックした際の挙動を制御するtarget属性についても解説を加える。特に、リンク先のページを現在のウィンドウではなく新しいタブやウィンドウで開く際に使用する `target="_blank"` の記述方法とその利用シーン（例えば、自サイトから外部サイトへ遷移させる場合など）について、ユーザビリティの観点も交えて説明する。演習では、テキストだけでなく、①で学んだimgタグをaタグで囲むことで、画像自体をリンクボタンとして機能させる「画像リンク」の作成も実践し、タグのネスト（入れ子構造）についての理解も深める。これらの学習活動を通じて、学生はWebページ間に適切なナビゲーションを構築し、情報を有機的に接続するための基礎能力を涵養する。この細目で理解すべき範囲は、aタグを用いた基本的なリンクの設定方法、外部リンクと内部リンクの区別、およびtarget属性による表示方法の制御まで。
			③ 本主題では、画像の読み込みやリンク設定において不可欠なファイル指定方法である「パス（Path）」の概念、特に初学者が混同しやすい「絶対パス」と「相対パス」の違いと使い分けについて、理論と実践の両面から詳細に学習する。まず、絶対パスがインターネット上のリソースの完全な住所（URL）を示すのに対し、相対パスは現在編集中のHTMLファイル（カレントディレクトリ）を基準とした相対的な位置関係を示すものであることを、ファイルシステムの階層構造図を用いて視覚的に解説する。Webサイト制作の現場では、開発環境から本番環境への移行などを考慮し、内部リソースへのアクセスには主に相対パスが用いられることを説明し、その重要性を強調する。具体的な相対パスの記述法として、同一階層のファイル指定（ファイル名のみ）、下位階層のファイル指定（フォルダ名/ファイル名）、そして上位階層への移動を示す「../」の記法について、具体的なディレクトリ構成例を示しながら詳説する。授業後半では、これらの知識を応用し、Webサイト制作における適切なファイル管理手法について学ぶ。Webサイトの規模が大きくなると画像ファイル等の数も膨大になるため、HTMLファイルと同じ階層に無秩序に置くのではなく、「images」といった専用のフォルダを作成し、その中に画像ファイルを整理して格納することが一般的であることを説明する。その上で、演習として、学生各自の作業フォルダ内に「images」フォルダを作成させ、そこに画像ファイルを移動させた状態で、HTMLファイルから正しい相対パスを用いて画像を表示させる課題に取り組ませる。この演習を通じて、階層構造を意識したパスの記述能力を養うとともに、将来的なサイト管理を見据えた整理整頓の習慣を身につけさせることを意図する。パスの記述ミスは画像が表示されない等の直接的なエラーにつながるため、トラブルシューティングの観点からも、パスの構造を正確に理解することの重要性を再確認させる。この細目で理解すべき範囲は、絶対パスと相対パスの概念的な違いの理解、ディレクトリ階層に応じた相対パスの記述方法、およびWebサイト制作における適切なファイル管理手法まで。
		キーワード	① imgタグ ② src属性 ③ alt属性 ④ aタグ ⑤ 相対パス
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだimgタグとaタグ、そして相対パスの知識を活用し、簡単な「自己紹介ページ」のHTMLを作成してください。ページには必ず、自分に関連する写真や好きなものの画像を一枚以上表示させること。その際、画像ファイルはHTMLファイルと同じ階層ではなく、新たに作成した「images」という名前のフォルダ内に格納し、適切な相対パスを用いて表示させることを条件とします。また、本文中には、大学のWebサイトや自分がよく利用する外部サイトへのテキストリンクを少なくとも一つ設定してください。作成したHTMLファイルと画像フォルダは次回の授業時に確認します。 ◆次回授業の予習次回の授業では、情報を整理して表示するための「表」と、ユーザーからの入力を受け付けるための「フォーム」の作成方法について学びます。テキストを事前に通読しておいてください。特に、表を作成するためのtable、tr、th、tdといった基本的なタグの役割と、フォームを構成するformタグ、inputタグの種類（テキスト入力、ラジオボタン、チェックボックスなど）について、それぞれの概要を把握しておくことを推奨します。専門用語が多く登場するため、事前に目を通しておくことで授業の理解度が深まります。
7	表データと入力フォームの作成	科目の中での位置付け	本Webデザイン科目の第2部「HTMLによるWebページの構造化」の第4回目にあたる。これまでに学習したテキストや画像の配置に加え、本コマでは、2次元的なデータを整理して表示するための「表」と、ユーザーが情報を入力してサーバーへ送信するための「フォーム」という、より動的でインタラクティブなWebページを構築するための重要な要素について、その構造と実装方法を学習する段階に位置付けられる。
		コマ主題細目	① 表データの構造化（tableタグとその関連タグ） ② 入力フォームの基本構造（formタグとinputタグ） ③ 多様なフォーム部品とユーザビリティの向上
		細目レベル	① Webページにおいて、料金表、スケジュール、スペック一覧など、行と列の2次元で構成される構造化されたデータを表示する際には、表組み（テーブル）が用いられる。本細目では、HTMLにおける表の基本的なマークアップ方法について解説する。まず、表全体を定義するtableタグの役割を理解させる。表は単なる視覚的な格子状のレイアウトではなく、データ間の関係性を意味的に定義するものであることを強調する。その上で、表の構成要素である「行」と「セル」を定義するためのタグ群を順次導入する。表の各行はtr（table row）タグを用いて定義し、その行の中にセルを配置していく構造を、板書やスライドを用いて視覚的に説明する。セルには、見出しを表すth（table header）タグと、データそのものを表すtd（table data）タグの2種類が存在する。これらの使い分けは、視覚的なデフォルトスタイルの違い（thは通常太字で中央揃えになるなど）だけでなく、スクリーンリーダーなどの支援技術が表の構造を正しく理解し、ユーザーに伝えるために極めて重要であることを学術的な視点から詳説する。例えば、表の最上行や左端の列が、その行や列の内容を説明する見出しとしての役割を持つ場合、必ずthタグを使用すべきであるという原則を理解させる。授業の進行としては、まず単純な2行2列の表を例に、tableタグの中にtrタグを入れ子にし、さらにその中にthタグやtdタグを配置するという基本的な階層構造を実際にコーディングしながら確認させる。その後、より実践的な例として、曜日と時間割を組み合わせたスケジュール表や、製品名と価格を対にした料金表などの作成演習を行い、行と列の関係性を意識したマークアップ能力を涵養する。また、表の複雑な構造、例えばセルの結合（colspan属性やrowspan属性）については、基礎的な構造の理解が定着した後の応用として触れる程度にとどめ、まずは基本的な格子状の構造を正しく記述できるようになることを主眼置く。この細目で理解すべき範囲は、tableタグを用いた基本的な表の構造化と、tr、th、tdタグの適切な使い分けまで。
			② Webサイトは一方的に情報を発信するだけでなく、ユーザーからの情報を受け取る双方向のメディアでもある。そのための主要なインターフェースが「入力フォーム」である。本細目では、フォームを作成するための基本的なHTML構造について解説する。まず、フォーム全体のコンテナとなるformタグの役割を理解させる。formタグは、その内部に含まれる入力欄に入力されたデータを、どこへ（action属性）、どのように（method属性）送信するかを定義する重要な要素である。ここでは、データ送信の具体的な仕組み（サーバーサイドプログラムとの連携など）には深入りせず、formタグがデータ送信の範囲を定義するものであるという基本的な概念を把握させる。次に、実際にユーザーがデータを入力するための部品を作成するinputタグについて解説する。inputタグは、type属性の値を変えることで様々な形式の入力欄として機能する非常に汎用性の高いタグである。まずは最も基本的な「1行テキスト入力欄」を作成するために、type属性に"text"を指定する方法を紹介する。あわせて、入力されたデータをサーバーへ送信するための「送信ボタン」もinputタグ（type="submit"）で作成できることを示す。授業では、実際にformタグで囲まれた領域内に、テキスト入力欄と送信ボタンを配置するシンプルなコードを記述させ、ブラウザ上でどのように表示され、動作するかを確認させる。この際、各入力欄に入力されたデータがサーバー側で識別されるために必要なname属性の重要性についても触れ、適切な名前を付ける習慣を付けさせる。例えば、氏名を入力する欄であればname="username"のように、データの内容を表す名前を付与する必要があることを説明する。これらの基本的な要素を組み合わせることで、ユーザーからの入力を受け付け、それを送信するというフォームの最小単位が機能することを実践を通じて理解させる。この細目で理解すべき範囲は、formタグによるフォーム領域の定義と、テキスト入力欄および送信ボタンの基本的な実装方法まで。
			③ 前項で学習した基本的なテキスト入力に加え、Webサイトのフォームでは目的に応じて多様な入力形式が求められる。本細目では、様々なフォーム部品の実装方法と、フォームの使いやすさ（ユーザビリティ）を向上させるための手法について解説する。まず、inputタグのtype属性を変更することで実現できる異なる入力形式を順次紹介する。具体的には、入力内容が伏せ字で表示されるパスワード入力欄（type="password"）、複数の選択肢から一つだけを選択するラジオボタン（type="radio"）、複数の選択肢から任意数を選択できるチェックボックス（type="checkbox"）を取り上げる。それぞれの部品がどのようなデータの入力に適しているか、その特性と用途を具体例を交えて説明する。特にラジオボタンとチェックボックスについては、同じグループの選択肢として機能させるために、name属性を統一する必要がある点（ラジオボタンの場合）や、それぞれの選択肢が持つ値をvalue属性で指定する必要がある点など、実装上の注意点を詳説する。さらに、inputタグ以外で用いられる重要なフォーム部品として、複数行のテキスト入力が可能なtextareaタグや、ドロップダウンリスト形式で選択肢を提示するselectタグとoptionタグの使い方も解説し、より複雑なデータ入力に対応できる能力を養う。続いて、フォームのユーザビリティを向上させるための重要な要素としてlabelタグを導入する。labelタグは、入力欄とその項目名（ラベル）を意味的に関連付けるためのものである。これを適切に使用することで、ラベルのテキストをクリックした際に対応する入力欄にフォーカスが当たるようになり、マウス操作が容易になるだけでなく、スクリーンリーダーの利用者にとってもどの入力欄が何のためのものかが明確になるというアクセシビリティ上の利点を強調する。labelタグのfor属性と入力欄のid属性を用いて関連付けを行う具体的な記述方法を実践し、その効果をブラウザで確認させる。この細目で理解すべき範囲は、多様な入力フォーム部品の実装と、labelタグを用いたユーザビリティへの配慮まで。
		キーワード	① tableタグ ② formタグ ③ inputタグ ④ trタグ/tdタグ ⑤ labelタグ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学習したtableタグによる表組みと、formタグ関連による入力フォームの知識を活用し、架空のイベント参加申し込みページのHTMLを作成しなさい。ページには、イベントの「日時」「場所」「参加費」を整理して表示する表と、参加者の「氏名（テキスト入力）」「メールアドレス（テキスト入力）」「参加希望日（ラジオボタンで複数日から選択）」「備考（複数行テキスト入力）」を入力して送信するフォームを含めること。各入力欄には適切にlabelタグを用いて項目名を関連付け、ユーザビリティに配慮したコーディングを行うこと。 ◆次回授業の予習次回は、Webページのレイアウトを構築する上で欠かせない「グループ化」の概念と、そのためのタグについて学習する。テキストを読み、divタグとspanタグの基本的な役割について予習しておくこと。これらは、これまで学んだ見出しや段落のように特定の意味を持たず、要素をまとめるための汎用的なコンテナとして機能する。それぞれのタグがどのような単位でグループ化を行うのか、その違いに着目して読んでくること。
8	HTMLの構造化とグループ分け	科目の中での位置付け	本授業は、全30回のうち第8回目にあたり、第2部「HTMLによるWebページの構造化」の最終回となる。これまで学習した見出し、段落、画像、リスト、表、フォームといった個別の要素を、意味のあるまとまりとして整理・グループ化するための重要な手法を学ぶ。これは、単に要素を並べる段階から、Webページ全体の構造を設計する段階への移行を意味し、次回から始まる第3部「CSSによるWebデザインの基礎」において、レイアウトや装飾を効率的に適用するための不可欠な前提知識となる位置づけにある。
		コマ主題細目	① ブロックレベルでの要素のグループ化とdivタグ ② テキストレベルでの要素のグループ化とspanタグ ③ 適切な文書構造の構築とグループ化タグの役割
		細目レベル	① Webページが複雑になるにつれ、見出しや段落、画像といった個々の要素をそのまま並べるだけでは、文書の構造が把握しづらくなり、また後の工程であるCSSによるスタイリングやレイアウト調整が困難になる。そこで、関連する複数の要素を一つの「まとまり（グループ）」として扱う必要性が生じる。この細目では、主にブロックレベルの大きな単位で要素をグループ化するために用いられるdivタグについて解説する。divは「division（分割、区分）」の略であり、それ自体は特定の意味を持たない汎用的なコンテナ（入れ物）としての役割を果たす。HTMLの要素には、視覚的な表示において、その要素の前後で改行が入り、親要素の幅いっぱいに広がる領域を確保する性質を持つものがあり、これらは伝統的にブロックレベル要素と呼ばれてきた（HTML5の厳密なコンテンツモデルにおいては異なる分類がなされるが、初学者の視覚的理解を助けるため、ここではこの表現を用いる）。divタグもこの性質を持ち、自身が囲んだ要素群を一つの大きなブロックとして定義する。授業では、例えばWebページの「ヘッダー部分」「メインコンテンツ部分」「フッター部分」といった論理的な領域を、それぞれdivタグで囲むことによって構造化する具体的な手法を提示する。複数のhタグやpタグなどを一つのdivタグで入れ子にすることで、それらがひとかたまりのグループとしてブラウザに認識される様子をコードレベルで確認させる。また、divタグ自体は意味を持たないため、文書のセマンティクス（意味論）に影響を与えずに、純粋に構造的なまとまりを作る目的で使用される点を強調する。これにより、学生はWebページを構成する各部品を、レゴブロックのように大きな単位で整理・管理する基礎的な能力を養うことができる。この細目で理解すべき範囲は、divタグが意味を持たないブロックレベルのコンテナであることを理解し、複数の要素を一つのグループとしてまとめるために使用できることまで。
			② 前項のdivタグが大きな領域をブロックとしてグループ化するのに対し、文章の流れの中にある特定の部分、例えば行内の一部だけをグループ化したい場合に用いられるのがspanタグである。この細目では、テキストレベルでの微細なグループ化を実現するspanタグの役割と特性について詳説する。spanタグもdivタグと同様に、それ自体は特定の意味を持たない汎用的なコンテナである。しかし、決定的な違いはその表示上の挙動にある。spanタグは、伝統的な分類におけるインライン要素としての性質を持つ。すなわち、spanタグで囲まれた範囲は、その前後で改行されることなく、文章の流れ（インライン）の中にそのまま組み込まれる。これにより、段落の途中にある特定の単語やフレーズだけを範囲指定することが可能となる。授業では、具体的な使用場面を想定した解説を行う。例えば、一つの段落（pタグ）の中で、特定の重要語句だけを後からCSSで赤色に強調したい場合や、特定の文字部分にだけ異なるフォントスタイルを適用したい場合などを取り上げる。これらの装飾は次章以降の学習内容であるが、その準備段階として、HTML側で「装飾の対象となる範囲」を特定しておく必要があり、そのためにspanタグが不可欠であることを説明する。divタグとの対比を通じて、ブロックを作成して構造を大きく区切る場合にはdivを、文章の流れを断ち切らずに局所的な範囲を指定する場合にはspanを、という使い分けの原則を明確に理解させる。実際にテキストエディタを用いて、文章の一部をspanタグでマークアップし、ブラウザ上では見た目の変化が（現時点では）生じないことを確認しつつ、内部的な構造としては区別されていることを認識させる。この細目で理解すべき範囲は、spanタグが意味を持たないインラインのコンテナであることを理解し、文章中の特定の部分をグループ化するために使用できることまで。
			③ divタグとspanタグは、任意の範囲をグループ化できる非常に便利なタグであるが、それゆえに乱用される傾向があり、適切な使用が求められる。この細目では、これまでに学んだタグ知識を統合し、より適切でセマンティック（意味論的）な文書構造を構築するための、グループ化タグの役割と使用原則について総括的に解説する。まず再確認すべきは、divタグとspanタグは「意味を持たない」という点である。HTMLの本来の目的は文書構造を意味的に正しく記述することにあるため、意味のある箇所には、可能な限り意味のあるタグ（セマンティックなタグ）を使用すべきであるという原則を強調する。例えば、見出しにはh1-h6、段落にはp、リストにはul/ol/liを用いるのが基本である。HTML5ではさらに、header、footer、nav、article、sectionといった、ページの特定部分の意味を明確に示すためのタグが導入されている（これらの詳細な使い分けは応用的な内容となるため本基礎講座では深く立ち入らないが、存在と意義には触れる）。したがって、divタグは、これらのセマンティックなタグで表現できない場合や、純粋にCSSによるレイアウトやスタイリングの都合で要素をまとめる必要がある場合に限定して使用するのが理想的であることを説明する。不必要にdivタグを多重に入れ子にする構造（いわゆる「divスープ」）は、コードの可読性を下げ、メンテナンス性を損なうため避けるべきであると警鐘を鳴らす。授業のまとめとして、単純なテキスト原稿を、適切な見出しや段落タグでマークアップし、さらにそれらをheaderやmainといった（もし教科書で扱っていれば）セマンティックなタグ、あるいはdivタグを用いて論理的なグループに分ける一連のプロセスを概観し、構造化の全体像を把握させる。この細目で理解すべき範囲は、divタグやspanタグは意味を持たないため、文書の意味構造を明確にするためには、まず適切なセマンティック要素の使用を検討すべきであり、divタグなどはその補完として利用すべきであるという原則を理解することまで。
		キーワード	① グループ化 ② divタグ ③ spanタグ ④ ブロックレベル要素 ⑤ インライン要素
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回学習したdivタグとspanタグを用いて、これまで作成してきたHTMLファイルの構造を見直してみること。具体的には、第7回までに作成した、見出し、段落、リスト、画像などが含まれるHTMLファイルに対し、ページ全体のヘッダー領域、メインコンテンツ領域、フッター領域などを想定して、それぞれをdivタグでグループ化するマークアップを追加すること。また、文章中の特定の単語をいくつか選び、spanタグで囲んでみること。ブラウザで表示を確認し、これらのタグを追加しても見た目上の大きな変化（特にspanタグの場合）がないことを確認し、あくまで内部的な構造化のための作業であることを体感すること。 ◆次回授業の予習次回からはいよいよ第3部「CSSによるWebデザインの基礎」が始まる。HTMLがWebページの「骨組み」や「構造」を作るものであったのに対し、CSSはそれに「色」「大きさ」「配置」などの「見た目（スタイル）」を指定するための言語である。テキストを事前に通読し、HTMLとCSSの役割の違いについて、自分なりの言葉で説明できるように理解を整理しておくこと。また、CSSがどのようにHTMLに適用されるのか、その基本的な仕組み（セレクタとプロパティの概念）について予習しておくこと。
9	CSSの基本概念と文字の装飾	科目の中での位置付け	本講座は、Webサイト制作に必要な技術とデザイン思考を習得することを目的としています。第9回は全30回の講義において、第2部で学んだHTMLによる文書構造定義に基づき、視覚的なデザイン表現を加えるための言語であるCSS（Cascading Style Sheets）の学習を開始する重要な回です。これ以降のWebデザイン学習の基礎となる概念と基本的な記述方法を確立する位置付けにあります。
		コマ主題細目	① CSSの役割と適用方法 ② CSSの基本構文と記述規則 ③ テキストコンテンツの装飾技法
		細目レベル	① 本主題では、Webページ制作におけるCSSの定義と役割、そしてHTML文書への具体的な適用手法について学術的な視点から解説します。まず、Web標準の考え方に基づき、HTMLが文書の「構造（Structure）」を担うのに対し、CSSは文書の「表現（Presentation）」を担うという、構造と表現の分離の原則を理解させます。この分離がもたらすメリット、すなわちデザインの変更容易性、複数ページのデザイン統一、保守性の向上、そしてアクセシビリティへの寄与について詳説し、現代のWeb制作におけるCSSの不可欠性を認識させます。次に、CSSをHTMLに適用するための3つの主要な方法、すなわち「外部スタイルシート」「内部スタイルシート」「インラインスタイル」について、それぞれの記述方法と特徴、適用範囲の違いを比較検討します。特に、実務的なWebサイト制作の現場において標準的とされる、独立した拡張子.cssのファイルを作成し、HTMLのhead要素内でlink要素を用いて読み込む「外部スタイルシート」方式に重点を置き、その優位性を解説します。授業の進行としては、まず概念的な講義を行い、その後、受講生各自のPC環境において、シンプルなHTMLファイルとCSSファイルを作成し、それらを正しくリンクさせてスタイルが適用されるまでのー連の流れを実践的に演習します。この過程で、ファイルパスの概念や、ブラウザがどのようにHTMLとCSSを解釈してレンダリングするかという仕組みについても触れ、基礎的な理解を深めます。この細目で理解すべき範囲は、CSSの役割とメリットを把握し、外部スタイルシート方式を用いてHTML文書にCSSを適用させる手順まで。
			② 本主題では、CSSを記述するための基本的な文法規則（シンタックス）を体系的に習得させます。CSSのルールセットは、「セレクタ（Selector）」「プロパティ（Property）」「値（Value）」という3つの基本要素で構成されることを明示し、それぞれの役割を定義します。セレクタはスタイルを適用する対象となるHTML要素を指定する部分であり、プロパティは変更したいスタイルの種類（例：文字色、フォントサイズ）、値はそのプロパティに設定する具体的な内容（例：赤、16ピクセル）であることを解説します。これらの要素が、波括弧（{}）で囲まれた宣言ブロック内で、プロパティと値をコロン（:）で区切り、宣言の区切りにセミコロン（;）を用いるという厳密な記述ルールを、具体例を示しながら詳説します。初学者が陥りやすい記述ミス（全角文字の使用、セミコロンの忘れなど）についても注意喚起します。また、最も基本的なセレクタとして、HTMLのタグ名をそのまま指定する「タイプセレクタ（要素セレクタ）」を取り上げ、h1要素やp要素など、特定の要素全体にスタイルを一括して適用する方法を実践します。さらに、コードの可読性や保守性を高めるために不可欠な「コメントアウト」の記述方法（/* コメント */）についても触れ、適切なコメントの活用を推奨します。授業では、スライドを用いた構文解説の後、エディタを用いて実際にCSSコードを記述し、ブラウザでの表示確認を繰り返すことで、正しい構文が身につくよう指導します。この細目で理解すべき範囲は、CSSの基本構文規則を正確に理解し、タイプセレクタを用いて特定のHTML要素に対して基本的なスタイル定義を記述できる段階まで。
			③ 本主題では、Webページ上の主要な情報伝達手段であるテキストコンテンツに対して、CSSを用いて多様な装飾を施すための具体的なプロパティと値を学習します。タイポグラフィはWebデザインにおいてサイトの印象や可読性を左右する極めて重要な要素です。まず、文字色を指定する`color`プロパティについて、キーワード指定（red, blueなど）や16進数カラーコードによる指定方法を解説します。次に、文字の大きさを指定する`font-size`プロパティを扱い、絶対単位であるpx（ピクセル）と、相対単位であるemやremの違いと使い分けについて、レスポンシブデザインへの配慮も含めて説明します。フォントの種類を指定する`font-family`プロパティに関しては、具体的なフォント名の指定に加え、ゴシック体（sans-serif）や明朝体（serif）といった総称フォントファミリーを指定する意義と、複数の候補をカンマ区切りで指定するフォールバックの仕組みについて理解を深めます。さらに、文字の太さを調整する`font-weight`、行間を調整して読みやすさを向上させる`line-height`、テキストの水平方向の揃え位置（左揃え、中央揃え、右揃え）を指定する`text-align`といった、実用頻度の高いプロパティ群についても、その効果と適切な値の設定方法をデモンストレーションを交えて詳説します。また、Webフォントの基本的な概念についても触れます。演習では、提供されたテキスト素材に対し、これらのプロパティを組み合わせて適用し、見出しや本文の見た目を整える実践的な課題に取り組みます。この細目で理解すべき範囲は、主要なテキスト関連プロパティの役割と値の指定方法を習得し、Webページの文字情報を目的に応じて適切に装飾できるレベルまで。
		キーワード	① CSS ② 外部スタイルシート ③ セレクタ ④ プロパティ ⑤ font-family
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだCSSの基本構文とテキスト装飾プロパティを活用し、第2部で作成したHTMLファイル（例：自己紹介ページやレシピページ）のテキストコンテンツに対して装飾を施してください。具体的には、外部スタイルシートを作成してHTMLにリンクさせ、見出し（h1～h6）の文字色やフォントサイズを変更し、段落（p）の行間や文字の太さを調整するなど、可読性とデザイン性を意識したスタイルを適用してください。記述したCSSコードが正しくブラウザに反映されるかを確認し、意図通りにならない場合は構文エラーがないか見直す習慣をつけてください。 ◆次回授業の予習次回は、Webデザインにおける「色彩設計」と「背景のスタイリング」について学びます。Webで使用される色の指定方法（RGB、16進数カラーコードなど）の仕組みと、背景色や背景画像を設定するためのCSSプロパティについて予習しておくこと。
10	色彩設計と背景のスタイリング	科目の中での位置付け	本Webデザイン科目の第3部「CSSによるWebデザインの基礎」の第2回目にあたる本コマでは、前回の文字装飾に続き、Webサイトの視覚的な印象を決定づける「色」と「背景」の表現方法を学ぶ。HTMLで構築された文書構造に対し、CSSを用いて適切な配色と背景設定を行うことは、サイトの目的を達成し、ユーザーに正しい情報を伝えるデザインを実現するための不可欠な要素である。ここでは、技術的な実装方法とデザイン理論の両面からアプローチする。
		コマ主題細目	① Webにおける色の指定技法と透明度の表現 ② 配色の基礎理論とWebサイトへの応用 ③ 背景画像の制御と効果的なスタイリング
		細目レベル	① Webページ上で色を表現するためのCSSにおける多様な指定方法について、その仕組みと使い分けを体系的に解説する。コンピュータディスプレイにおける色の表現原理であるRGBカラーモデルを前提とし、CSSでの具体的な記述方式を習得させる。まず、最も基本的な指定方法として、`red`や`blue`といった定義済みのカラーネームによる指定と、その限界について触れる。次に、実務で標準的に用いられる16進数によるカラーコード表記（例: `#ff0000`）について、その構造（赤・緑・青の各成分を00からffまでの16進数で表現する仕組み）を詳細に説明し、任意の色を正確に指定できる能力を養う。さらに、RGBの各成分を0から255の10進数、またはパーセンテージで指定する`rgb()`関数についても解説し、16進数表記との等価性を理解させる。加えて、現代のWebデザインにおいて不可欠な要素である「透明度（アルファ値）」の表現として、`rgba()`関数を導入する。これはRGBの3成分に加え、0（完全に透明）から1（完全に不透明）までの値で透明度を指定するものであり、背景を透過させて文字を重ねたり、重なり合う要素に奥行きを与えたりする際に極めて有効な手法であることを、具体的なコード例とブラウザでの表示確認を通じて実践的に理解させる。これらの色の指定方法は、文字色を指定する`color`プロパティや、背景色を指定する`background-color`プロパティなど、CSSの様々な場面で共通して利用される基礎知識であることを強調する。この細目で理解すべき範囲は、Webにおける色の表現原理を理解し、16進数カラーコードおよびRGBA関数を用いて、不透明色から半透明色まで自在にCSSで指定できるようになるまで。
			② 単に色を指定する技術だけでなく、Webサイトの目的に合致した効果的な配色を行うための基礎理論と設計手法について講義する。まず、色彩学の基礎として、色の三属性である「色相（色の色味）」「明度（色の明るさ）」「彩度（色の鮮やかさ）」の概念を定義し、これらの組み合わせによって生まれる「トーン（色調）」が、ユーザーに与える心理的な印象（例えば、暖色系は温かみや活気、寒色系は落ち着きや信頼感など）に深く関与していることを解説する。その上で、Webサイトにおける実践的な配色設計のアプローチとして、サイト全体の印象を決定づける「メインカラー」、背景や広い面積に使用されメインカラーを引き立てる「ベースカラー」、注目させたい部分やボタンなどに用いて画面にメリハリをつける「アクセントカラー」という役割別の色の選び方を詳説する。これらの色が互いに調和し、かつ情報の視認性を損なわないようにするための配色技法として、色相環を用いた類似色配色や補色配色などの基本的な考え方を紹介する。また、配色は単なる装飾ではなく、情報の優先順位を視覚的に伝え、ユーザーの視線を誘導するための重要な機能的要素であることを強調する。授業内では、優れた配色を持つ実際のWebサイトの事例を分析したり、オンラインの配色支援ツールを紹介したりすることで、理論を具体的なデザイン作業に落とし込むための視点を養う。学生には、ターゲットユーザーやサイトのコンセプトに基づき、意図を持った色彩計画を立てることの重要性を認識させる。この細目で理解すべき範囲は、色の三属性とトーンの概念を理解し、メインカラー、ベースカラー、アクセントカラーの役割を認識した上で、基本的な配色理論に基づいたWebサイトの色彩設計の考え方を習得するまで。
			③ Webページの背景は、単色で塗りつぶすだけでなく、画像を使用することでより豊かな表現が可能となる。本細目では、CSSの`background-image`プロパティを用いて背景画像を挿入する基本操作から、その表示方法を詳細に制御するための関連プロパティ群までを包括的に扱う。まず、`background-image: url('画像のパス');`という基本構文を解説し、HTMLの`＜img＞`タグによる画像挿入との意味的な違い（`＜img＞`はコンテンツそのもの、`background-image`は装飾）を明確にする。続いて、挿入された背景画像の配置や振る舞いを制御する重要なプロパティを順次解説する。画像の繰り返し方法を指定する`background-repeat`（`no-repeat`, `repeat-x`, `repeat-y`など）、画像の表示開始位置を指定する`background-position`（キーワード指定や数値指定）、そして現代のレスポンシブデザインにおいて特に重要となる画像のサイズを指定する`background-size`について詳説する。特に`background-size`の`cover`値（領域全体を覆うように拡大縮小）と`contain`値（画像全体が収まるように拡大縮小）の違いは、多様な画面サイズに対応する上で必須の知識であることを実演を交えて強調する。さらに、画面スクロール時の背景画像の固定などを指定する`background-attachment`についても触れる。また、背景画像を使用する際には、画像のファイル容量がページの読み込み速度に影響を与えるため、適切な形式と圧縮率での画像準備が必要であるというパフォーマンスの観点についても言及する。この細目で理解すべき範囲は、`background-image`による背景画像の挿入方法を習得し、`repeat`, `position`, `size`等のプロパティを駆使して、意図した通りの背景表現を実装できるようになるまで。
		キーワード	① 16進数カラーコード ② RGBA関数 ③ 色の三属性（色相・明度・彩度） ④ 配色設計（メインカラー・ベースカラー・アクセントカラー） ⑤ background-image
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだ色の指定方法（特にRGBAによる半透明指定）と、背景画像の制御プロパティ（`background-size: cover;`など）を活用し、簡単なWebページのセクションを作成してみること。具体的には、ブラウザの幅いっぱいに広がる大きな背景画像を配置し、その中央に半透明の背景色（例えば黒の半透明）を持ったボックスを重ね、その中に白い文字でタイトルと短い文章を記述する、といったデザインをHTMLとCSSで実装し、各プロパティの挙動を再確認すること。 ◆次回授業の予習次回はCSSにおける最も重要な概念の一つである「ボックスモデル」について学ぶ。ｔテキストを読んで予習し、すべてのHTML要素が持つ4つの領域（内容、パディング、ボーダー、マージン）の構造を示す図をよく見ておくこと。それぞれの領域が何を表し、要素全体の幅や高さがどのように計算されるのか、基本的な仕組みを頭に入れて授業に臨むこと。
11	ボックスモデルと余白の調整	科目の中での位置付け	本コマは、CSSによるWebデザインの基礎において、レイアウト構築の核心となる「ボックスモデル」の概念を習得する極めて重要な回である。前回までに学んだ文字や背景の装飾に加え、HTML要素が持つ矩形の領域構造を理解し、幅・高さ、余白、枠線を適切に制御する能力を養う。これは、後続のFlexboxやGridを用いた高度なレイアウト技術を学ぶための必須の基礎知識となる。
		コマ主題細目	① ボックスモデルの概念と幅・高さの指定 ② 余白の調整（paddingとmargin） ③ 枠線の設定（border）
		細目レベル	① HTML要素がブラウザ上でレンダリングされる際、すべての要素は目に見えない矩形のボックスとして扱われるという「ボックスモデル」の基本概念を導入する。このボックスは、中心から外側に向かって、コンテンツ領域（内容が表示される部分）、パディング（内側の余白）、ボーダー（枠線）、マージン（外側の余白）という4つの層で構成されていることを図解を用いて解説し、Webページのレイアウトがこれらのボックスの積み重ねと配置によって成り立っている構造を理解させる。続いて、このボックスモデルのうち、最も中心となるコンテンツ領域のサイズを決定するwidth（幅）プロパティとheight（高さ）プロパティについて詳説する。これらのプロパティには、ピクセル（px）やパーセント（%）などの単位を用いて数値を指定することを説明し、それぞれの単位が持つ意味と挙動の違いについて、親要素との関係性を含めて解説する。例えば、width: 100%;と指定した場合、その要素の幅は親要素のコンテンツ領域の幅いっぱいまで広がることを示す。また、ブロックレベル要素とインライン要素では、これらの幅・高さの指定が効くかどうかが異なる点についても触れ、要素の表示形式に応じた適切なサイズ指定の必要性を説く。授業の進行としては、まずスライド等でボックスモデルの概念図を提示し、各部の名称と役割を明確にする。その後、具体的なHTML要素（例えばdivタグやpタグ）に対して背景色を設定し、widthとheightの値を様々に変更する演習を行うことで、視覚的にコンテンツ領域のサイズが変化する様子を観察させる。この細目で理解すべき範囲は、ボックスモデルの全体構造の概念的理解から、widthおよびheightプロパティを用いたコンテンツ領域の基本的なサイズ指定方法まで。
			② ボックスモデルにおける2種類の余白、すなわち要素の内側に設けられる「パディング（padding）」と、要素の外側に設けられる「マージン（margin）」の役割の相違と、それぞれの具体的な指定方法について解説する。まず、パディングはコンテンツ領域とボーダー（枠線）の間の余白であり、要素の内部に空間を作ることで、テキストや画像が枠線に密着するのを防ぎ、読みやすさやデザイン性を向上させる効果があることを説明する。一方、マージンはボーダーの外側に位置する余白であり、隣接する他の要素との間隔を調整するために用いられることを明確に区別させる。これらの余白は、上下左右の4方向に対して個別に指定することが可能であり、padding-top、margin-rightのように方向を明示したプロパティを用いる方法と、padding: 10px 20px;のように複数の値をスペースで区切って一括指定するショートハンドの記述方法があることを詳説する。特に一括指定における値の数（1つから4つ）と適用される方向（上、右、下、左の順序規則）の関係性を正しく理解させる。授業では、背景色と枠線を設定したボックスを用意し、パディングの値を変更することでボックスの内部が広がる様子と、マージンの値を変更することで隣接する要素との距離が変化する様子を比較実演する。さらに、マージンの応用として、ブロックレベル要素の左右のマージンをauto（自動）に設定する（例: margin: 0 auto;）ことで、その要素を親要素の中央に配置するテクニックについても解説し、Webレイアウトにおける頻出パターンとして習得させる。この細目で理解すべき範囲は、paddingとmarginの概念的相違とそれぞれの役割の理解、上下左右の余白を指定する個別および一括プロパティの記述方法、そしてmarginのauto値を利用した水平方向の中央揃えの実践まで。
			③ ボックスモデルの構成要素の一つであり、パディングとマージンの境界に位置する「ボーダー（枠線）」の装飾方法について詳説する。枠線は、要素の領域を視覚的に明示したり、デザイン上のアクセントとして用いたりする重要な要素である。CSSにおいて枠線を定義するためには、線の種類（border-style）、線の太さ（border-width）、線の色（border-color）という3つの属性を指定する必要があることを説明する。まず、border-styleプロパティで指定可能な主要な値として、実線（solid）、点線（dotted）、破線（dashed）、二重線（double）などを紹介し、それぞれの視覚的特徴を示す。次に、border-widthプロパティによる太さの指定（ピクセル値やキーワード）、border-colorプロパティによる色の指定（カラーコードやカラーネーム）について解説する。これらの3つの属性は個別に指定することも可能だが、実務的にはborder: 1px solid black;のように、太さ、種類、色をスペースで区切って一度に指定する一括指定プロパティ（ショートハンド）が多用されることを強調し、その記述順序と効率性を理解させる。さらに、上下左右の特定の辺だけに枠線を適用したい場合、例えば下線のみを引きたい場合にはborder-bottomプロパティを用いるといった、方向別の指定方法についても触れる。授業では、見出し要素に下線を引くデザインや、ボタン要素を想定して四方を囲む枠線を作成する演習を通じて、多様な枠線表現を実践する。また、枠線の有無や太さがボックス全体のサイズ（幅や高さ）に影響を与える点についても注意を喚起する。この細目で理解すべき範囲は、枠線を構成する3要素（種類、太さ、色）の理解から、個別プロパティおよび一括プロパティを用いた多様な枠線表現の記述、特定の辺への枠線適用方法まで。
		キーワード	① ボックスモデル ② width / height ③ padding ④ margin ⑤ border
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習ボックスモデルの構造（コンテンツ、パディング、ボーダー、マージン）を自身の言葉で説明できるように整理すること。特に、内側の余白であるpaddingと外側の余白であるmarginの役割の違いを明確に理解しておくことが重要である。また、授業内で扱ったサンプルコードを参考に、自身のテキストエディターでHTMLとCSSファイルを作成し、width、height、padding、margin、borderの各プロパティの値を様々に変更してみること。値の変化がブラウザの表示にどのように反映されるか、特に要素のサイズや配置間隔の変化に着目して観察し、ボックスモデルの挙動を体感的に習得すること。 ◆次回授業の予習次回の授業では、Webページで頻繁に使用される箇条書きリストの装飾方法と、特定の要素のみを対象にスタイルを適用するための重要な手法であるクラス（class）とアイディー（id）について学習する。HTMLのリスト関連タグ（ul、ol、li）の復習をしておくとともに、CSSにおけるclassセレクタ（.ドットで始まる）とidセレクタ（#ハッシュで始まる）の記述方法の違いや、それぞれの使い分けの基本的な考え方について、テキストの記述を基に予習しておくこと。
12	特定要素の装飾とリストデザイン	科目の中での位置付け	第3部「CSSによるWebデザインの基礎」の中盤に位置する本講義は、HTML要素全体への画一的なスタイル適用から一歩進み、意図した特定の要素のみを対象としてデザインを施すための技術を習得する重要な回である。ここで学ぶクラス（class）とアイディー（id）というセレクターの概念は、Webページの構成要素を個別に制御するために不可欠であり、今後のレイアウト構築や、より複雑で実践的なWebサイト制作の基礎となる。また、Webページにおいて頻出するリスト要素に対する特有の装飾技術についても理解を深める。
		コマ主題細目	① クラスセレクターによるスタイルの適用 ② IDセレクターの特性と活用 ③ リスト要素の装飾技法
		細目レベル	① Webページのデザインにおいて、例えばすべての段落（p要素）を同じスタイルにするのではなく、特定の段落だけ文字色を赤くしたい、あるいは特定の画像にだけ枠線をつけたいといった要望は頻繁に生じる。このような特定の要素を対象としたスタイルの適用を実現するために最も一般的に用いられるのが「クラスセレクター」である。本細目では、まずHTMLのグローバル属性である`class`属性について解説し、これをHTMLタグ内に記述することで要素に特定のグループ名（クラス名）を付与できることを理解させる。次に、CSS側でこのクラス名を指定してスタイルを定義する方法を学ぶ。CSSではクラス名の前にドット（.）を付記することでクラスセレクターとして機能することを、具体的なコード例を用いて実演する。例えば、HTML側で`＜p class="highlight"＞強調したいテキスト＜/p＞`と記述し、CSS側で`.highlight { color: red; }`と記述することで、その段落のみが赤字になる仕組みを解説する。クラスセレクターの最大の特徴は、その汎用性と再利用性にある。一つのページ内で同じクラス名を複数の異なる要素（例えば、h2要素とp要素の両方）に付与することが可能であり、それらに対して一括して同じスタイルを適用できる利点を説明する。さらに、一つのHTML要素に対して、スペースで区切って複数のクラス名を同時に指定できること（例: `class="box red-border"`）も解説し、これによりスタイルの定義を細分化し、それらを組み合わせることで柔軟なデザインが可能になることを理解させる。最後に、クラス名の命名規則について触れ、半角英数字、ハイフン、アンダースコアが使用可能であること、数字から始めてはいけないこと、そして後から見た際に意味が理解しやすい名前を付けることの重要性を説く。この細目で理解すべき範囲は、クラス属性の基本的な使い方から、複数の要素に同じクラスを適用する方法、そして一つの要素に複数のクラスを指定する方法まで。
			② 前項のクラスセレクターと同様に、特定の要素にスタイルを適用するための手段として「IDセレクター」が存在する。本細目では、`id`属性を用いたIDセレクターの仕組みと、クラスセレクターとの決定的な違いについて学術的な視点から解説する。まず、HTMLの`id`属性は、要素に固有の識別子を付与するために用いられることを説明する。CSS側では、ID名の前にシャープ（#）を付記することでIDセレクターとして機能することを具体的なコード例とともに示す。IDセレクターの最も重要な特性は「一意性（ユニークさ）」である。クラス名とは異なり、一つのページ内において同じID名は一度しか使用してはならないという厳格なルールが存在する。この規則の理由として、IDが単なるスタイルの適用だけでなく、ページ内の特定の場所を指し示すアンカーとしての役割や、将来的に学ぶJavaScriptなどのスクリプト言語から特定の要素を操作する際の識別子として利用されるためであることを解説し、Web標準に準拠したマークアップにおけるIDの重要性を認識させる。授業では、クラスとIDの使い分けの指針として、ページ内で繰り返し使用されるスタイルにはクラスを、ヘッダーやフッターの特定領域、あるいは特定のフォーム部品など、ページ内で唯一無二の存在であるべき要素にはIDを使用するという一般的な原則を提示する。さらに、ID属性の応用例として「ページ内リンク」の作成方法を実習する。アンカータグ（a要素）の`href`属性に`#`に続けて移動先のID名を指定することで、クリックするとページ内の該当箇所へスクロール移動する仕組みを、実際の長文コンテンツを用いたデモンストレーションを通じて理解させる。この細目で理解すべき範囲は、ID属性の基本的な使い方、ページ内で重複してはならないという規則、クラスとの使い分け、そしてIDを利用したページ内リンクの仕組みまで。
			③ Webページにおいて、箇条書き（ul要素）や番号付きリスト（ol要素）は、情報を整理して提示するだけでなく、ナビゲーションメニューの構築などデザイン上も極めて重要な役割を果たす。本細目では、これらのリスト要素に特有のCSSプロパティを用いた装飾技法について詳説する。まず、ブラウザが持つデフォルトのスタイルシートにより、ul要素には黒丸、ol要素には数字の連番がリストマーカーとして自動的に付与されることを確認する。その上で、これらのマーカーのスタイルを制御する`list-style`関連のプロパティ群について解説を進める。中心となるのは`list-style-type`プロパティである。これを用いることで、マーカーを白丸（circle）や四角（square）に変更したり、ローマ数字（upper-roman）や英字（lower-alpha）に変更したりできることを実演する。特に、Webデザインの実践においては、ナビゲーションメニューを作成する際などにデフォルトのマーカーが不要となるケースが多いため、`list-style-type: none;`と指定してマーカーを非表示にする手法は頻出であり、その重要性を強調する。次に、`list-style-image`プロパティを利用して、マーカーとして任意の画像ファイルを指定する方法を解説し、よりオリジナリティのあるデザインが可能になることを示す。また、`list-style-position`プロパティについても触れ、マーカーの表示位置をリスト項目（li要素）のボックスの内側（inside）に収めるか、外側（outside、デフォルト）に出すかを制御できることを説明し、それぞれの表示結果の違いを視覚的に確認させる。さらに、リストが入れ子構造になっている場合、親リストに設定したスタイルが子リストにどのように継承されるか、あるいはリセットされるかといった挙動についても、具体的なHTML構造を用いて解説し、意図通りのリストデザインを実現するための基礎能力を涵養する。この細目で理解すべき範囲は、`list-style-type`プロパティを用いたリストマークの種類の変更や非表示設定、`list-style-image`による画像の利用、そして`list-style-position`によるマーク位置の調整まで。
		キーワード	① クラスセレクター ② IDセレクター ③ class属性 ④ id属性 ⑤ list-styleプロパティ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回学習したクラスセレクターとIDセレクターを用いて、これまでに作成したHTMLファイル（例えば自己紹介ページなど）のスタイルを修正してみましょう。特定の段落や見出しだけに適用されるクラスを作成し、文字色や背景色を変更してください。また、ページ内で一度しか使われない要素（例えばページの主要なタイトル部分など）にIDを付与し、独自のスタイルを適用してみましょう。さらに、リスト要素（ulまたはol）を作成し、`list-style-type`プロパティを使ってマーカーを非表示にしたり、別の記号に変更したりするCSSを記述し、ブラウザでの表示結果を確認してください。また、クラスとIDの使い分けのルールを再確認しておくことが重要です。 ◆次回授業の予習次回は、CSSによるレイアウト構築の基礎となる極めて重要な概念「ボックスモデル」について学習します。すべてのHTML要素が目に見えない長方形のボックスを持っているという考え方に基づき、その内容領域の幅（width）と高さ（height）、内側の余白（padding）、枠線（border）、そして外側の余白（margin）がそれぞれどのように要素の表示サイズや配置に影響を与えるか、教科書の図版を参照しながらその構造を把握しておくようにしてください。特にpaddingとmarginの違いを意識して読むことが理解の鍵となります。
13	CSSレイアウトの基礎（Flexbox 1）	科目の中での位置付け	第9回から第12回までに学習したCSSの基本概念、文字や色彩の装飾、そしてボックスモデルの知識を基盤として、Webページの骨格を形成する「レイアウト」の学習へと移行する重要な回である。これまでの学習では要素単体の装飾や配置間隔の調整が主であったが、本回からは複数の要素を組み合わせ、Webサイト全体の構造を視覚的に構築するための現代的かつ必須の技術であるFlexbox（フレキシブルボックスレイアウト）の基礎理論と基本操作を習得する。これは、後の第4部以降で実施する実践的なWebサイト制作プロジェクトにおけるレイアウト構築の核となる知識である。
		コマ主題細目	① Webページレイアウトの概念とFlexboxの導入 ② Flexboxの基本構造：コンテナとアイテムの関係性 ③ Flexboxによる配置と整列：主軸と交差軸の制御
		細目レベル	① Webページにおけるレイアウトとは、情報構造を視覚的に整理し、ユーザーにとって見やすく使いやすい画面構成を実現するための配置計画であることをまず概説する。HTML要素は、デフォルトの状態（通常のドキュメントフロー）では、ブロックレベル要素は垂直方向に積み重なり、インライン要素は水平方向に流れるという基本的な配置規則を持っていることを復習する。その上で、実際のWebサイトデザインにおいて頻出する「複数のブロック要素を横一列に並べる」「ヘッダー内のロゴとナビゲーションを左右に配置する」「要素を垂直方向の中央に揃える」といったレイアウト要件は、これまでの基本的なボックスモデルやマージンの知識だけでは実現が困難または複雑になることを指摘する。こうした現代的なWebレイアウトの課題を効率的かつ柔軟に解決するために登場したCSSの仕様が「Flexbox（Flexible Box Layout Module）」であることを導入する。Flexboxは、コンテナ内のアイテムの配置、方向、順序、サイズなどを柔軟に制御することに特化した一次元（一行または一列）のレイアウトモデルであることを解説する。従来のレイアウト手法と比較して、Flexboxがどのように複雑な配置計算を簡素化し、異なる画面サイズやデバイスにおいても柔軟に対応できる（レスポンシブな）レイアウト構築を可能にするか、その利点とWeb制作における重要性について学術的な視点から解説を加える。学生には、Flexboxが単なる特定のプロパティではなく、一つのレイアウトモードであることを理解させ、これからの学習に対する動機付けを行う。この細目で理解すべき範囲は、Webレイアウトの目的と現状の課題、そしてFlexboxが登場した背景とその基本的な特徴、利点まで。
			② Flexboxを利用したレイアウト構築の第一歩として、その基本構造となる「フレックスコンテナ（親要素）」と「フレックスアイテム（子要素）」の概念と関係性について詳説する。Flexboxのレイアウトモデルを適用するためには、まずレイアウトの対象となる複数の要素を包含する親要素に対して、CSSプロパティ `display: flex;` を指定する必要があることを解説する。この指定が行われた親要素が「フレックスコンテナ」となり、その直下にあるすべての子要素が自動的に「フレックスアイテム」となる仕組みを、HTML構造図と対応するCSSコードを用いて具体的に示す。ここで重要な点は、`display: flex;` の影響が及ぶのは直下の子要素のみであり、孫要素以降には直接的な影響が及ばないというスコープの理解である。また、`display: flex;` を指定した瞬間に、それまで垂直に積み重なっていたブロックレベルのアイテム群が、初期設定として水平方向（横一列）に並ぶという劇的な変化を、実際のブラウザー表示画面を通して視覚的に確認させる。これは、フレックスコンテナが生成する「フレックス整形コンテキスト」という特別なレイアウト環境下において、アイテムの配置ルールが通常のフローから変更されるためであることを論理的に説明する。さらに、インライン要素に対してFlexboxを適用する場合の `display: inline-flex;` についても触れ、コンテナ自体が周囲の要素に対してどのように振る舞うかの違いを比較解説する。演習として、単純な `div` 要素のリスト構造を作成し、親要素に `display: flex;` を適用することで、要素が横並びになる基本的な挙動を実践的に確認させる。この細目で理解すべき範囲は、フレックスコンテナとフレックスアイテムの定義、`display: flex;` プロパティによるFlexboxの有効化、およびその直後のアイテムの基本的な挙動変化まで。
			③ Flexboxレイアウトにおいて最も重要かつ根幹となる概念である「主軸（main axis）」と「交差軸（cross axis）」について図解を用いて詳説する。Flexboxでは、アイテムが並ぶ方向を主軸、それと直交する方向を交差軸と定義する。デフォルトの状態では、主軸は水平方向（左から右）、交差軸は垂直方向（上から下）となっていることを理解させる。これらの軸の概念を前提として、アイテムの配置位置や間隔を制御するための主要なプロパティ群について解説を進める。まず、主軸方向におけるアイテムの配置と余白の分配を制御する `justify-content` プロパティについて、その役割と主要な値（`flex-start`：始端揃え、`flex-end`：終端揃え、`center`：中央揃え、`space-between`：両端揃えで均等間隔、`space-around`：各アイテムの両側に均等間隔など）を、それぞれの適用結果を示す図版とともに詳細に解説する。次に、交差軸方向におけるアイテムの配置を制御する `align-items` プロパティについて、その役割と主要な値（`stretch`：コンテナの高さに合わせて伸長、`flex-start`：始端揃え、`flex-end`：終端揃え、`center`：中央揃えなど）を同様に解説する。特に、Webデザインで頻繁に求められる「垂直方向の中央揃え」が、`align-items: center;` によって容易に実現できることを強調する。これらのプロパティを組み合わせることで、コンテナ内部でのアイテムの自由自在な配置が可能になることを、ナビゲーションメニューやカード型レイアウトなどの具体的なWeb UIパーツを想定した例を通して示す。学生には、単にプロパティと値を暗記するのではなく、常に「今、どちらの軸に対して操作を行っているか」を意識しながらレイアウトを組み立てる能力を涵養する。この細目で理解すべき範囲は、主軸と交差軸の定義、および `justify-content` と `align-items` プロパティを用いた基本的な配置と整列の制御方法まで。
		キーワード	① Flexbox（フレキシブルボックスレイアウト） ② フレックスコンテナ ③ フレックスアイテム ④ 主軸（メインアクシス） ⑤ 交差軸（クロスアクシス）
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだFlexboxの基礎的な配置技術を定着させるため、以下の演習課題に取り組むこと。HTMLで親要素（コンテナ）と3つの子要素（アイテム、それぞれ異なる色とテキストを設定）を持つ単純な構造を作成し、CSSでFlexboxを適用する。その上で、`justify-content` と `align-items` プロパティの様々な値を組み合わせ、子要素がコンテナ内で「左上揃え」「右下揃え」「完全な中央揃え（水平・垂直ともに中央）」「両端揃えで垂直中央」など、異なる配置になるパターンを最低5種類作成し、それぞれの挙動とコードの関係性を確認すること。 ◆次回授業の予習次回は、Flexboxを用いたより高度なレイアウト技術、具体的にはアイテムの並ぶ方向を変更する `flex-direction` や、複数行への折り返しを制御する `flex-wrap`、そしてアイテム個別の順序や大きさを制御するプロパティ群について学習する。テキストを読み、今回学んだ主軸と交差軸の概念が、方向転換によってどのように変化するかを予習しておくこと。また、CSS Grid（グリッドレイアウト）というもう一つの強力なレイアウト手法についても概要を把握しておくことが望ましい。
14	高度なレイアウト技術（Flexbox 2 & CSS Grid）	科目の中での位置付け	本コマは、第3部「CSSによるWebデザインの基礎」の終盤に位置し、前回学習したFlexboxの基礎をさらに発展させると同時に、現代のWebデザインにおいて不可欠なもう一つの強力なレイアウト手法であるCSS Gridを導入する重要な回である。ここで習得する高度なレイアウト技術は、直後の第15回で学ぶレスポンシブデザインの実践や、第4部以降の具体的なWebサイト制作プロジェクトにおいて、複雑なページ構造を効率的かつ柔軟に構築するための核心的なスキルとなる。
		コマ主題細目	① Flexboxによる高度な配置と順序の制御 ② CSS Gridレイアウトの基本概念と構造 ③ CSS Gridを用いたタイル型レイアウトの実践
		細目レベル	① 前回の授業では、`display: flex`を用いた基本的な横並び配置と、主軸方向の揃え（`justify-content`）、交差軸方向の揃え（`align-items`）について学習した。本細目では、これらを基礎として、より複雑で実践的なレイアウト要求に応えるためのFlexboxの高度なプロパティ群について詳説する。まず、レスポンシブデザインにおいて必須となる、アイテムの折り返し挙動を制御する`flex-wrap`プロパティについて解説する。画面幅が狭くなった際にアイテムを無理に一行に収めるのではなく、複数行に適切に配置転換させる方法を実演し、その際の複数行全体の垂直方向の揃えを指定する`align-content`プロパティの役割についても触れる。次に、フレックスアイテム個別の配置を制御するプロパティ群を扱う。全てのアイテムに共通の揃え位置を指定する`align-items`に対し、特定のアイテムだけ異なる垂直位置に配置したい場合に用いる`align-self`プロパティの使用法を解説する。さらに、HTMLのソースコード上の記述順序とは異なる視覚的な順序でアイテムを表示させる`order`プロパティについても、その有用性とアクセシビリティ上の注意点を含めて説明する。最後に、フレックスコンテナ内の余白空間または不足空間に応じて、アイテム自身がどのように伸縮するかを定義する`flex-grow`（伸長係数）、`flex-shrink`（収縮係数）、`flex-basis`（基準サイズ）の各プロパティと、それらを一括指定する`flex`ショートハンドプロパティの概念を導入する。これらのプロパティを組み合わせることで、例えば「特定の要素は固定幅を保ち、残りの要素が可変幅で空間を埋める」といった、柔軟かつ堅牢なレイアウト構造が実現できることを理解させる。授業の進行においては、具体的なナビゲーションバーやカード型リストのUIコンポーネントを例題とし、各プロパティを適用することで配置がどのように変化するかを視覚的に確認しながら、それぞれのプロパティが持つ役割と相互関係を体系的に習得させることを目指す。この細目で理解すべき範囲は、Flexboxの各種応用プロパティを用いて、アイテムの折り返し、行揃え、個別配置、表示順序、および伸縮比率を自在に制御し、意図した複雑なレイアウトを実現できるようになるまで。
			② 本細目では、Flexboxと並ぶ現代的なレイアウト手法である「CSS Grid Layout（グリッドレイアウト）」の基礎概念と構造について解説する。Flexboxが基本的に一方向（行または列）の配置を制御する「1次元レイアウト」システムであるのに対し、CSS Gridは行と列の両方を同時に定義し制御できる「2次元レイアウト」システムであることをまず明確にし、両者の適切な使い分けの指針を示す。CSS Gridの学習にあたっては、まずその構造を定義するための専門用語を正確に理解する必要がある。グリッド全体の領域となる親要素「グリッドコンテナ」、その直下に配置される子要素「グリッドアイテム」、グリッドを構成する水平・垂直の区切り線である「グリッドライン」、ラインによって区切られた行や列の帯状領域である「グリッドトラック」、そしてラインに囲まれた最小単位の領域である「グリッドセル」といった基本概念を、図解を用いて丁寧に定義する。次に、実際にグリッドレイアウトを構築するための基本的なCSSプロパティを導入する。親要素に対して`display: grid`を適用してグリッドコンテナを生成し、続いて`grid-template-columns`プロパティと`grid-template-rows`プロパティを用いて、必要な列と行の数およびそれぞれのサイズを定義する方法を解説する。この際、ピクセル（px）やパーセント（%）といった従来の単位に加え、グリッドレイアウト特有の柔軟な単位である`fr`（fraction：比率）単位を紹介する。`fr`単位を用いることで、利用可能な空間を定義した比率に応じて自動的に分配する柔軟なグリッドが容易に作成できることを強調する。また、グリッドトラック間の溝（余白）を一括して設定する`gap`プロパティ（`row-gap`および`column-gap`のショートハンド）についても触れ、アイテム同士が密着しない見やすいレイアウトの構築方法を説明する。授業では、単純な2行3列程度のグリッドを定義し、そこにアイテムがどのように配置されるかを確認する演習を通じて、グリッドシステムの基本的な仕組みを直感的に理解させる。この細目で理解すべき範囲は、CSS Gridの基本概念と専門用語を理解し、グリッドコンテナの定義、行と列のトラックサイズの指定、およびアイテム間の余白設定を行えるようになるまで。
			③ 前細目で定義したグリッド構造に基づき、本細目ではグリッドアイテムを具体的な位置に配置し、実践的なタイル型レイアウトを構築する手法を詳説する。CSS Gridにおけるアイテムの配置は、基本的にグリッドラインの番号を指定することによって行う。アイテムの配置を開始する列ラインを指定する`grid-column-start`、終了する列ラインを指定する`grid-column-end`、および同様に行の開始と終了を指定する`grid-row-start`、`grid-row-end`の各プロパティの使用法を解説する。また、これらを簡潔に記述するためのショートハンドプロパティである`grid-column`と`grid-row`の記法（例：`grid-column: 1 / 3;` はグリッドライン1から3までの範囲、すなわち2列分を占有することを意味する）についても説明し、アイテムが複数のグリッドセルにまたがる（スパンする）配置方法を習得させる。これにより、特定のアイテムだけを大きく表示するといった、メリハリのあるレイアウトが可能になることを示す。さらに、効率的なグリッド定義のための関数として`repeat()`を紹介する。例えば、同じ幅の列を多数作成する場合に、`grid-template-columns: repeat(4, 1fr);`のように記述することで、コードの冗長性を排除できることを説明する。加えて、レスポンシブデザインにおいて極めて強力な手法となる、`repeat()`関数と`auto-fill`または`auto-fit`キーワード、そして`minmax()`関数を組み合わせたテクニックを解説する。これらを用いることで、メディアクエリを多用することなく、画面幅に応じて列数が自動的に増減し、かつ各アイテムが指定した最小幅を維持しながら適切に伸縮する、高度で柔軟なタイル型レイアウト（カード型UIや画像ギャラリーなど）が実現できることを実演を通じて理解させる。授業では、具体的なデザインカンプを想定し、それをCSS Gridを用いて実装するプロセスを段階的に示すことで、理論の実践的な応用能力を涵養する。この細目で理解すべき範囲は、グリッドラインを指定してアイテムを任意の位置やサイズで配置できること、および`repeat()`関数や`auto-fill`などを活用して効率的かつレスポンシブなタイル型レイアウトを構築できるようになるまで。
		キーワード	① flex-wrap ② CSS Grid ③ グリッドコンテナ ④ グリッドライン ⑤ `fr`単位
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習 Flexboxの応用として、複数のアイテムが画面幅に応じて折り返されるレイアウトを作成し、`align-content`で複数行の垂直揃えを調整してみてください。また、CSS Gridの基礎として、親要素に`display: grid`を適用し、`grid-template-columns`と`grid-template-rows`を用いて、3行3列の単純な格子状レイアウトを作成してください。その際、`fr`単位を用いて各セルの比率を調整し、`gap`プロパティでセル間に余白を設けてみましょう。それぞれのプロパティがどのように配置に影響するか、ブラウザの開発者ツールで確認しながら理解を深めてください。 ◆次回授業の予習次回は「レスポンシブデザインの基礎とCSS設計」を学びます。テキストを予習し、メディアクエリ（Is `@media`）の基本的な書き方と役割について把握しておいてください。また、なぜブラウザが持つ初期スタイルをリセットする必要があるのか、その理由と方法について予備知識を得ておくようにしてください。
15	レスポンシブデザインの基礎とCSS設計	科目の中での位置付け	本授業は、全30回構成における第3部「CSSによるWebデザインの基礎」の最終回にあたる。これまで習得したHTMLによる構造化とCSSによる装飾・レイアウト技術を基盤とし、現代のWeb制作において必須不可欠な「マルチデバイス対応」への扉を開く重要な位置づけにある。具体的には、異なる画面サイズに適応するレスポンシブWebデザインの基礎概念と技術、および本格的なサイト制作に向けてCSSを効率的かつ堅牢に管理するための設計思想の導入を行い、次回から始まる実践的なプロジェクト制作への円滑な移行を目指す。
		コマ主題細目	① レスポンシブWebデザインの概念と仕組み ② ブラウザーの初期スタイルとリセットCSSの活用 ③ 効率的なCSS記述のための基礎的な設計思想
		細目レベル	① 今日、WebサイトへのアクセスはPCのみならず、スマートフォンやタブレットなど多様な画面サイズを持つデバイスから行われることが一般的である。このような状況下において、特定のデバイスに固定されたレイアウトのみを提供することは、ユーザビリティの著しい低下を招く。そこで、単一のHTMLソースコードを用いつつ、閲覧するデバイスの画面幅に応じてCSSでレイアウトやデザインを柔軟に調整し、最適な表示を提供する手法が「レスポンシブWebデザイン」である。本細目では、まずこの手法が必要とされる背景として、モバイルデバイスの普及とWeb閲覧環境の多様化について概説し、マルチデバイス対応の重要性を認識させる。その上で、レスポンシブWebデザインを実現するための中核的な技術である「メディアクエリ（Media Queries）」の仕組みについて解説する。メディアクエリは、CSS3で導入された機能であり、例えば「画面幅が768px以下の場合」といった特定の条件を指定し、その条件に合致した場合にのみ適用されるスタイルを記述することを可能にする。これにより、PC用には横並びのレイアウトを、画面幅の狭いスマートフォン用には縦並びのレイアウトを適用するといった切り替えが実現できることを、基本的な構文例を用いて説明する。また、モバイル端末での表示を適切に制御するために不可欠な「ビューポート（viewport）」の設定についても触れ、HTMLのhead内に記述するmetaタグの役割を理解させる。さらに、制作のアプローチとして、画面幅の狭いモバイル端末向けのスタイルを基本とし、必要に応じてPC向けのスタイルを拡張していく「モバイルファースト」という考え方についても紹介し、その利点について考察を促す。これらの学習を通じて、受講者は多様なデバイスに対応したWebサイト構築の基盤となる概念と技術的枠組みを習得する。この細目で理解すべき範囲は、レスポンシブWebデザインの定義、必要性、およびそれを実現するための主要な技術であるメディアクエリとビューポートの基本的な役割を概念的に把握するまで。
			② Webブラウザーは、HTML文書をレンダリングする際、開発者がCSSでスタイルを指定していない要素に対しても、あらかじめ定義された独自のスタイルを適用する。これを「ユーザーエージェントスタイルシート」または「デフォルトスタイル」と呼ぶ。例えば、h1タグの文字サイズやpタグの上下の余白（マージン）、リストの左側のインデントなどは、この初期スタイルによって設定されている。問題となるのは、この初期スタイルの仕様がブラウザーの種類（Google Chrome、Safari、Microsoft Edge、Firefoxなど）によって微妙に異なる点である。そのため、同じHTMLとCSSを記述しても、閲覧するブラウザーによって意図しない表示の差異が生じ、レイアウト崩れの原因となることがある。この問題を解消し、クロスブラウザ（複数の異なるブラウザー）環境において一貫性のあるデザインを実現するために用いられるのが「リセットCSS」である。本細目では、まず実際にスタイルを何も適用していないHTMLページを異なるブラウザーで表示させ、初期スタイルの差異を視覚的に確認する。その上で、リセットCSSの目的が、ブラウザー固有の初期スタイルを打ち消し、すべてのブラウザーで要素のスタイルを均一な状態（例えば、すべてのマージンを0にするなど）に戻すことにあると解説する。リセットCSSには、すべてのスタイルを完全に無効化するものや、有用なデフォルトスタイルは残しつつブラウザー間の差異のみを吸収するもの（例えば「Normalize.css」）など、いくつかのアプローチが存在することを紹介する。授業では、代表的なリセットCSSの導入方法として、外部CSSファイルとして読み込む手順を実践的に示し、リセットCSS適用前後の表示の変化を比較検証することで、その効果と必要性を深く理解させる。この細目で理解すべき範囲は、ブラウザーのデフォルトスタイルの影響を理解し、それを統一するためのリセットCSSの目的と基本的な導入方法を習得するまで。
			③ Webサイトの規模が大きくなり、ページ数やコンテンツが増加するにつれて、CSSのコード量は膨大となり、その管理は複雑化していく。無秩序にCSSを記述していくと、コードの重複が増え、特定の箇所のスタイルを修正した際に予期せぬ他の箇所に影響が及ぶといった問題が生じやすくなる。これにより、Webサイトの保守性や拡張性が著しく低下する。こうした事態を防ぎ、効率的で管理しやすいCSSを構築するためには、一定のルールや考え方に基づいた「CSS設計」が不可欠となる。本細目では、本格的なプロジェクト制作を前に、CSS設計の基礎的な考え方を導入する。まず、CSSが持つ「カスケード（詳細度に基づくスタイルの優先順位）」と「継承」という特性を再確認し、これらがスタイル管理を難しくする要因にもなり得ることを指摘する。その上で、保守性の高いCSSを書くための基本的な指針として、スタイルの「再利用性」と「予測可能性」を高めることの重要性を説く。具体的には、HTMLの要素に依存しすぎないクラス名の付け方（例えば、見た目や機能に基づいた命名）や、特定のページに限定されない汎用的なパーツ（ボタンや見出しなど）のスタイルを共通化する考え方について解説する。また、一つの巨大なCSSファイルにすべてのスタイルを記述するのではなく、機能や役割（例えば、リセット用、共通レイアウト用、各ページ固有のスタイル用など）に応じて複数のCSSファイルに分割管理することの利点についても触れる。ここでは特定の高度な設計手法論（BEMやOOCSSなど）の詳細には深く立ち入らないが、それらの根底にある「構造化して管理する」という意識を持つことの重要性を強調する。これにより、受講者は単にデザインを再現するだけでなく、将来的な運用や修正を見据えた品質の高いCSSコードを記述するための基礎的な視座を獲得する。この細目で理解すべき範囲は、CSSコードの保守性や再利用性を高めるための基本的な設計思想の重要性を認識し、クラス名の付け方やファイル管理における基礎的な工夫を理解するまで。
		キーワード	① レスポンシブWebデザイン ② メディアクエリ ③ ビューポート ④ リセットCSS ⑤ モバイルファースト
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだ「リセットCSS」と「メディアクエリ」について、実際に手を動かして復習を行ってください。まず、任意のHTMLファイルを作成し、リセットCSS（例えばNormalize.cssなど、授業で紹介したもの）を適用していない状態と適用した状態での表示の違いをブラウザーの検証ツールを用いて確認してください。次に、同じHTMLファイルに対してCSSでメディアクエリを記述し、画面幅が特定のピクセル数（例: 768px）以下になった場合に、背景色や文字サイズが変化するように設定し、ブラウザーのウィンドウ幅を変更して動作を検証してください。これらの実践を通じて、マルチデバイス対応の基礎技術を確実に定着させてください。 ◆次回授業の予習次回からは第4部「実践 Webサイト制作プロジェクト1（シングルカラム）」が始まります。これまで学んだ知識を総動員して、一つの完成されたWebサイトを制作する実践的なフェーズに入ります。テキストを読み、シングルカラムレイアウトの特徴とメリットを理解し、Webサイト制作の一般的なフロー（企画、設計、デザイン、コーディング）について再確認しておいてください。具体的な制作に入る前の全体像を把握しておくことで、スムーズに実習に取り組むことができます。
16	シングルカラムサイトの構築開始	科目の中での位置付け	本授業は、第1部から第3部で習得したHTMLとCSSの基礎知識を統合し、初めての実践的なWebサイト制作プロジェクトを開始する重要な回である。全5回にわたるプロジェクトの初回として、現代のWebデザインにおいて標準的なアプローチである「モバイルファースト」の概念を理解し、シンプルなシングルカラムレイアウトのカフェサイト構築に着手する。具体的には、制作環境の準備とサイトの顔となるヘッダー部分の実装を通して、実践的なコーディングフローの基礎を確立する位置づけにある。
		コマ主題細目	① シングルカラムレイアウトの特徴と制作プロジェクトの概要 ② モバイルファーストの概念と制作環境の構築 ③ ヘッダー部分のHTMLコーディングとCSSスタイリング
		細目レベル	① 本主題では、これから全5回にわたって制作するWebサイトの全体像と、採用するレイアウト構造である「シングルカラムレイアウト」の基礎概念について解説する。まず、シングルカラムレイアウトとは、コンテンツを単一の列（カラム）に縦方向に配置していく構成であることを説明する。このレイアウトは、視線の移動が単純であるためユーザーが情報に集中しやすく、特に画面幅の狭いスマートフォンなどのモバイルデバイスとの親和性が非常に高いという特徴を持つ。一方で、PCのような横長の画面では左右に大きな余白が生まれやすいため、デザイン的な工夫が必要となる点にも触れる。比較対象として、ニュースサイトなどで見られる2カラムや3カラムといったマルチカラムレイアウトについても簡潔に言及し、それぞれの用途の違いを理解させる。次に、本プロジェクトで制作する架空のカフェ「WCB CAFE」のWebサイトの完成イメージを共有し、最終的なゴールを明確にする。このサイトは、トップページに大きなメインビジュアル、店舗のコンセプト紹介、メニューへの誘導、店舗情報などを掲載する構成となる。制作のフローとして、まずはモバイル向けのレイアウトを構築し、その後にPC向けの調整を行うという手順を確認する。本日はその第一歩として、プロジェクトフォルダの作成からヘッダー部分の実装までを行うことを示す。学生には、これから作成するコードが最終的にどのような視覚的表現となるかを常に意識しながら学習に取り組む姿勢を涵養する。この細目で理解すべき範囲は、シングルカラムレイアウトの定義と特徴、および本プロジェクトの全体的な制作フローの把握まで。
			② 本主題では、現代のWeb制作における重要な設計思想である「モバイルファースト」について詳説し、実際の制作環境を構築する。モバイルファーストとは、PC向けのデスクトップデザインからではなく、スマートフォン向けのモバイルデザインから優先して設計・実装を進める手法である。スマートフォンの普及によりWeb閲覧の主役がモバイルデバイスに移行した現状を踏まえ、最も制約の多い小さな画面での表示を最適化することを最優先事項とするこのアプローチの合理性を解説する。PC向けのデザインは、モバイル版をベースに画面幅が広がった際の拡張として捉えることになる。続いて、実践的な制作準備に移る。まず、適切なディレクトリ構造を持つプロジェクトフォルダを作成し、HTMLファイル（index.html）、CSSファイル（style.css）、および画像フォルダ（images）を配置させる。HTMLファイルには、DOCTYPE宣言、htmlタグ、headタグ、bodyタグといった基本構造を記述する。ここで特に重要なのが、head内に記述するviewport（ビューポート）の設定である。viewportメタタグは、モバイルデバイスのブラウザに対してページの表示領域や拡大縮小の挙動を指示するものであり、これがないとスマートフォンではPCサイトが縮小表示されてしまい、モバイル最適化が機能しないことを強調する。また、ブラウザが持つ初期スタイルをリセットし、クロスブラウザでの表示を統一するための基本的なCSS設定についても触れる。最後に、Google Chromeのデベロッパーツール（検証機能）を用いて、PC上でスマートフォンの表示をエミュレートする方法を実践し、コーディング結果を即座にモバイル視点で確認する習慣を身につけさせる。この細目で理解すべき範囲は、モバイルファーストの定義とその必要性、viewportの役割、および基本的なファイル構成とHTML初期構造の記述まで。
			③ 本主題では、準備した環境を用いて、カフェサイトの最上部にあるヘッダー部分の実装をモバイルファーストのアプローチで行う。ヘッダーはサイトのロゴとナビゲーションメニューで構成され、全ページで共通して表示される重要な領域である。まずHTMLのコーディングから開始する。セマンティックなマークアップを意識し、ヘッダー全体を`＜header＞`タグで囲む。その中に、サイトのタイトルとなるロゴ部分を`＜h1＞`タグで、ナビゲーションメニューを`＜nav＞`タグで記述する。ナビゲーションの各項目（Menu, About, Contactなど）は、順序なしリスト`＜ul＞`とリスト項目`＜li＞`を用い、それぞれをリンク`＜a＞`として構造化する。HTML構造が完成したら、CSSによるスタイリングに移る。ここでは、モバイルデバイスでの表示を前提としたスタイルを記述していく。まず、ヘッダー全体の背景色や文字色を指定し、適切な余白（パディング）を設定して視認性を高める。次に、ロゴとナビゲーションの配置を整えるために、第13回で学習したFlexboxを活用する。`＜header＞`要素に`display: flex;`を適用し、`justify-content`プロパティを用いてロゴとナビゲーションを左右に配置したり、あるいはモバイル向けに縦並びの中央揃えにしたりするなど、デザインカンプに基づいたレイアウト調整を行う。ナビゲーションのリストの黒丸を削除する`list-style: none;`や、リンクの下線を消す`text-decoration: none;`といった基本的な装飾プロパティも適用する。この段階ではメディアクエリは使用せず、あくまで基本となるモバイル表示を完成させることに集中させる。デベロッパーツールのエミュレータで常に表示を確認しながら、微調整を繰り返す実践的なコーディングプロセスを体験させる。この細目で理解すべき範囲は、ヘッダー部分のセマンティックなHTML構造化と、モバイル表示を前提とした基本的なCSSスタイリングの実践まで。
		キーワード	① シングルカラムレイアウト ② モバイルファースト ③ ビューポート（viewport） ④ デベロッパーツール ⑤ `＜header＞`要素
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本授業で作成したindex.htmlとstyle.cssのコードを見直し、HTMLの文書構造とCSSのプロパティがどのように関連してブラウザ上に表現されているかを再確認してください。特に、`＜header＞`内の要素がFlexboxを用いてどのように配置されているか、またviewportの設定がモバイル端末での表示にどのような影響を与えているかについて、デベロッパーツールのデバイスモードを切り替えながら検証し、理解を深めておくことが重要です。 ◆次回授業の予習次回は、ヘッダーの下に続くメインコンテンツ部分、具体的にはキャッチコピーと大きなカバー画像の作成を行います。テキストを事前に読み、大きな背景画像の配置方法や、見出しと本文を組み合わせたコンテンツエリアの構築方法について予習しておいてください。特にCSSを用いた背景画像の設定プロパティに着目しておくとスムーズに実習に入れます。
17	メインコンテンツとキャッチコピーの作成	科目の中での位置付け	前回はサイトの導入部であるヘッダーを構築した。今回の第17回授業では、サイトの顔となるメインビジュアルとキャッチコピー、そしてそれに続く主要なコンテンツエリアを作成する。これは、ユーザーの興味を引きつけ、情報を効果的に伝達するための核心的な部分であり、Webページの構造化とスタイリングの実践能力を養う上で極めて重要な位置づけにある。
		コマ主題細目	① キャッチコピーとカバー画像の構造化 ② 背景画像とテキストのスタイリング実践 ③ 主要コンテンツエリアの構築とレイアウト
		細目レベル	① 本主題では、Webサイトのファーストビューにおいて最も重要な要素であるメインビジュアル（カバー画像）とキャッチコピーのHTML構造を構築する方法について解説し、実践する。まず、Webデザインにおけるメインビジュアルの役割について概観する。これは、サイトを訪れたユーザーが最初に目にする部分であり、サイトのコンセプトや雰囲気を瞬時に伝え、ユーザーの興味を惹きつけるための重要な領域であることを理解させる。次に、この領域をHTMLでどのように構造化するかを具体的に解説する。教科書に基づき、特定の意味を持たない汎用的なコンテナであるdiv要素を用いてメインビジュアル全体の領域を定義し、適切なクラス名（例えば「main-visual」など）を付与する方法を示す。この領域内に、サイトのメッセージを伝えるキャッチコピーを配置する。キャッチコピーは、文書の見出しとしての役割を考慮し、適切なレベルの見出しタグ（h2など）を用いてマークアップする必要性を説く。さらに、必要に応じてサブコピーや補足的なテキストを段落タグ（p）などで追加し、情報の階層構造を明確にする。この段階では、画像はまだ表示されず、テキストのみがブラウザーに表示される状態となるが、これはHTMLが文書の「構造」と「意味」を定義する役割に徹しているためであることを強調する。視覚的な表現（デザイン）と文書構造を分離するという、Web標準に基づく制作の基本原則を再確認し、後のCSSによるスタイリングの基盤となる正しいHTML構造を記述する能力を涵養する。この細目で理解すべき範囲は、メインビジュアル領域の役割を理解し、div要素と見出しタグを用いてそのHTML構造を正しく記述できるようになるまで。
			② 本主題では、前項で構築したHTML構造に対し、CSSを用いて具体的なデザインを適用していく方法を詳説する。中心となるのは、領域の背景として画像を配置する技術と、その上に重なるテキストの視認性を高めるための装飾技術である。まず、CSSのbackground-imageプロパティを用いて、div要素の背景に画像を指定する方法を解説する。HTMLのimg要素で画像を配置する場合との違いについて触れ、装飾目的の画像や、テキストの背景として用いる画像はCSSで制御するのが一般的であることを理解させる。続いて、背景画像の表示方法を調整する重要なプロパティ群について解説する。特に、様々な画面サイズに対応するために画像の縦横比を保持したまま領域全体を覆うように表示するbackground-size: coverの使用法や、画像の表示位置を調整するbackground-positionプロパティの役割について、具体的なコード例と表示結果を示しながら解説する。また、背景画像の上に配置されたキャッチコピーなどのテキストが、画像の明度や色味によっては読みづらくなる可能性があることを指摘し、テキストの視認性を確保するための手法を実践する。具体的には、テキストの色（color）、サイズ（font-size）、太さ（font-weight）の調整に加え、必要に応じてテキストに影を落とすtext-shadowプロパティの活用や、テキストの配置位置を調整するための余白（padding）の設定方法などを学ぶ。これらのCSSプロパティを組み合わせることで、魅力的でありながら情報が正しく伝わるメインビジュアルを完成させるための実践的なスキルを習得させる。この細目で理解すべき範囲は、CSSを用いて背景画像を設定・制御し、その上のテキストの視認性と配置を適切に調整できるようになるまで。
			③ 本主題では、メインビジュアルに続く、Webサイトの主要な情報が掲載されるコンテンツエリアの作成について解説し、実践する。教科書のカフェサイトの例に基づき、「About Cafe（カフェについて）」や「Menu（メニュー紹介）」といった具体的なセクションを構築していく。まず、各セクションを論理的なまとまりとして定義するために、クラス名を付与したdiv要素を用いてグループ化する方法を復習し、実践する。各セクション内には、それぞれの内容を表す見出しと、具体的な情報を伝える本文（段落）、そして関連する画像を配置する。この際、HTMLの文書構造として、見出しの階層（h2の次にh3が来るなど）が適切に維持されているかに注意を払うよう指導する。次に、作成したHTML構造に対してCSSを適用し、レイアウトと装飾を整えていく。ここでは、これまでに学んだボックスモデルの概念が重要となる。各セクション間の区切りを明確にし、視覚的なゆとりを持たせるために、適切な余白（marginやpadding）を設定する方法を解説する。特に、上下の余白を統一することで、サイト全体にリズム感と統一感を生み出すデザインの基本テクニックについて触れる。また、セクション内の要素、例えば見出しと本文の間隔や、画像とテキストの配置バランスなどを調整し、ユーザーにとって読みやすく、情報が整理されたレイアウトを実現するためのCSS記述を実践する。クラスを用いて複数のセクションに共通のスタイルを効率的に適用する方法についても再確認し、保守性の高いCSS設計の基礎を固める。この細目で理解すべき範囲は、複数のコンテンツセクションを適切なHTML構造で記述し、ボックスモデルに基づいたCSSレイアウトを用いて余白や配置を整えられるようになるまで。
		キーワード	① メインビジュアル ② 背景画像プロパティ ③ div要素 ④ セクション ⑤ ボックスモデル
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で作成したメインビジュアルとコンテンツエリアのHTMLとCSSのコードを改めて見直し、それぞれの記述がブラウザー上でどのように表示に反映されているかを詳細に確認してください。特に、CSSによる背景画像の設定（`background-image`, `background-size`など）と、ボックスモデルに基づいた余白の調整（`margin`, `padding`）が、意図した通りのレイアウトを実現できているか重点的に復習してください。 ◆次回授業の予習次回は、作成したWebページにインタラクティブな要素を追加し、ページのフッター部分を作成してシングルカラムサイトの基本構造を完成させます。テキストを事前に読んでおいてください。特に、マウスオーバー時のスタイル変化（ホバーエフェクト）を実現するCSSの擬似クラス`:hover`の基本的な使い方と、Webサイトにおけるフッターの役割について予習しておくと、スムーズに実習に入れます。
18	インタラクティブ要素とフッターの作成	科目の中での位置付け	本コマは、第4部「実践 Webサイト制作プロジェクト1」の中盤に位置し、前回までに構築した静的なメインコンテンツに対し、ユーザーの操作に対する視覚的フィードバック（インタラクティブ要素）を加える重要な回である。また、Webページの終端であるフッターを完成させることで、シングルカラムレイアウトの基本的な構造記述を完了させ、次回のレスポンシブ対応へと接続する役割を担う。
		コマ主題細目	① インタラクティブ要素の基礎とホバーエフェクトの実装 ② 心地よいアニメーションとデザインの原則 ③ フッターの役割と構造化・スタイリング
		細目レベル	① Webサイトにおいて、ユーザーの操作（アクション）に対してページが何らかの反応を示すことは、ユーザビリティを向上させる上で不可欠である。これを「インタラクティブ要素」と呼び、本細目ではその基礎概念と実装方法について解説する。静的な印刷物とは異なり、Webページではユーザーがマウスカーソルを動かしたりクリックしたりすることで情報との対話が生まれる。その中で最も基本的かつ頻繁に用いられるのが、マウスカーソルが要素の上に乗った状態、すなわち「ホバー（hover）」時の変化である。授業ではまず、HTML要素の状態を特定するためのCSSの「擬似クラス」という概念を導入し、その代表例として `:hover` を説明する。これは、特定の要素に対してカーソルが乗った瞬間にのみ適用されるスタイルを定義するために用いられる。続いて、教科書で進行中のカフェサイト制作プロジェクトを題材とし、ナビゲーションメニューや「メニューを見る」といったボタン要素に対して、実際にホバーエフェクトを実装していく。具体的には、通常時のCSS記述に加え、`a:hover` や `.button:hover` といったセレクタを用いて、カーソルオン時の背景色や文字色が反転するようなスタイル変化を記述する実践を行う。さらに、単に色が切り替わるだけでは唐突な印象を与えるため、変化を滑らかにするための `transition` プロパティを導入する。このプロパティが、変化にかかる時間（デュレーション）や変化の対象となるCSSプロパティを指定するものであることを解説し、例えば `transition: all 0.3s;` と記述することで、すべてのスタイルの変化が0.3秒かけて滑らかに行われる様子をデモンストレーションする。これらの実装を通して、動的なWeb表現の基礎を習得させる。この細目で理解すべき範囲は、CSSの擬似クラス`:hover`の概念と基本的な記述方法、および`transition`プロパティを用いた滑らかなスタイル変化の実装方法まで。
			② 前細目で技術的な実装方法を学んだホバーエフェクト等のアニメーションについて、本細目では「ユーザーにとって心地よい体験とは何か」というデザインの観点から学術的に考察を深める。Webデザインにおけるアニメーションは、単なる装飾ではなく、ユーザーの操作に対する適切なフィードバックを提供し、認知を助けるための機能的な要素であるべきという前提を解説する。過度な動きや長すぎるアニメーションは、ユーザーの操作を妨げ、ストレスを与える要因となり得るため、抑制の効いたデザイン判断が求められる。授業では、心地よいアニメーションを実現するための具体的なパラメータとして、適切な変化時間（デュレーション）と変化の加速度（イージング）について詳説する。一般的に、ボタンのホバーのような単純なフィードバックであれば、人間が瞬時に知覚できる0.1秒から0.3秒程度の短時間が適切であることを説明する。また、自然界の物理法則に基づかない完全に一定速度の動き（linear）は機械的で不自然に感じられることが多いため、動き出しがゆっくりで中間が速く、終わりがまたゆっくりになるような、加速と減速を伴うイージング（例えば `ease-in-out` など）が自然で心地よく感じられる理由を認知科学的な側面から触れる。実践的な演習として、先ほど実装したボタンの `transition` プロパティの値を調整する課題を行う。秒数を0.1秒、0.5秒、1.0秒と変更してみたり、タイミング関数を `linear` や `ease` に変更してみたりすることで、体感速度や印象がどのように変化するかを比較検証させる。このプロセスを通じて、自身の感覚だけでなく、客観的なデザイン原則に基づいて適切なアニメーションを設定する能力を涵養する。この細目で理解すべき範囲は、Webデザインにおけるアニメーションの役割と目的、適切な変化時間とイージングの選択基準、およびユーザー体験を阻害しないためのデザイン原則まで。
			③ Webページの最下部に位置する「フッター（footer）」は、ページの終端を示すとともに、サイト全体に関わる補助的な情報を提供する重要な領域である。本細目では、フッターの役割を理解し、適切なHTML構造とCSSによるスタイリングを行う方法について解説する。まず、フッターに含めるべき一般的なコンテンツとして、著作権表示（コピーライト）、サイトマップ、問い合わせ先、SNSアカウントへのリンク、プライバシーポリシーなどが挙げられることを概観し、ユーザーがメインコンテンツを読み終えた後に、次の行動（他ページへの回遊やコンタクト）を促すための受け皿としての機能を果たすべきであることを説明する。次に、HTML5から導入されたセマンティックなタグである `＜footer＞` 要素を用いて、フッター領域を構造化する実践を行う。カフェサイトの制作例に基づき、フッター全体を `＜footer＞` タグで囲み、その中にロゴ画像、店舗情報（住所、電話番号）、SNSアイコンのリスト、そして最下部のコピーライト表記を配置していく。その際、コピーライト表記で用いられる「©」マークのような特殊文字は、HTML内ではそのまま記述せず、実体参照と呼ばれる形式（例えば `©`）で記述する必要があることを解説し、正しい記述方法を習得させる。構造化が完了したら、CSSを用いてスタイリングを行う。フッターはページの下部で視覚的な区切りとなるよう、背景色を暗めに設定したり、メインコンテンツとの間に十分な余白（マージンやパディング）を設けたりすることが一般的である。また、内部の要素、例えばロゴとSNSアイコンを横並びにするためにFlexboxを活用するなど、これまで学んだレイアウト技術を総動員して、デザインカンプ通りの整ったフッターを完成させる手順を詳説する。この細目で理解すべき範囲は、フッターの役割と構成要素、HTML5の`＜footer＞`タグを用いた構造化、特殊文字の実体参照記述、およびCSSによるフッター領域のスタイリングとレイアウト調整まで。
		キーワード	① インタラクティブ要素 ② 擬似クラス（:hover） ③ transitionプロパティ ④ イージング ⑤ フッター（footer要素）
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回学んだホバーエフェクトを、授業で扱ったボタン以外の要素（例えばテキストリンクや画像など）にも適用してみること。その際、`transition`の秒数やイージングの値を様々に変更し、動きの印象がどのように変わるか体感的に理解を深めること。また、作成したフッターのHTML構造を見直し、適切なタグ付け、特に特殊文字の記述が正しく行われているか確認すること。 ◆次回授業の予習次回は、ここまで作成してきたシングルカラムのWebサイトを、スマートフォンなどの異なる画面幅のデバイスでも適切に表示されるように調整する「レスポンシブWebデザイン」の基礎を学ぶ。テキストを読み、レスポンシブデザインが必要とされる背景と、それを実現するためのCSSの重要な機能である「メディアクエリ」の基本的な概念について予習しておくこと。
19	レスポンシブWebデザイン対応（基礎）	科目の中での位置付け	本授業は、全30回にわたるWebサイト制作カリキュラムの第19回目にあたり、第4部「実践 Webサイト制作プロジェクト1（シングルカラム）」の第4回目となる。これまでの授業で構築してきたシングルカラムのカフェサイトに対し、多様なデバイス環境での閲覧に対応させるための重要な工程である。具体的には、スマートフォンとPCでレイアウトやスタイルを最適化するレスポンシブWebデザインの基礎技術を導入し、現代のWeb標準に準拠したサイト制作の実践的なスキルを修得する段階に位置づけられる。
		コマ主題細目	① レスポンシブWebデザインの概念とメディアクエリの基礎 ② モバイルファーストに基づくスマートフォン向けスタイルの調整 ③ メディアクエリを用いたPC向けスタイルの適用と表示確認
		細目レベル	① 本細目では、現代のWebサイト制作において不可欠な「レスポンシブWebデザイン」の基本概念とその実現技術について学術的な視点から解説する。まず、インターネット利用端末の多様化に伴い、単一のHTMLソースコードで、スマートフォン、タブレット、PCなど異なる画面サイズのデバイスに応じて表示を最適化する必要性が生じた背景を概観する。これがレスポンシブWebデザインの根本的な目的であり、ユーザー体験（UX）の向上に直結する重要な要素であることを理解させる。次に、このレスポンシブ対応を実現するための中核的な技術であるCSSの「メディアクエリ（Media Queries）」について詳説する。メディアクエリは、ブラウザが特定の条件（主に画面の幅やデバイスの種類など）を満たした場合にのみ、指定されたCSSルールを適用する仕組みである。授業では、メディアクエリの基本的な構文規則、すなわち「@media」ルールとその後に続くメディアタイプ（screenなど）およびメディア特性（min-widthやmax-widthなど）の記述方法を具体的に示す。例えば、画面幅が特定のピクセル数以上の場合にのみスタイルを適用するといった条件分岐の記述方法を、実例を交えて解説する。また、HTMLのhead内でビューポート（viewport）を設定することの重要性についても触れる。ビューポートは、モバイルデバイスにおいてブラウザがページのスケールやサイズをどのように制御するかを指示するものであり、メディアクエリを正しく機能させるための前提条件となる。学生には、これらの理論的背景と基本的な構文を習得させ、次項以降の実践的なスタイル調整への基盤を構築させる。この細目で理解すべき範囲は、レスポンシブWebデザインの目的と、それを実現するためのメディアクエリおよびビューポートの基本的な構文規則を理解するまで。
			② 本細目では、前項で学んだメディアクエリの知識を基に、実際のWebサイト制作における具体的なアプローチとして「モバイルファースト」の考え方とその実践方法について解説する。モバイルファーストとは、画面幅の狭いスマートフォン向けのスタイルを基準（ベース）として先に設計・記述し、その後、画面幅が広くなるにつれて必要なスタイルをメディアクエリを用いて追加・上書きしていく制作手法である。この手法は、モバイル端末での閲覧が主流となった現代において、コンテンツの優先順位を整理し、表示速度の向上やコードの簡潔化に寄与する効率的なアプローチとされる。授業では、これまで作成してきたシングルカラムのカフェサイトを題材とし、まずスマートフォンでの表示状態を確認する。その上で、モバイル環境において最適とは言えない箇所、例えば余白が大きすぎる、文字サイズが適切でない、要素間の距離が間延びしているなどの問題点を特定する。これらの問題点に対し、メディアクエリの外側（つまり、すべてのデバイスに適用されるベースのCSS）において、スマートフォンでの閲覧に最適化されたスタイルを記述していく過程を実演する。具体的には、全体的なフォントサイズの調整、セクション間のマージンやパディングの見直し、あるいは特定の要素の表示・非表示の切り替えなどが含まれる。学生には、自身の制作データを用いて同様の調整を行わせ、モバイル端末での表示を第一に考える設計思想を体感させるとともに、ベースとなるCSSを強固にする能力を涵養する。この細目で理解すべき範囲は、モバイルファーストの概念に基づき、メディアクエリを使用しないベースのCSSにおいて、スマートフォン表示時のレイアウトやスタイルを適切に調整する手法を習得するまで。
			③ 本細目では、モバイルファーストで構築されたベースのスタイルに対し、メディアクエリを用いてPCなどの大きな画面幅向けのスタイルを追加・調整する方法を詳説する。まず、レイアウトが切り替わる境界線となる「ブレークポイント」の概念を説明し、一般的なタブレットやPCの画面幅を考慮した適切な値を設定する必要性を理解させる。授業では、例えば画面幅が768ピクセル以上の場合をPC向け表示の基準とし、`@media screen and (min-width: 768px) { ... }` というメディアクエリのブロック内に、PC画面で適用したいスタイルを記述していく手順を示す。具体的には、スマートフォン向けには画面幅いっぱいに表示されていたコンテンツに対し、PC画面では適切な最大幅（max-width）を設定して中央揃えにする、あるいは余白（marginやpadding）を大きくしてゆったりとしたレイアウトにする、といった調整を行う。ヘッダーのナビゲーション、メインビジュアルの高さ、フッターのレイアウトなど、各セクションにおける具体的な調整例を教科書の内容に沿って実演し、CSSのカスケード（上書き）の仕組みを利用してスタイルが適用される様子を解説する。最後に、記述したCSSが正しく機能しているかを確認するため、ブラウザのデベロッパーツール（検証機能）に搭載されているデバイスエミュレーションモードの利用方法を指導する。これにより、実機がなくても様々な画面幅での表示をシミュレーションし、意図した通りにレイアウトが切り替わっているかを検証するスキルを習得させる。学生には、自身のサイトでPC向けの調整を行い、複数の画面幅での表示確認を通して、レスポンシブ対応の実装を完了させる。この細目で理解すべき範囲は、メディアクエリを用いてPC向けのスタイルを記述し、デベロッパーツールを活用して異なるデバイス環境での表示確認と修正を行う一連のプロセスを理解するまで。
		キーワード	① レスポンシブWebデザイン ② メディアクエリ ③ モバイルファースト ④ ブレークポイント ⑤ ビューポート
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本授業で学習したメディアクエリの基本構文とモバイルファーストのアプローチを再確認すること。自身の制作したカフェサイトのCSSファイルを見直し、ベースとなるスタイルがスマートフォン向けに最適化されているか、また、メディアクエリ内に記述したPC向けのスタイルが意図した画面幅で正しく適用されているかを、ブラウザのデベロッパーツールを用いて入念に検証すること。表示崩れや調整不足の箇所があれば修正を行い、レスポンシブ対応を完成に近づけておくこと。 ◆次回授業の予習次回は、これまでに作成したシングルカラムサイトの最終的な完成と調整を行う。サイト全体の表示確認のポイントや、ファビコン（Webサイトのアイコン）の設定方法について記述された箇所を事前に精読しておくこと。また、自身のサイトにおいて、微調整が必要な余白やフォントサイズ、誤字脱字などがないかを確認し、修正すべき点をリストアップして授業に臨む準備を整えておくこと。
20	シングルカラムサイトの完成と調整	科目の中での位置付け	本コマは、第4部「実践 Webサイト制作プロジェクト1」の最終回であり、これまでに構築してきたシングルカラムレイアウトのWebサイトを完成させる重要な段階に位置づけられる。ヘッダー、コンテンツ、フッターといった各要素の統合を経て、全体のデザイン調整、ファビコンの設定、そして複数の環境での表示確認といった、Webサイトを一般公開できる品質に仕上げるための最終工程を実践的に学ぶ。これにより、一つのWebサイト制作プロジェクトを完遂する能力を養う。
		コマ主題細目	① サイト全体のデザイン調整と最終確認 ② Webサイトのアイデンティティ：ファビコンの設定 ③ ブラウザ検証とコードの妥当性確認
		細目レベル	① 本主題では、第16回から第19回にかけて段階的に構築してきたシングルカラムWebサイトの各構成要素（ヘッダー、メインビジュアル、コンテンツエリア、フッター）が統合された状態において、全体のデザインバランスと整合性を最終確認し、微調整を行うプロセスを詳説する。まず、デザインカンプと実際にコーディングされたWebページを見比べ、意図したデザインが忠実に再現されているかを検証させる。特に、要素間の余白（marginおよびpadding）の設定が適切か、文字のサイズや行間（line-height）が読みやすさを考慮して設定されているか、配色が全体のトーン＆マナーと合致しているかといった点に重点を置く。授業の進行としては、学生各自が制作したWebサイトをブラウザで表示し、ブラウザに搭載されているデベロッパーツール（開発者ツール）を活用して、リアルタイムでCSSプロパティの値を変更しながら最適な調整を行う手法を実践させる。例えば、セクション間のマージンが狭すぎて窮屈な印象を与えていないか、あるいは広すぎて間延びしていないかなどを視覚的に確認し、その場で数値を修正して最適なバランスを探求させる。また、レスポンシブ対応に関しても、PC表示とスマートフォン表示の切り替えがスムーズに行われ、それぞれのデバイスにおいてデザインが崩れていないかを再確認させる。この過程を通じて、単に要素を配置するだけでなく、ユーザーにとって快適な閲覧体験を提供するための「デザインの洗練」という観点を涵養する。最終的には、細部まで意識が行き届いた、完成度の高いシングルカラムWebサイトとして仕上げることを目標とする。この細目で理解すべき範囲は、デザインカンプに基づいたコーディングの完了と、デベロッパーツールを用いた細部のデザイン調整の実践まで。
			② 本主題では、Webサイトのブランディングとユーザーの認知向上において重要な役割を果たす「ファビコン（favicon）」について解説し、その実装方法を習得させる。ファビコンとは、ブラウザのタブ、ブックマークバー、履歴リストなどに表示される小さなアイコンのことであり、Webサイトのシンボルとして機能するものであることを学術的な視点から説明する。まず、ファビコンに適した画像形式について解説する。伝統的な「.ico」形式に加え、現在では「.png」形式なども広くサポートされている現状を理解させ、それぞれの特性や推奨される画像サイズ（例えば16x16ピクセル、32x32ピクセルなど）について具体的に言及する。授業では、あらかじめ用意されたロゴ画像などを基に、適切なサイズと形式でファビコン用の画像ファイルを作成する手順を概観する。続いて、作成したファビコン画像をHTML文書に関連付けるための具体的なマークアップ方法を詳説する。HTMLの`＜head＞`セクション内に`＜link＞`タグを用いて記述する方法、具体的には`rel`属性に「icon」または「shortcut icon」を指定し、`href`属性に画像ファイルへのパスを記述する構文を解説し、学生自身の制作サイトに実装させる。また、異なるデバイスやOS（例えばiOSのホーム画面用アイコンなど）に対応するための追加的な設定についても触れ、Webサイトが様々な環境で適切にアイデンティティを示せるように配慮することの重要性を説く。この実践を通じて、Webサイト制作における細部へのこだわりが、プロフェッショナルな品質につながることを理解させる。この細目で理解すべき範囲は、ファビコンの役割と重要性の理解から、適切な画像形式の選定、そしてHTMLへの具体的な実装方法まで。
			③ 本主題では、完成したWebサイトが特定の環境だけでなく、多様な利用環境において意図通りに機能し、表示されることを保証するための検証作業について詳説する。Webサイトは、ユーザーが利用するブラウザ（Google Chrome, Safari, Microsoft Edge, Firefoxなど）の種類やバージョン、OSによって、表示結果や動作が微妙に異なる場合があることを前提知識として再確認する。その上で、主要な複数のブラウザを用いて実際の表示を確認する「クロスブラウザチェック」の重要性と具体的な実施方法について解説する。学生には、自身の開発環境以外のブラウザでも表示を確認し、レイアウト崩れや動作不良がないかを検証させる。もし問題が発見された場合には、デベロッパーツールなどを駆使して原因を特定し、CSSハックなどの手法も視野に入れつつ修正を行うトラブルシューティングの基礎的なプロセスを体験させる。次に、記述したHTMLとCSSのコードが、W3C（World Wide Web Consortium）が定めるWeb標準の仕様に準拠しているかを機械的にチェックする「バリデーション（Validation）」について解説する。オンラインのバリデーションサービス（The W3C Markup Validation Serviceなど）を紹介し、自身の作成したHTMLファイルやCSSファイルをアップロード、もしくはURLを入力して検証を行う手順を実践させる。バリデーションによって検出された構文エラーや警告の意味を理解し、それらを修正することで、より堅牢でアクセシビリティ（利用しやすさ）の高いWebサイトを構築する姿勢を養う。これら一連の検証作業は、Webサイトの品質を担保するための不可欠な工程であることを深く認識させる。この細目で理解すべき範囲は、クロスブラウザチェックの必要性と実施方法の理解、およびバリデーションツールを用いたコードの妥当性確認と基本的なエラー修正の実践まで。
		キーワード	① ファビコン (Favicon) ② クロスブラウザチェック (Cross-browser testing) ③ バリデーション (Validation) ④ デベロッパーツール ⑤ デザインカンプ (Design Comp)
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で学んだ最終調整のプロセスに基づき、各自が制作したシングルカラムWebサイトを完成させてください。特に、デベロッパーツールを用いた余白やフォントサイズの微調整を行い、デザインカンプとの整合性を高めること。また、独自のファビコンを作成し、HTMLに正しく実装してブラウザのタブに表示されるか確認すること。さらに、可能な範囲で複数のブラウザでの表示確認と、W3Cバリデーションサービスを用いた構文チェックを行い、エラーがあれば修正して提出可能な状態に仕上げてください。 ◆次回授業の予習次回からは、より複雑なレイアウト構造を持つ「2カラムレイアウト」の制作プロジェクトが始まります。テキストを読み、2カラムレイアウトの基本的な構造と、それを実現するためにCSSのFlexboxがどのように活用されるかについて予習しておいてください。シングルカラムとの構造的な違いを意識しながら読むことで、次回の実習がスムーズに進むでしょう。
21	2カラムレイアウトの構築	科目の中での位置付け	本講義は、第1部から第3部で習得したHTMLとCSSの基礎知識、および第4部でのシングルカラムサイト制作の経験を基盤とし、より複雑で実用的なWebレイアウト構築へとステップアップする重要な回である。本回から始まる第5部では、Webサイトで頻繁に用いられるマルチカラムレイアウト、特に2カラムレイアウトの構築手法を体系的に学習し、情報量の多いコンテンツを効果的に整理・表示するための応用的な実装能力を涵養することを目的とする。
		コマ主題細目	① 2カラムレイアウトの概念とHTML構造設計 ② コンテンツのマークアップとベースCSSの適用 ③ Flexboxを用いたレイアウト配置の実装
		細目レベル	① Webサイトのレイアウトにおいて、情報を単一の列で提示するシングルカラムレイアウトに対し、画面を垂直方向に分割して複数の列を配置する手法をマルチカラムレイアウトと呼称する。その中でも最も基本的かつ広範に利用されているのが、画面を主要なコンテンツ領域（メインエリア）と、補助的な情報やナビゲーションを配置する領域（サイドバー）の二つに分割する2カラムレイアウトである。本細目では、まず2カラムレイアウトの特性について、情報デザインの観点から解説する。このレイアウトは、ニュースサイトやブログ、ECサイトの商品一覧ページなど、主たる情報と並行してカテゴリー一覧、新着記事、広告バナーなどを同時に提示する必要がある場合に適している。ユーザーの視線は一般的に左上から右下へと移動する傾向があるため、重要なメインコンテンツを左側に、補助的なサイドバーを右側に配置する構成が一般的であるが、目的やデザイン意図に応じてその逆の配置も可能であることを理解させる。次に、このような視覚的なレイアウトを適切なHTML文書構造として表現するための設計手法について論じる。HTML5においては、文書内の各要素の意味（セマンティクス）を明確にするためのタグが用意されている。2カラムレイアウトを構築する際には、ページ全体の主要な内容を含む領域に対して`＜main＞`タグを、そのページの本筋とは独立した補足情報（例えば、関連記事リンクや広告など）を含む領域に対して`＜aside＞`タグを使用することが推奨される。これらのタグを適切に使用することは、検索エンジンがページの構造を正しく理解するのを助ける（SEO効果）だけでなく、スクリーンリーダーなどの支援技術を利用するユーザーにとってもアクセシビリティを向上させる上で極めて重要である。講義では、教科書に示されたニュースサイトのワイヤーフレームを例に、どの部分をメインエリアとし、どの部分をサイドバーとするか、そしてそれらをHTMLのどのタグでマークアップすべきかについて、具体的な構造図を示しながら論理的に解説を進める。この細目で理解すべき範囲は、2カラムレイアウトの特性と用途、およびそれを実現するためのセマンティックなHTML構造設計の原則まで。
			② 前細目で設計したHTML構造に基づき、実際にコードを記述していくプロセスを解説する。ここでは、ニュースサイトの記事一覧ページを想定し、具体的なコンテンツのマークアップを行う。まず、全体の骨格となるHTMLファイルを用意し、ヘッダー（`＜header＞`）やフッター（`＜footer＞`）といった全ページ共通の要素を記述する。これらは第4部で学習した内容の復習となるが、Webサイト全体の一貫性を保つ上で不可欠な要素である。続いて、今回の核心である2カラム部分の構築に移る。メインエリア（`＜main＞`）内には、複数のニュース記事概要を配置する。それぞれの記事は独立したコンテンツとして完結しているため、`＜article＞`タグを用いてマークアップし、その内部に見出し（`＜h2＞`等）、概要テキスト（`＜p＞`）、詳細ページへのリンク（`＜a＞`）などを適切に配置する構造とする。一方、サイドバー（`＜aside＞`）内には、例えばカテゴリー一覧や月別アーカイブなどのリンクリストを配置することを想定し、`＜nav＞`タグやリストタグ（`＜ul＞`, `＜li＞`）を用いたナビゲーション構造を作成する。さらに、これらのメインエリアとサイドバーを包含する親要素（ラッパーまたはコンテナと呼ばれることが多い）として`＜div＞`タグなどを設置し、後述するCSSでのレイアウト調整の基盤とする。HTMLの記述が完了した後、CSSによる基本的なスタイルの適用について解説する。ブラウザが初期設定で持っているスタイル（ユーザーエージェントスタイルシート）による意図しない表示崩れを防ぐためのリセットCSSの適用や、サイト全体で共通して使用するフォントファミリー、基本となる文字色や背景色の設定を行う。また、各要素が持つ余白（marginやpadding）の初期値を調整し、レイアウト作業をスムーズに進めるための下準備を整える。この段階ではまだ要素は縦に並んだ状態であるが、正しい文書構造と基本的なスタイルが適用されていることをブラウザの開発者ツール等を用いて確認させる。この細目で理解すべき範囲は、設計に基づいた適切なHTMLタグによるコーディングと、レイアウト調整の前段階となる基本的なCSS適用の手法まで。
			③ 本細目では、前細目で作成したHTML構造に対し、CSSのFlexbox（Flexible Box Layout Module）を適用して、メインエリアとサイドバーを横並びにする具体的な実装手法を詳説する。第3部で学習したFlexboxの基礎知識を応用し、実践的なレイアウト構築能力を養う。まず、メインエリアとサイドバーを直接内包している親要素（コンテナ）に対して、`display: flex;`プロパティを指定する。これにより、その直下の子要素であるメインエリアとサイドバーがフレックスアイテムとなり、デフォルトでは横一列に並ぶ挙動を示すことを確認させる。次に、それぞれのカラムの幅を指定する方法について解説する。Webページのレイアウトでは、閲覧環境の画面幅に応じて柔軟に幅が変化するリキッドレイアウトが一般的であるため、幅の指定には固定値（px）ではなく相対値（%）を用いる手法を中心に説明する。例えば、メインエリアの幅（`width`プロパティ）を「70%」、サイドバーの幅を「30%」のように指定することで、親要素の幅に対する割合でそれぞれの領域を確保することができる。また、`flex-basis`プロパティを用いてフレックスアイテムの基本幅を指定する方法や、`flex-grow`、`flex-shrink`プロパティを用いて余白の分配や縮小率を制御する手法についても触れ、より柔軟なレイアウト調整の可能性を示す。さらに、二つのカラムの間に適切な余白を設ける方法として、従来は片方の要素に`margin`を設定する手法が用いられてきたが、現在のCSSではフレックスコンテナに対して`gap`プロパティを使用することで、アイテム間の余白を簡潔かつ直感的に指定できることを解説し、その実装を行う。最後に、`justify-content`プロパティを用いて横方向の配置位置（左寄せ、中央揃え、両端揃えなど）を調整する方法や、`align-items`プロパティを用いて垂直方向の揃え位置（上揃え、中央揃え、ストレッチなど）を調整する方法についても復習を兼ねて解説し、意図した通りの2カラムレイアウトを完成させる。この細目で理解すべき範囲は、Flexboxを用いた親要素と子要素の関係性の設定、パーセンテージによる幅指定、およびgapプロパティ等による余白調整を含む横並びレイアウトの実装技術まで。
		キーワード	① 2カラムレイアウト ② メインエリア ③ サイドバー ④ セマンティックHTML ⑤ Flexbox
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本授業で作成したニュースサイトのHTMLファイルとCSSファイルを見直し、特に2カラムレイアウトを実現するために、どの要素に`display: flex;`を適用し、子要素の幅をどのようにパーセンテージで指定したかを確認すること。また、`＜main＞`タグと`＜aside＞`タグが持つ意味的な役割について、教科書の記述を再読し理解を深めておくこと。 ◆次回授業の予習次回は、今回作成した2カラムレイアウトをスマートフォンなどの狭い画面で閲覧した際に、自動的に1カラムに切り替わるようなレスポンシブ対応を行う。そのために必要なCSSの機能である「メディアクエリ」の基本的な書き方と、ブレイクポイントの概念について、テキストで学習した該当箇所を読み返し、予習しておくこと。
22	2カラムサイトのレスポンシブ対応	科目の中での位置付け	第5部では、応用的なレイアウト手法として2カラムレイアウトの構築を学んでいる。前回作成したPC向けの2カラム構造を基礎とし、本コマではスマートフォンなどの狭い画面幅においても適切な表示となるよう、メディアクエリを用いたレスポンシブ対応を行う。これにより、マルチデバイス環境に対応した実践的なWebサイト制作能力を養う、応用プロジェクトの中核となる回である。
		コマ主題細目	① 2カラムレイアウトにおけるレスポンシブデザインの考え方 ② メディアクエリを用いたレイアウトの切り替え実装 ③ 各デバイス向け表示の最適化と検証
		細目レベル	① 本主題では、前回の授業で構築したPC向けの2カラムレイアウトを、スマートフォンなどの画面幅が狭いデバイスで閲覧した際に、適切な表示へと変化させるための基本的な考え方について概観する。第4部で学んだシングルカラムサイトにおけるレスポンシブ対応の知識を前提とし、より複雑な構造を持つ2カラムレイアウトにおいて、どのように表示を最適化すべきかを考察する。具体的には、PC画面では横並び（2カラム）で表示されているメインコンテンツエリアとサイドバーエリアを、スマートフォン画面では縦並び（1カラム）に再構成するアプローチについて解説する。これは、狭い画面で無理に2列を表示させると、各カラムの幅が極端に狭くなり、可読性や操作性が著しく低下するためである。このレイアウト変更を実現するために、CSSのメディアクエリ技術を再確認し、どの画面幅を境にレイアウトを切り替えるかという「ブレークポイント」の設定について検討する。教科書に基づき、スマートフォン向けの表示を基準とするモバイルファーストの視点に立ち、ブレークポイントを例えば767px以下といった具体的な数値で設定する意義を理解させる。また、HTMLの文書構造上、先に記述された要素が上に表示されるという原則を踏まえ、縦並びになった際にメインコンテンツとサイドバーがどのような順序で表示されるか、その論理的な構造についても再確認を促す。学生は、単に見た目を変えるだけでなく、ユーザーの利用状況に応じた最適な情報提示の在り方を設計する視点を持つことが求められる。この細目で理解すべき範囲は、2カラムから1カラムヘのレイアウト変更の必要性と、それを実現するためのメディアクエリおよびブレークポイントの基本的な設計思想を把握するまで。
			② 本主題では、前項で確認した設計思想に基づき、実際にCSSを記述して2カラムレイアウトのレスポンシブ対応を実践する。ここでは、モバイルファーストのアプローチを採用するため、メディアクエリの外側にスマートフォン向けのスタイルを記述し、メディアクエリの内側にPC向けのスタイルを記述するという手順を詳説する。まず、スマートフォン向けの基本スタイルとして、メインコンテンツとサイドバーを包む親要素（コンテナ）に対し、Flexboxの指定を行わない、あるいは解除することで、要素が自然な文書構造に従って縦積みに表示される状態を確認する。その上で、それぞれの要素の幅（width）を画面幅いっぱい（例えば100%）に設定し、狭い画面でも内容が十分に読み取れるように調整する具体的な記述方法を学ぶ。次に、ブレークポイント（例えば767pxより大きい画面幅）を設定したメディアクエリ内に、PC向けのスタイルを追記する。ここでは、親要素に対して`display: flex;`を指定し、要素を横並びにするFlexboxの機能を有効化する。さらに、メインコンテンツエリアとサイドバーエリアの幅を、例えばそれぞれ70%と26%といった具体的なパーセンテージで指定し、両者の間に適切な余白が生まれるように`justify-content: space-between;`などのプロパティを活用して配置を調整する手法を解説する。この一連の実装プロセスを通じて、同一のHTML構造に対し、CSSの記述のみでデバイスに応じた劇的なレイアウト変更を実現する技術を習得させる。学生は、メディアクエリの内と外でどのプロパティを上書きすべきかを理解し、効率的で管理しやすいCSS設計を行う能力を涵養する必要がある。この細目で理解すべき範囲は、メディアクエリを用いたFlexboxの適用と解除、および各カラムの幅指定によるレイアウトの切り替え実装を完了させるまで。
			③ 本主題では、大枠のレイアウト切り替えが完了した後、各デバイスでの表示品質を高めるための細部の調整と、デベロッパーツールを用いた検証方法について解説する。レイアウトが2カラムから1カラムに変化する際、要素間の余白（マージン）の扱いが重要となる。スマートフォン表示（1カラム）の際には、縦に並んだ要素間に適切な間隔を空けるため、各要素の下部に`margin-bottom`を設定する必要がある。一方、PC表示（2カラム）の際には、横並びとなるため、この下部余白が不要となる場合や、逆にカラム間の横方向の余白が必要となる場合がある。これらの余白設定をメディアクエリの内外で適切に切り替え、どちらの表示においてもバランスの取れたデザインを実現する方法を詳説する。また、文字サイズや行間についても、PCの大画面とスマートフォンの小画面では最適な値が異なる可能性があるため、必要に応じてメディアクエリを用いた微調整を行う視点を持つことの重要性を説く。実装した結果は、ブラウザのデベロッパーツール（検証機能）を用いて、様々な画面幅をシミュレートしながら厳密に確認する必要がある。特にブレークポイント付近での表示崩れがないか、意図した通りにスタイルが切り替わっているかを重点的にチェックする手順を実践する。可能であれば、実際のスマートフォン実機を用いた確認も推奨し、エミュレータと実機での表示差異についても意識を向けさせる。これらの調整と検証のプロセスを通じて、プロフェッショナルなWebサイト制作に不可欠な、細部へのこだわりと品質管理の姿勢を定着させる。この細目で理解すべき範囲は、余白等の細部調整による表示の最適化を行い、デベロッパーツールを活用してマルチデバイスでの表示検証を完了させるまで。
		キーワード	① レスポンシブWebデザイン ② メディアクエリ ③ ブレークポイント ④ Flexbox ⑤ モバイルファースト
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業では、2カラムレイアウトのWebサイトに対して、メディアクエリを用いたレスポンシブ対応を実装しました。特に、モバイルファーストの考え方に基づき、基本CSSでスマートフォン向けの縦積みレイアウトを定義し、メディアクエリ内でPC向けの横並び（Flexbox）レイアウトを定義した流れを再確認してください。HTMLの構造とCSSの記述がどのように連動して表示が切り替わるのか、自身の書いたコードを読み返し、デベロッパーツールで画面幅を変えながら挙動をしっかりと理解しておくことが重要です。 ◆次回授業の予習次回は、第5部の仕上げとして「タイル型レイアウトの構築」に取り組みます。これまでのFlexboxとは異なる、2次元的なレイアウトを可能にする「CSS Grid（グリッドレイアウト）」という新しい概念を学習します。テキストを事前に一読し、タイル型レイアウトの特徴と、それを実現するためのCSS Gridの基本的な仕組みについて予習しておいてください。特に、グリッドコンテナとグリッドアイテムの関係性に注目して読んでおくと、授業の理解がスムーズになります。
23	タイル型レイアウトの構築	科目の中での位置付け	本コマは、第5部「応用 Webサイト制作プロジェクト2」の第3回目にあたる。これまで習得したFlexboxによる1次元のレイアウト手法に加え、より複雑で規則的な配置を可能にする2次元のレイアウト手法であるCSS Grid Layoutを新たに導入する。メニューページのような複数の要素が格子状に並ぶデザインの実装を通して、現代的なWebデザインに不可欠な高度なレイアウト技術の基礎を確立する重要な位置付けにある。
		コマ主題細目	① タイル型レイアウトの概念とCSS Gridの基礎 ② CSS Gridを用いたレイアウト定義の実践 ③ メニューページにおけるタイル型レイアウトの構築
		細目レベル	① 本細目では、応用的なWebサイト構築の第一歩として、タイル型レイアウト（グリッドレイアウト）の概念とその実装の中核となるCSS Grid Layout Moduleの基礎理論について解説する。まず、タイル型レイアウトとは何か、その視覚的な特徴とWebサイトにおける役割について概観する。タイル型レイアウトは、画像やテキストなどのコンテンツをカード状やタイル状のユニットとして扱い、それらを規則正しく格子状に並べる手法である。これは、ショッピングサイトの商品一覧やフォトギャラリー、あるいは今回制作するカフェサイトのメニューページのように、同質の情報を並列に提示する際に極めて有効なデザインパターンであることを、教科書の実例（p.250）などを提示しながら理解させる。次に、このレイアウトを実現するための技術として、CSS Grid Layout（以下、Grid）を導入する。ここで重要なのは、既習のFlexboxとの本質的な違いを明確に理解させることである。Flexboxが基本的に横方向または縦方向のいずれか一方向（1次元）の配置を制御するのに対し、Gridは行（横方向）と列（縦方向）を同時に定義し、その交点に要素を配置する2次元のレイアウトシステムであることを強調する。この2次元の制御能力により、Flexboxだけでは複雑になりがちな格子状の配置を、より直感的かつ効率的に記述できる利点を説明する。続いて、Gridを構成する基本的な要素と用語について詳説する。Gridレイアウトを適用する親要素である「グリッドコンテナ」、その直下の子要素として配置される「グリッドアイテム」、グリッドを構成する水平・垂直の線である「グリッドライン」、ラインによって区切られた行や列の領域である「グリッドトラック」、そしてアイテム間の余白である「ギャップ」といった概念を、図解を用いて視覚的に把握させる。これらの基本用語は、後の実践的なコーディングにおいてプロパティを操作する上での共通言語となるため、正確な理解を促す必要がある。この細目で理解すべき範囲は、タイル型レイアウトの特性を把握し、CSS Grid Layoutが2次元のレイアウトシステムであることを理解した上で、グリッドコンテナ、アイテム、ライン、トラックといった基本構成要素の定義を習得するまで。
			② 本細目では、前項で学んだ理論に基づき、CSSの具体的なプロパティを用いて実際にグリッドレイアウトを定義する方法を実践的に解説する。まず、グリッドレイアウトを開始するための基本となる、親要素への `display: grid;` の適用から始める。これにより、当該要素がグリッドコンテナとなり、その直下の子要素がグリッドアイテムとして扱われるようになる挙動を、簡単なHTML構造を用いたデモンストレーションを通じて確認させる。次に、グリッドの構造、すなわち列と行のサイズを定義する主要なプロパティである `grid-template-columns` と `grid-template-rows` の使用方法を詳説する。ここでは、ピクセル（px）などの絶対単位やパーセント（%）などの相対単位による指定に加え、Gridレイアウトにおいて極めて重要となる新しい単位 `fr`（フラクション）の概念を導入する。`fr` 単位が、グリッドコンテナ内の利用可能な空間を利用可能な割合（分数）に応じて分配する柔軟な仕組みであることを、具体的な数値例（例：`1fr 2fr 1fr`）を示しながら解説し、レスポンシブなデザインとの親和性の高さを理解させる。また、同じパターンの繰り返しを効率的に記述するための `repeat()` 関数（例：`repeat(3, 1fr)`）の使用方法についても触れ、コードの可読性と保守性を高める記述法を習得させる。さらに、グリッドアイテム間の余白を制御する `gap` プロパティ（およびその省略前記法である `grid-gap`、個別指定の `row-gap`, `column-gap`）について解説する。従来のmarginを用いた余白調整と比較し、コンテナの外側には余白を作らず、アイテム間のみに均等なスペースを設けることができる `gap` プロパティの利便性を、実際の表示結果を見せながら説明する。授業内では、これらのプロパティを組み合わせ、3列2行の基本的なグリッドを作成し、アイテム間に適切な余白を設定するまでのコーディング演習を行い、プロパティの挙動を体感的に理解させることを目指す。この細目で理解すべき範囲は、`display: grid` によるコンテナの定義から始め、`grid-template-columns/rows` と `fr` 単位、`repeat()` 関数を用いたグリッド構造の構築、そして `gap` プロパティによる余白設定までを自力で実装できるまで。
			③ 本細目では、ここまでに学習したCSS Gridの知識を応用し、プロジェクトの実践的な課題であるカフェサイトの「メニューページ（menu.html）」におけるタイル型レイアウトの構築を行う。教科書CHAPTER 6の制作フローに基づき、具体的なWebページのコンテンツエリアに対してグリッドレイアウトを適用していくプロセスを体験する。まず、前提として、メニューページのHTML構造がセマンティックに正しくマークアップされているかを確認する。具体的には、各メニュー項目（例えば、商品画像、商品名、価格、簡単な説明文を含むひとかたまり）が `＜article＞` や `＜div＞` などの適切な要素でグループ化されており、それらが一つの親要素（例えば `＜main＞` 内の特定の `＜section＞` や `＜div＞`）に内包されている構造を理解させる。次に、この親要素に対してCSS Gridを適用する。前項で学んだ `display: grid;` を指定し、続いて `grid-template-columns` プロパティを用いて、PC画面での表示を想定した列数（例えば3列）を定義する。ここでは、`repeat(3, 1fr)` のように指定することで、画面幅に応じて均等に3分割される柔軟なグリッドを構築する手法を実践する。また、`gap` プロパティを用いてメニュー項目間に適切な余白を設定し、視認性を向上させる。さらに、各グリッドアイテム（個々のメニュー項目）内部のレイアウトについても調整を行う。アイテム内での画像とテキストの配置バランス、文字サイズや色の指定など、基本なCSSプロパティを併用して、デザインカンプのイメージに近づけるためのスタイリングを行う。この過程で、Gridレイアウトが全体の大きな骨組みを定義し、個々のアイテム内の細かい装飾は従来のCSS技術で補完するという、役割分担の考え方を理解させる。最終的に、ブラウザーで表示確認を行い、複数のメニュー項目が意図した通りに整然とタイル状に並び、ウィンドウ幅の変更に対してある程度柔軟に追従する（現段階ではPC向けの3列表示が維持される）ことを確認する。この細目で理解すべき範囲は、具体的なメニューページのHTML構造に対してCSS Gridを適用し、`fr` 単位や `gap` を用いて複数のコンテンツを規則正しいタイル状のレイアウトとして完成させる実装スキルを習得するまで。
		キーワード	① CSS Grid Layout ② グリッドコンテナ ③ グリッドアイテム ④ fr単位 ⑤ gapプロパティ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本授業で学んだCSS Grid Layoutの基本概念とプロパティ（`display: grid`, `grid-template-columns`, `repeat()`, `fr`, `gap`）を再確認してください。復習として、サンプルコードを自分で入力して挙動を確かめてみましょう。特に、Flexboxとの違いや、`fr`単位がどのように空間を分配するかに着目して理解を深めてください。また、授業で作成したメニューページのグリッド設定の数値を変更し（例：3列を4列にする、gapの値を広げる等）、表示がどのように変化するか実験してみることを推奨します。 ◆次回授業の予習次回は、今回構築したタイル型レイアウトを、スマートフォンなどの狭い画面に対応させるためのレスポンシブ化を行います。テキストを予習してください。メディアクエリを用いて、画面幅に応じてグリッドの列数を切り替える方法（例：PCで3列、スマホで1列）に着目して読み進めてください。また、タイル内で画像を美しく表示するための `object-fit` プロパティについても触れるため、p.268のCOLUMNにも目を通しておくと理解がスムーズになります。
24	タイル型サイトの表示調整と画像の扱い	科目の中での位置付け	本コマは、第5部「応用 Webサイト制作プロジェクト2」の第4回目にあたる。前回構築したCSS Gridによるタイル型レイアウトを基礎とし、今回は多様なデバイス環境に対応させるためのレスポンシブ化と、レイアウト内で画像を美しく表示させるための高度な調整技術を学ぶ。これにより、実用的で視覚的品質の高いWebページを完成させるための応用能力を養う重要な位置づけとなる。
		コマ主題細目	① タイル型レイアウトのレスポンシブ化 ② 画像表示の最適化とトリミング手法 ③ タイル型サイトの完成と最終調整
		細目レベル	① 本主題では、前回CSS Gridを用いて構築したPC向けの複数列タイル型レイアウトを、タブレットやスマートフォンなどのより狭い画面幅のデバイスにおいても適切に表示されるよう、レスポンシブWebデザインの技術を用いて最適化する手法を学ぶ。具体的には、CSSのメディアクエリ（@media）とGrid Layoutのプロパティを組み合わせた動的なレイアウト変更を実践する。まず、現状のレイアウトが狭い画面でどのように表示されるかを確認し、可読性や操作性が低下する問題点を把握させる。その上で、特定の画面幅（ブレークポイント）を境にして、`grid-template-columns` プロパティの値を上書きし、列数を減少させるコーディングを行う。例えば、PC画面では3列（`repeat(3, 1fr)`）で表示されているグリッドを、タブレットサイズでは2列（`repeat(2, 1fr)`）に、さらに狭いスマートフォンサイズでは1列（`1fr`）になるように段階的に変化させる記述方法を解説する。この過程で、メディアクエリの基本的な構文の復習とともに、Grid Layoutが持つ柔軟性がレスポンシブデザインといかに親和性が高いかを理解させる。また、列数の変更に伴い、グリッドアイテム間の余白（`gap`）や、アイテム内部の余白（`padding`）などもデバイスに応じて微調整する必要性についても触れ、単に列を変えるだけでなく、全体のバランスを考慮したデザイン調整の重要性を説く。学生は、提供されたデザインカンプやワイヤーフレームに基づき、適切なブレークポイントを設定し、CSSを記述して実際のブラウザで表示確認を行うことで、マルチデバイス対応の実践的なスキルを習得する。この細目で理解すべき範囲は、メディアクエリを用いて画面幅に応じたCSS Gridの列数変更を実装し、タイル型レイアウトをレスポンシブ化する手法まで
			② 本主題では、タイル型レイアウトにおいて、多様なサイズやアスペクト比（縦横比）を持つ画像素材を、レイアウトを崩すことなく、かつ視覚的に美しく表示させるためのCSSテクニックを学ぶ。タイル型レイアウト、特にグリッドレイアウトでは、各タイル（グリッドアイテム）の大きさが統一されることが多いが、そこに配置される画像自体の比率が異なると、画像が歪んで表示されたり、タイルの高さが不揃いになったりする問題が生じる。これを解決するための中心的な技術として、CSSの `object-fit` プロパティについて詳説する。まず、画像を包括するコンテナ要素（例えば `div` や `figure` タグ）に対して、CSS GridまたはFlexboxを用いて幅と高さを明示的に指定し、画像の表示領域を確定させる。その上で、コンテナ内の `img` 要素に対して `object-fit` プロパティを適用する。特に、`object-fit: cover;` という値が重要であり、これを指定することで、画像はアスペクト比を維持したまま、コンテナ領域全体を隙間なく埋めるように拡大縮小され、領域からはみ出した部分は自動的にトリミング（切り取り）される挙動を理解させる。比較として `object-fit: contain;` の挙動（アスペクト比を維持し、画像全体が領域内に収まるように表示されるため、隙間が生じる可能性がある）も提示し、デザインの目的に応じた使い分けを解説する。さらに、`object-fit` と併用されることが多い `object-position` プロパティについても触れ、トリミングされる際の画像の中心位置を調整する方法（例えば、人物の顔が見えるように位置をずらすなど）を学ぶ。これらの技術を通じて、Webデザインにおける画像の取り扱いに関する専門的な知識を深める。この細目で理解すべき範囲は、`object-fit` プロパティを活用して、異なるアスペクト比の画像をタイル内の指定領域に歪みなく最適に表示させるためのトリミング手法まで。
			③ 本主題では、ここまでの授業で実装したCSS Gridによる構造化、メディアクエリによるレスポンシブ対応、そして `object-fit` による画像調整を統合し、一つの完成されたタイル型Webページとして仕上げるための最終的な確認と微調整を行う。Webサイト制作においては、個々の機能実装だけでなく、全体の調和とユーザー体験（UX）の視点に立った品質管理が不可欠である。授業の進行としては、まず各自が作成したページをブラウザ（Google Chrome等）のデベロッパーツールのデバイスモードを用いて検証するよう指示する。PC、タブレット、スマートフォンの各代表的な画面サイズにおいて、意図したレイアウト変化（列数の切り替わり）がスムーズに行われているか、画像が適切にトリミングされ歪みなく表示されているか、文字が読みやすいサイズや行間で表示されているかなどを厳密にチェックさせる。表示崩れやデザイン上の違和感が見つかった場合は、その原因を特定し、CSSの修正を行う。具体的には、グリッドアイテム間の隙間（`gap`）の調整、タイル内のテキストコンテンツに対する適切な余白（`padding`）やフォントサイズ（`font-size`）の再設定、あるいは特定のブレークポイントにおけるメディアクエリの記述漏れや優先順位のミスの修正などが考えられる。また、異なるブラウザ間での表示差異についても可能な範囲で確認し、クロスブラウザ対応の視点を持つことの重要性にも触れる。最終的に、デザインカンプの意図を忠実に再現しつつ、どのデバイスで見ても快適に閲覧できる状態を目指して調整を完了させる。このプロセスを通じて、学生は制作物の品質に対する責任感と、細部までこだわり抜くプロフェッショナルな姿勢を涵養する。この細目で理解すべき範囲は、構築したタイル型サイト全体の表示検証を行い、レスポンシブ挙動や画像表示、細部のデザイン調整を経て一つの完成されたWebページとして仕上げるプロセスまで。
		キーワード	① メディアクエリ ② レスポンシブWebデザイン ③ CSS Grid（グリッドレイアウト） ④ object-fit ⑤ アスペクト比
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	本日の授業で作成したタイル型レイアウトのページについて、改めてブラウザのデベロッパーツールを使い、様々な画面幅での表示を確認してください。特に、メディアクエリのブレークポイント前後で、`grid-template-columns` の値がどのように変化し、列数が切り替わっているかをCSSのコードと照らし合わせて理解を深めてください。また、`object-fit: cover;` を適用した画像について、ブラウザ上で画像の表示領域のサイズを強制的に変更してみることで、画像がどのようにトリミングされ、アスペクト比が維持されているかを視覚的に確認する実験を行ってください。 ◆次回授業の予習次回は、これまでに作成した「トップページ（シングルカラム）」「ニュースページ（2カラム）」「メニューページ（タイル型）」の複数のHTMLファイルを相互にリンクさせ、Webサイトとしての回遊性を持たせる作業を行います。予習として、第6回で学習したハイパーリンクの設定方法（`a`タグと`href`属性）を復習しておいてください。特に、同じサイト内の別のHTMLファイルへリンクする際の相対パスの記述方法について再確認し、手元にある各ページのファイル名やフォルダ構成を把握しておくようにしてください。
25	複数ページの連携とサイト全体の調整	科目の中での位置付け	本Webデザイン演習科目において、第25回は第5部「応用 Webサイト制作プロジェクト2」の最終回に位置づけられる。これまで学生は、シングルカラム、2カラム、タイル型といった異なるレイアウト構造を持つ複数のWebページを個別に制作してきた。本コマでは、これらの独立したページ群をハイパーリンクによって有機的に結合し、一つのWebサイトとして機能させるための統合プロセスを扱う。これは、個別のコーディング技術から、サイト全体の構造設計とユーザー体験（UX）を考慮した実装へと視座を高める重要な段階であり、次章の機能拡張およびサイト公開へと接続するための基盤となる。
		コマ主題細目	① ページ間のハイパーリンク設定とナビゲーション構築 ② サイト全体のデザイン統一性とCSS管理 ③ ユーザビリティ視点に基づく回遊性の向上と最終検証
		細目レベル	① 本主題では、これまで個別に制作してきたトップページ、ニュース一覧ページ（2カラム）、メニュー紹介ページ（タイル型）、そしてお問い合わせページ等の各HTMLファイルを相互にリンクさせ、Webサイトとしての基本構造を確立することを目的とする。まず、HTMLにおけるアンカー要素（`＜a＞`タグ）の`href`属性を用いたリンク設定の基本原理を再確認する。特に、サイト内リンクにおいて必須となる「相対パス」の概念について、現在のファイル位置を基準とした階層構造（ディレクトリ構造）の理解を深めさせる。例えば、下層ディレクトリにあるページから上層にあるトップページへリンクする場合の`../`を用いた記述方法など、ファイル構成図と照らし合わせながら正確にパスを記述能力を養う。次に、Webサイト内の主要なコンテンツへの導線となる「グローバルナビゲーション」の実装を行う。各ページのヘッダー領域に共通して配置されるナビゲーションメニューに対し、適切なリンク先を設定する実践を行う。さらに、ユーザーが現在サイト内のどの位置にいるかを視覚的に示す「カレント表示（現在地表示）」の実装についても解説する。これは、現在表示しているページのナビゲーション項目に対して特定のCSSクラス（例: `.current`）を付与し、色や装飾を変化させる手法であり、ユーザビリティ向上の観点からその重要性を理解させる。これらの作業を通じて、単にページを繋ぐだけでなく、ユーザーが迷わずに情報にアクセスできる論理的なサイト構造を構築するスキルを習得させる。この細目で理解すべき範囲は、相対パスを用いたサイト内リンクの正確な記述方法から、グローバルナビゲーションにおけるカレント表示の実装手法まで。
			② 本主題では、複数ページにわたるWebサイト全体において、デザインの一貫性（Consistency）を確保し、効率的なCSS管理を行うための手法について解説と実践を行う。Webサイトにおいて、ページごとにフォント、色使い、余白の取り方などが異なると、ユーザーに違和感や不信感を与える原因となる。これを避けるため、サイト全体で共通して使用されるスタイル規則を定義することの重要性を学術的なデザイン原則の観点から説明する。具体的には、ヘッダー、フッター、ナビゲーションといった全ページ共通のコンポーネント（部品）について、HTML構造とCSSスタイルが統一されているかを確認し、必要に応じて修正を加える作業を行う。また、CSSファイルの構成についても再考を促す。これまではページごとにCSSを記述する傾向があったかもしれないが、サイト規模が大きくなるにつれて、共通スタイルを一つの「style.css」などに集約し、ページ固有のスタイルのみを個別に管理する、あるいは適切にコメントアウトを用いてセクション分けするなど、メンテナンス性を考慮したCSS設計が必要となることを理解させる。さらに、複数のスタイルが競合した場合の優先順位を決定する「詳細度（Specificity）」の概念についても触れ、意図したスタイルが適用されない場合のデバッグ方法を習得させる。これらの実践を通じて、拡張性と保守性の高いWebサイト構築のための基礎的なCSS設計能力を涵養する。この細目で理解すべき範囲は、Webサイト全体におけるデザインの一貫性の重要性から、共通コンポーネントのスタイル統一、および基本的なCSSファイル管理と詳細度の概念まで。
			③ 本主題では、リンクが接続され、デザインが統一されたWebサイトに対し、ユーザー視点に立った最終的な調整と検証を行う。目的は、Webサイトの「回遊性」を高め、ユーザーがストレスなく目的の情報に到達できるようにすることである。まず、回遊性を高めるための具体的な実装テクニックを解説する。例えば、全ページのヘッダーにあるサイトロゴをクリックすると必ずトップページに戻るようにリンクを設定することは、Webの標準的な挙動としてユーザーが期待する機能である。また、各ページの下部に関連ページへのリンクを配置することや、深い階層のページにおいて「パンくずリスト」を設置すること（本演習では簡易的な実装に留める場合もあるが、概念として紹介する）が、いかにユーザーの利便性を向上させるかを説明する。続いて、制作したWebサイトの総合的な検証作業（テスト）を実施する。これには、設定したすべてのリンクが正しく機能し、リンク切れ（404エラー）が存在しないかの確認、画像が適切なサイズと解像度で表示されているかの確認が含まれる。さらに、レスポンシブデザインの観点から、PC、タブレット、スマートフォンといった異なる画面幅において、レイアウト崩れや文字の可読性低下が生じていないかを全ページにわたって厳密にチェックさせる。検証で発見された不具合に対しては、原因を特定し、HTMLまたはCSSを修正するデバッグプロセスを実践する。この細目で理解すべき範囲は、Webサイトの回遊性を向上させるための実装上の工夫から、リンク切れやレスポンシブ表示確認を含むWebサイト全体の最終的な動作検証手法まで。
		キーワード	① 相対パス / 絶対パス ② グローバルナビゲーション ③ カレント表示 ④ デザインの一貫性 (Consistency) ⑤ クロスブラウザテスト
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本授業で実施した複数ページの連携作業を振り返り、自身の制作したWebサイトが正しく機能しているか再確認すること。特に、相対パスを用いたリンク設定はミスが起こりやすいため、全てのリンクをクリックし、意図したページへ遷移するか、下層ページからトップページへ戻れるか等を重点的にチェックすること。また、サイト全体を見渡し、ページ間でヘッダーやフッターのデザイン、フォントサイズなどに不統一な点がないか、CSSファイルと照らし合わせながら確認し、修正が必要な場合は調整を行うこと。 ◆次回授業の予習次回より第6部「Webサイトの機能拡張と公開・運用」に入る。Webサイトに実用的な機能を付加するため、外部サービスを利用する方法について学習する。テキストを事前に読み、Googleマップの埋め込みや、YouTube動画の表示、SNSのタイムライン表示などがどのような仕組み（主に`iframe`タグの利用など）で実現されているのか、その概要を予習しておくこと。特に、外部のコードを自サイトのHTMLに組み込む際の基本的な考え方を理解しておくことが望ましい。
26	外部メディアの活用とフォームの実装	科目の中での位置付け	本授業は、全30回にわたるWebサイト制作カリキュラムの第26回目にあたり、第6部「Webサイトの機能拡張と公開・運用」の冒頭を構成する。これまで習得したHTMLによる構造化とCSSによるデザイン構築のスキルを基盤として、Webサイトに実用的な機能性と豊かな情報源を付加するための応用的な技術を学ぶ。具体的には、自サイト内に外部のサービス（地図、動画、SNS等）を有機的に統合する方法と、ユーザーとの接点となるお問い合わせページの構築手法を習得し、静的な情報発信にとどまらない動的で実用的なWebサイトの完成を目指す重要な段階である。
		コマ主題細目	① 外部メディア埋め込みの基礎概念とGoogleマップの導入 ② 動画コンテンツとSNSタイムラインのWebページへの統合 ③ お問い合わせページの全体構築とメールリンクの実装
		細目レベル	① 本細目では、Webサイトにおける「外部メディア」の役割と、それを自サイトのページ内に埋め込むための技術的な仕組みについて、学術的な視点から概観することから始める。Webページは、自らがホスティングするテキストや画像だけで構成されるとは限らない。インターネット上に存在する有用な外部サービス（地図情報、動画プラットフォーム、ソーシャルメディアなど）をページの一部として取り込むことで、コンテンツの信頼性や利便性を飛躍的に向上させることが可能となる。これを実現するための主要なHTML要素として、インラインフレームを定義するiframeタグの構造と役割について詳細に解説する。iframeは、現在の文書の中に別のHTML文書を埋め込むための窓のような機能を持ち、外部サービスのサーバーから提供されるコンテンツを表示する際に用いられる標準的な手法である。続いて、具体的な実践として、Googleマップの埋め込み方法を扱う。企業の所在地やイベント会場へのアクセス案内など、地図情報はWebサイトにおいて不可欠な要素の一つである。Googleマップのサービス上で特定の場所を検索し、その地図を共有するための「埋め込み用HTMLコード」を取得する手順を実演を交えて解説する。取得したコードはiframeタグを含んでおり、これを自作のHTMLファイル内の適切な場所にペーストすることで、動的な地図が表示される仕組みを理解させる。さらに、埋め込まれた地図の表示サイズ（幅や高さ）をCSSで制御する方法についても触れ、ページのデザインに合わせて調整する基礎能力を養う。また、外部コンテンツを利用する際の著作権や利用規約への配慮といった倫理的な側面についても注意を喚起する。この細目で理解すべき範囲は、外部メディア埋め込みの基本的な仕組みとしてのiframeタグの理解から、Googleマップから埋め込みコードを取得し、自社のWebページ内に地図を表示させ、CSSで基本的なサイズ調整を行うまで。
			② 本細目では、テキストや静止画では伝えきれないリッチな情報をWebサイトに付加するための手段として、動画コンテンツとソーシャル・ネットワーキング・サービス（SNS）のタイムラインをページ内に統合する技術を詳説する。現代のWebにおいて、動画は情報伝達力に優れた重要なメディアである。ここでは、代表的な動画プラットフォームであるYouTubeを例に、動画の埋め込み方法を学習する。YouTubeの各動画ページで提供される「共有」機能から埋め込みコードを取得し、HTMLに記述する手順を解説する。その際、iframeタグに付与される様々な属性、例えば動画の自動再生やフルスクリーン表示の許可などを制御するパラメータについても言及し、制作者が意図した挙動を実現するための知識を深める。次に、WebサイトとSNSの連携について扱う。SNSはリアルタイムな情報発信やユーザーとのコミュニケーションにおいて強力なツールであり、Webサイト内にその活動状況を表示することは、サイトの鮮度を保ち、多角的な情報提供につながる。具体的には、InstagramやX（旧Twitter）といった主要なSNSの投稿やタイムラインをWebページに表示する方法を解説する。これらのプラットフォームでは、単純なiframeだけでなく、各社が提供する専用のプラグインやウィジェットと呼ばれるスクリプト（JavaScript）を読み込むことで、動的なタイムライン表示を実現するケースが多い。教科書に基づき、それぞれのサービスの公式な手順に従って埋め込み用コードを取得し、HTMLの適切な位置に配置する方法を実践する。外部スクリプトを導入する際のセキュリティ上の一般的な注意点や、ページの読み込み速度への影響といったパフォーマンスの観点についても触れ、単に表示させるだけでなく、Webサイト全体の品質を考慮した実装能力を涵養する。この細目で理解すべき範囲は、YouTube動画の埋め込みコードの取得と属性の理解、およびInstagramやXのタイムラインを表示するためのプラグインやウィジェットの導入方法と、それらをHTML内に適切に配置して表示させるまで。
			③ 本細目では、Webサイトにおける重要な機能ページの一つである「お問い合わせページ」を、これまで学習した要素技術を組み合わせて構築する総合的な演習を行う。お問い合わせページは、サイト訪問者が運営者に対してコンタクトを取るための窓口であり、Webサイトの信頼性やユーザビリティを大きく左右する。まず、一般的なお問い合わせページに求められる構成要素（ヘッダー、フッター、ページタイトル、連絡先情報、地図、問い合わせフォームなど）を整理し、ワイヤーフレームに基づくページ全体の設計思想を理解する。その上で、これまでの授業で作成してきた共通パーツであるヘッダーやフッターを配置し、サイト全体としての統一感を維持しながらページを構築していく手順を確認する。続いて、具体的な連絡手段の実装について解説する。Webサイトにおける問い合わせ方法には、サーバーサイドのプログラムと連携した入力フォームを用いる方法と、ユーザーのメールソフトを起動させるメールリンクを用いる方法がある。本授業では、教科書の内容に即し、より手軽に実装可能なメールリンク（mailtoスキーム）の活用を中心に学習する。aタグのhref属性に「mailto:メールアドレス」と記述することで、リンクをクリックした際にユーザーの既定のメールクライアントが立ち上がり、宛先が自動入力される仕組みを理解させる。さらに、mailtoスキームの拡張機能として、件名（subject）や本文（body）の初期値をURLパラメータとして指定する方法についても詳説し、ユーザーの入力負荷を軽減するユーザビリティへの配慮を学ぶ。最後に、①で学んだGoogleマップや、その他必要なテキスト情報を配置し、CSSを用いて余白やレイアウトを整え、実用的なお問い合わせページとして完成させるまでのプロセスを実践する。この細目で理解すべき範囲は、お問い合わせページの役割と構成の理解、共通パーツを用いたページ構築、mailtoスキームによるメールリンクの実装とパラメータ設定、そしてCSSによる最終的なレイアウト調整を行ってページを完成させるまで。
		キーワード	① 外部メディア（埋め込みコンテンツ） ② iframeタグ ③ Googleマップ埋め込み ④ SNSプラグイン（ウィジェット） ⑤ mailtoスキーム（メールリンク）
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で扱った外部メディアの埋め込み技術について、自身の制作環境で実践的に復習すること。具体的には、任意の場所のGoogleマップ、YouTube上の任意の動画、およびInstagramまたはXの特定の投稿やタイムラインの埋め込みコードを取得し、HTMLファイルに記述してブラウザでの表示を確認すること。その際、CSSを用いてそれぞれの要素のサイズや配置を調整し、ページのデザインになじむように工夫してみること。また、aタグを用いたメールリンクを作成し、クリックした際に自身のメールソフトが正しく起動し、宛先や件名が設定されるか動作検証を行うこと。 ◆次回授業の予習次回はWebサイトの公開準備とトラブルシューティングについて学習する。SNSでシェアされた際の表示を最適化するOGP（Open Graph Protocol）の設定について予習しておくこと。また、Web制作の過程で発生しがちなエラーや表示崩れの原因とその解決策について、どのような事例が紹介されているか概要を把握しておくこと。自身がこれまでの制作で経験したトラブルと照らし合わせながら読むとより理解が深まるだろう。
27	公開準備とトラブルシューティング	科目の中での位置付け	本Webデザイン演習科目において、第27回は全30回の授業の終盤に位置し、第6部「Webサイトの機能拡張と公開・運用」の第2回目にあたる。これまでの授業で学生はHTMLとCSSを用いた静的なWebページの制作技術を習得し、複数のレイアウトパターンを実践してきた。本コマでは、制作したWebサイトをインターネット上に広く公開するための具体的な準備と手順、そして制作過程で直面する表示上の問題（トラブル）を解決するための基礎的な手法を扱う。これは、ローカル環境での制作から、実社会における情報発信へと移行するための重要な架け橋となる段階であり、Webサイトを完成品として世に送り出すために不可欠な実践的知識を統合する回である。
		コマ主題細目	① SNSでの共有表示設定（OGP） ② Webサイトの公開手順（サーバーへのアップロード） ③ 表示崩れとトラブルシューティングの基礎
		細目レベル	① 本主題では、作成したWebサイトがソーシャル・ネットワーキング・サービス（SNS）で共有（シェア）された際に、その情報がどのように表示されるかを制御するための仕組みであるOGP（Open Graph Protocol）について解説する。現代のWebにおいて、SNSを通じた情報拡散はサイトへの流入経路として極めて重要であり、適切に情報が伝わるように設定することはWebデザインの一部として認識されている。授業ではまず、OGPの基本概念とその必要性を、SNSのタイムライン上での表示例（カード形式でのタイトル、画像、説明文の表示など）と比較しながら説明する。OGPが設定されていない場合、SNS側のクローラーがページ内の情報を自動的に抽出しようとするが、意図しない画像やテキストが選択される可能性があり、情報伝達の正確性やユーザーのクリック意欲（エンゲージメント）を損なうリスクがあることを理解させる。次に、OGPを実装するための具体的な技術として、HTMLのheadタグ内に記述するmetaタグの使用方法を詳説する。主要なプロパティである`og:title`（ページのタイトル）、`og:type`（ページの種類、websiteやarticleなど）、`og:image`（サムネイル画像のURL）、`og:url`（ページの正規URL）、`og:description`（ページの概要）について、それぞれの役割と記述規則を、教科書の記述に基づき具体的なコード例を示しながら解説する。特に画像に関しては、各SNSプラットフォームで推奨されるサイズやアスペクト比が存在することにも触れ、デザインの観点からの配慮の必要性を示す。また、FacebookやX（旧Twitter）などが提供しているデバッグツール（Validator）の存在を紹介し、公開前に設定が正しく認識されるかを確認する手順についても概観する。これにより、学生は単にWebページを作成するだけでなく、それが外部のプラットフォームでどのように流通し、受容されるかを意識したメタデータ設計の重要性を習得する。この細目で理解すべき範囲は、OGPの目的と基本概念の理解から、主要なmetaタグを用いた具体的な記述方法、およびSNSでの表示確認の仕組みまで。
			② 本主題では、ローカル環境（自分のコンピュータ内）で制作したWebサイトのファイルを、インターネットを通じて世界中から閲覧可能な状態にするための「公開」の仕組みと手順について解説する。まず、第1回授業で触れたインターネットとWebの仕組みを再確認し、Webサイトが閲覧できるためには、そのデータが常時インターネットに接続された「Webサーバー」上に存在し、リクエストに応じてデータを送信できる状態にある必要があることを学術的な視点から復習する。その上で、Webサイト公開のために必要な二つの要素、「Webサーバー」と「ドメイン」の役割について説明する。Webサーバーはファイルの保管場所であり、ドメインはインターネット上の住所にあたるものであることを、教科書の比喩表現なども交えて理解を深める。続いて、ローカル環境にあるHTML、CSS、画像などのファイルをWebサーバーへ転送するための標準的な通信プロトコルであるFTP（File Transfer Protocol）について解説する。具体的な転送手段として、FTPクライアントソフト（ファイル転送ソフト）と呼ばれる専用のアプリケーションを利用するのが一般的であることを示し、その基本的な操作の流れを概観する。FTPソフトを利用する際には、契約したレンタルサーバー会社などから提供されるFTPサーバー名（ホスト名）、ユーザー名、パスワードといった接続情報が必要になることを説明し、これらの情報を用いてサーバーに接続し、ローカル側のファイルをサーバー側の指定された公開用ディレクトリ（フォルダ）へドラッグ・アンド・ドロップなどでアップロードする一連のプロセスを、図解やデモンストレーションを通じて具体的にイメージさせる。また、ファイル構造（ディレクトリ階層）をローカルとサーバーで一致させることの重要性や、トップページとなるファイル名を一般的に「index.html」とする慣習についても触れ、正しく表示させるための基本ルールを理解させる。この細目で理解すべき範囲は、Webサイト公開におけるクライアントとサーバーの関係性から、Webサーバーとドメインの役割、そしてFTPを用いたファイルアップロードの基本的な概念と流れまで。
			③ 本主題では、Webサイト制作の過程で頻繁に遭遇する「意図した通りに表示されない」「レイアウトが崩れる」といった問題（トラブル）に対し、その原因を特定し解決するための基礎的なアプローチ（トラブルシューティング）について解説する。Web制作においてエラーは付き物であり、それを効率的に解決する能力はコーディング技術と同様に重要であることをまず認識させる。教科書CHAPTER 8で挙げられているチェックリストなどを参考に、初心者が陥りやすい典型的なミスとその症状を体系的に分類して示す。例えば、画像が表示されない場合の「ファイルパスの記述ミス」や「ファイル名のスペルミス」、スタイルが適用されない場合の「CSSファイルの読み込み記述ミス」や「セレクタの記述ミス」、レイアウトが大きく崩れる場合の「HTMLタグの閉じ忘れ」や「全角スペースの混入」などである。これらの原因を論理的に推測する姿勢の重要性を説く。さらに、現代のWeb開発において必須のツールである、Webブラウザに標準搭載された「デベロッパーツール（検証ツール）」の基本的な活用方法を詳説する。デベロッパーツールを用いることで、現在表示されているページのHTML構造がブラウザにどのように解釈されているかをリアルタイムで確認でき、特定の要素に適用されているCSSプロパティとその値、スタイルが上書きされている状況（カスケードの優先順位）などを視覚的に把握できることを実演を通じて示す。また、ブラウザが過去のデータを一時的に保存する「キャッシュ」の機能により、CSSの変更が即座に反映されない場合があることと、その解決策としての「スーパーリロード（キャッシュのクリア）」についても触れる。これらの知識を通じて、学生は現象から原因を仮説立て、ツールを用いて検証し、修正するという問題解決のサイクルを回すための基礎能力を涵養する。この細目で理解すべき範囲は、Web制作における一般的な表示崩れの主な原因の理解から、ブラウザのデベロッパーツールを用いた基本的なデバッグ手法の習得まで。
		キーワード	① OGP (Open Graph Protocol) ② Webサーバー ③ FTP (File Transfer Protocol) ④ トラブルシューティング ⑤ デベロッパーツール
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだOGPのmetaタグについて、教科書P.298の記述を参考にしながら、これまでの授業（例えば第5部のプロジェクト）で自身が作成したWebサイトのHTMLファイル（`index.html`など）の`＜head＞`タグ内に実際に記述してみなさい。特に`og:title`、`og:type`、`og:description`には適切な内容を設定し、コードが正しく記述できているか確認すること。また、Webブラウザ（Google Chromeなど）で任意のWebページを開き、右クリックメニューなどから「検証」を選択してデベロッパーツールを起動し、ElementsパネルでHTMLの構造や適用されているCSSスタイルがどのように表示されるか、授業での解説を思い出しながら実際に操作して確認しておくこと。 ◆次回授業の予習次回は全30回の授業のまとめとして、半期で学んだHTMLとCSSの基礎知識、Webデザインの考え方、そしてサイト制作のフロー全体を総括します。これまでの授業で作成した全てのHTMLファイルとCSSファイルを見返し、自分が書いたコードの構造や意図を改めて確認しておいてください。
28	Webサイト制作の総括と今後の学習	科目の中での位置付け	本コマは、全30回にわたるWebデザイン講義の第28回目であり、実質的な新規学習内容の最終回に位置付けられる。これまで積み重ねてきたHTML/CSSによるコーディング技術、デザイン理論、そしてWebサイトの公開・運用に関する知識を体系的に統合し、一つの区切りをつける重要な回である。単なる知識の振り返りにとどまらず、受講者が授業終了後も自律的に技術を探求し、変化の激しいWeb業界において持続的に成長していくための学習指針を示すことを目的とする。
		コマ主題細目	① HTML/CSSとWebデザインの基礎理論の体系的総括 ② 実践的Webサイト制作プロセスにおける重要ポイントの再確認 ③ 持続的なスキルアップのための学習戦略と将来展望
		細目レベル	① 本講義の前半で学習したWebサイト制作の根幹をなす基礎理論について、個別の技術論ではなく、それらが相互にどのように関連し合っているかという俯瞰的な視点から再整理を行う。まず、インターネットとWebの基本的な仕組みを前提とし、Webページが「構造（HTML）」と「表現（CSS）」の分離という原則に基づいて構築されていることの意義を改めて強調する。HTMLに関しては、単にタグの役割を覚えるだけでなく、文書の意味構造を適切に定義するセマンティックなマークアップの重要性を再確認する。見出し、段落、リスト、表、そしてフォームといった各要素が、スクリーンリーダーなどの支援技術や検索エンジンに対してどのように情報を伝達しているかを理解させる。CSSに関しては、ボックスモデルという基本概念が全ての要素の配置と余白の基準となっていることを復習し、その上でFlexboxやCSS Gridといった現代的なレイアウト技術がどのように適用されるかを体系的に解説する。また、カスケードと詳細度というCSS特有のスタイル適用ルールについても触れ、意図通りのデザインを実現するための理論的背景を強固にする。さらに、多様なデバイス環境に対応するためのレスポンシブWebデザインの根本的な考え方であるメディアクエリの役割と、モバイルファーストのアプローチについても理論的な側面から総括する。これらの基礎理論が、特定のツールや流行に依存しない普遍的な知識であることを理解させ、今後の応用技術習得の土台となることを認識させる。この細目で理解すべき範囲は、Web標準に基づくHTML/CSSの基本概念と、それらがWebデザインを構築する上での理論的支柱であることを再認識するまで。
			② 講義の中盤から後半にかけて実施した実践プロジェクト（シングルカラム、2カラム、タイル型レイアウトのサイト制作）での経験に基づき、Webサイト制作のワークフロー全体における重要事項と、陥りやすい問題点への対処法を整理する。企画・設計段階におけるサイトマップやワイヤーフレーム作成の重要性から始まり、デザインカンプからコーディングへと移行する際の具体的な思考プロセスを振り返る。特に、コーディングの実践過程で多くの学生が直面したであろうレイアウト崩れの原因（ボックスモデルの計算ミス、Flexboxのプロパティ設定ミス、フロートの解除忘れなど）とそのデバッグ手法について、ブラウザの開発者ツールを用いた具体的な解決手順を交えて解説する。また、画像の適切なフォーマット選択（JPEG, PNG, SVG, WebP）と最適化がページの読み込み速度や表示品質に与える影響についても再考を促す。さらに、レスポンシブ対応におけるブレイクポイントの設定基準や、ナビゲーションの切り替え実装における注意点についても実践的な視点から確認を行う。外部サービス（GoogleマップやSNS埋め込みなど）との連携時における仕様確認の重要性や、公開に向けたサーバー設定、ドメイン取得の基礎知識といった運用フェーズに関わる事項についても触れ、制作から公開までの一連の流れを円滑に進めるための勘所を統合的に理解させる。単に動くものを作るだけでなく、ユーザビリティやアクセシビリティに配慮した品質の高いWebサイトを制作するための視点を持つことの重要性を強調する。この細目で理解すべき範囲は、Webサイト制作のー連のプロセスにおいて、各工程で留意すべき実践的な重要事項とトラブルシューティングの基本姿勢を習得するまで。
			③ 本講義で習得した知識はWeb制作の入り口に過ぎないことを示し、今後受講者が自律的な学習者としてスキルアップを続けていくための方向性と具体的な戦略を提示する。まず、Web業界の技術トレンドの変化がいかに速いかという現状を認識させ、継続的な学習（生涯学習）が不可欠な分野であることを説明する。その上で、本講義では深く扱わなかった発展的なトピック、例えばWebページに動的なインタラクションを加えるJavaScriptとそのフレームワーク（React, Vue.jsなど）、CSSをより効率的に記述するためのプリプロセッサ（Sassなど）、Webサイトの更新管理を容易にするCMS（WordPressなど）、そしてWebマーケティングやUI/UXデザインといった関連領域について、それぞれの概要と学習の意義を概観する。また、信頼できる情報源としての公式ドキュメント（MDN Web Docsなど）の活用方法や、技術系コミュニティへの参加、最新情報をキャッチアップするための技術ブログやニュースサイトの利用方法についても具体的に紹介する。さらに、自身のスキルを対外的に証明するためのポートフォリオ制作の重要性を説き、学んだ技術を用いてオリジナルの作品を制作し、公開するプロセス自体が最も効果的な学習方法の一つであることを強調する。AI技術の進化がWeb制作に与える影響にも触れ、AIを補助ツールとして活用しつつも、基礎的な原理原則を理解している人間ならではの価値発揮が重要になるという視点も提供する。最終的に、受講者自身が興味関心に基づいて次の学習目標を設定し、自走できるWeb制作者としてのマインドセットを醸成することを目指す。この細目で理解すべき範囲は、Web制作領域における技術トレンドを概観し、自身のキャリアや興味に応じた継続的な学習計画を立案するための指針を得るまで。
		キーワード	① Web標準 ② セマンティックWeb ③ レスポンシブWebデザイン ④ ブレイクポイント ⑤ ポートフォリオ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	Webサイト制作のワークフロー
		復習・予習課題	◆今回授業の復習今回の授業で提示された「今後の学習の方向性」を参考に、自分自身が次に学びたい技術分野や関連領域（例：JavaScriptの基礎、WordPressによるサイト構築、UI/UXデザインの深化など）を一つ定め、その分野に関する入門的なオンライン記事やチュートリアルを読んでみてください。また、本講義で作成したWebサイトを自身のポートフォリオとしてブラッシュアップしましょう。 ◆次回授業の予習次回からは2回にわたり、半期の総復習を行います。まずは第1回から第15回までの講義資料、自身のノート、および教科書の該当箇所（CHAPTER 1～3）を見返し、Webの基礎知識、HTMLの構造化、CSSによる基本装飾とレイアウト技法について記憶を喚起してください。特に理解が曖昧なままになっている点や、改めて質問したい事項があれば、明確にリストアップして授業に臨むようにしてください。
29	総復習（前半）	科目の中での位置付け	本授業は全30回の講義の第29回にあたり、半期にわたる学習の集大成としての総復習の前半部分となる。第1回から第15回までに学習した、Webサイト制作の基礎概念、HTMLによる文書構造化、そしてCSSによる基本的なデザインとレイアウトに関する知識を体系的に振り返る。基礎知識の定着度を確認し、次回の実践的な内容の復習へと繋げるための重要な位置付けにある。
		コマ主題細目	① Webの仕組みとデザインの基礎概念の再確認 ② HTMLによる文書構造化の要点と実践的マークアップ ③ CSSの基本概念とボックスモデル・基礎装飾の復習
		細目レベル	① 本主題では、コース序盤で扱ったWebサイト制作を取り巻く環境と、デザインに対する基本的な考え方を改めて整理し、確実な知識として定着させることを目的とする。まず、インターネットとWeb（World Wide Web）の根本的な違いについて再確認する。インターネットという巨大なネットワーク基盤の上で、Webというシステムがどのように機能しているか、特に「クライアント（Webブラウザー）」と「サーバー」の役割分担と、HTTPリクエスト・レスポンスという通信の仕組みを、図解を用いて振り返る。また、URL（Uniform Resource Locator）が持つ「Web上の住所」としての役割と、その構造（プロトコル、ドメイン、パスなど）についても再確認し、Webページが表示されるまでの技術的な背景を理解する。次に、Webデザインにおける重要概念を復習する。単に見栄えを良くすることがデザインではなく、サイトの「目的」を達成し、想定される「ターゲットユーザー」に適切な情報を届けるための設計行為であることを強調する。その上で、ユーザーがストレスなく目的を達成できる「ユーザビリティ（使いやすさ）」の重要性について、具体的な例（ナビゲーションのわかりやすさ、読みやすい文字サイズや配色など）を挙げながら解説する。また、制作フローにおける計画段階の重要性を再認識するため、サイトマップによる全体構造の設計と、ワイヤーフレームによるページレイアウトの設計が、後のデザインカンプ制作やコーディング工程にどのように影響するかを解説する。授業内では、これらの概念に関する簡単なクイズ形式の問いかけを行い、学生自身の理解度を確認しながら進行する。これにより、技術的なスキルの前提となるWebデザインの本質的な考え方を再構築する。この細目で理解すべき範囲は、インターネットとWebの仕組み、Webデザインにおけるユーザビリティの重要性、および制作フローの概要まで。
			② 本主題では、Webページの骨格となるHTML（HyperText Markup Language）について、その役割と正しい記述方法を重点的に復習する。HTMLの本質が、視覚的な表現ではなく、文書の構造や情報の意味（セマンティクス）をコンピューター（ブラウザーや検索エンジンなど）に伝えることにある点を再強調する。まず、HTML文書の基本構造であるDOCTYPE宣言、html要素、head要素、body要素の役割と、適切な入れ子構造について確認する。特にhead内に記述するメタデータ（文字コード指定、タイトル、ビューポート設定など）の重要性を振り返る。続いて、主要なHTMLタグの適切な使い分けについて、具体的なコード例を交えて解説する。見出し（h1〜h6）による文書の階層構造化、段落（p）、箇条書きリスト（ul/li）と順序付きリスト（ol/li）、定義リスト（dl/dt/dd）の使い分けを復習する。また、画像を表示するimgタグにおけるalt属性の重要性（アクセシビリティの観点から）や、他のページへ移動するaタグのhref属性の記述方法（絶対パスと相対パスの違い）についても再確認する。さらに、データを整理する表（table関連タグ）と、ユーザーからの入力を受け付けるフォーム（form, input, textarea, buttonなど）の基本的な構造についても触れる。最後に、文書内の要素を意味的なまとまりとしてグループ化するためのdiv要素やspan要素の役割と、HTML5以降で導入されたセマンティックな要素（header, footer, nav, article, sectionなど）の意義についても簡単に振り返る。授業では、誤ったマークアップの例を提示し、それをセマンティックな観点から修正する簡単な演習を通して、実践的な理解を深める。この細目で理解すべき範囲は、HTMLの基本構造、主要なタグを用いた適切な文書構造の定義、および属性の正しい記述方法まで。
			③ 本主題では、HTMLで構造化された文書にスタイルを適用し、デザインを整えるためのCSS（Cascading Style Sheets）の基礎を復習する。まず、HTML（構造）とCSS（表現）を分離することの意義とメリットを確認し、CSSをHTMLに適用する3つの方法（外部スタイルシート、内部スタイルシート、インラインスタイル）の記述方法とそれぞれの特徴、優先順位について振り返る。次に、CSSの基本構文である「セレクタ { プロパティ: 値; }」の形式を再確認する。要素セレクタ、クラスセレクタ（.）、IDセレクタ（#）といった基本的なセレクタの使い方と、それらの組み合わせ（子孫セレクタなど）による対象の絞り込み方を復習する。また、スタイルが競合した場合の優先順位（詳細度）や、親要素のスタイルが子要素に引き継がれる「継承」の概念についても触れる。続いて、CSSを用いたレイアウト調整の核心となる「ボックスモデル」の概念を徹底的に復習する。すべてのHTML要素が持つ4つの領域（content、padding、border、margin）の関係性を図解し、それぞれのプロパティが要素のサイズや配置にどのように影響するかを解説する。特に、box-sizingプロパティによるボックスサイズの計算方法の違い（content-box と border-box）は、レイアウト崩れを防ぐための重要な知識として再強調する。さらに、文字の装飾（フォントサイズ、色、太さ、行間、フォントファミリーなど）や、背景の設定（背景色、背景画像）に関する基本的なプロパティの使い方を振り返る。最後に、要素の表示形式を指定するdisplayプロパティ（block, inline, inline-block, none）の基礎と、現代的なレイアウト手法であるFlexboxの導入部分（display: flexによるコンテナ化とアイテムの並び方の基礎）についても簡単に触れ、次回の応用的なレイアウト復習への橋渡しとする。この細目で理解すべき範囲は、CSSの基本構文とセレクタ、ボックスモデルの概念、および文字・背景・基本的な配置に関するプロパティの理解まで。
		キーワード	① ユーザビリティ ② マークアップ ③ ボックスモデル ④ セレクタ ⑤ カスケード
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	Webサイト制作のワークフロー
		復習・予習課題	◆今回授業の復習今回の総復習（前半）で扱った第1部から第3部までの範囲（Webの基礎、HTML構造化、CSS基礎）について、授業内で触れたポイントを中心に教科書を読み返し、自身の理解が曖昧な部分を特定してください。特に、HTMLの各タグが持つ意味的な役割（セマンティクス）と、CSSのボックスモデルにおける余白（margin/padding）の挙動については、実際に簡単なHTMLファイルとCSSファイルを作成し、ブラウザーで表示確認を行いながら復習することを強く推奨します。 ◆次回授業の予習次回は総復習の後半として、第4部から第6部までの内容（実践的なサイト制作フロー、レスポンシブデザイン、外部機能の活用など）を扱います。予習として、教科書の該当する章（CHAPTER 4以降）の目次や各節の冒頭をざっと確認し、どのような流れでWebサイトを完成させたか、記憶を呼び起こしておいてください。特に、レスポンシブWebデザインを実現するための「メディアクエリ」の基本的な書き方と、Flexboxを用いたレイアウト調整の具体例について、テキストの記述を見返しておくとスムーズに授業に入れます。
30	総復習（後半）	科目の中での位置付け	本コマは、全30回にわたるWebサイト制作演習の最終回であり、後半の第4部から第6部で扱った実践的な内容の総復習として位置づけられる。具体的には、シングルカラムからマルチカラムへのレイアウト展開、レスポンシブWebデザインによる多デバイス対応、そして外部機能の導入から公開準備に至る一連の制作フローを体系的に振り返る。これにより、受講生が半期を通じて習得した知識と技術を統合し、実用的なWebサイトを独力で構築・運用するための基盤を確立することを目的とする。
		コマ主題細目	① シングルカラムレイアウトの構築とモバイルファーストの視点 ② 多様なレイアウト技術の応用とレスポンシブWebデザインの実践 ③ Webサイトの機能拡張、公開準備、およびトラブルシューティングの総括
		細目レベル	① 本主題では、第4部で取り組んだシングルカラムレイアウトによるWebサイト制作プロジェクトを振り返り、その構築プロセスと設計思想について改めて解説する。まず、シングルカラムレイアウトの特徴である、情報が縦一列に並ぶ単純明快な構造が、特にスマートフォンなどの小さな画面での閲覧に適している点を再確認する。その上で、制作の基軸となった「モバイルファースト」のアプローチについて詳説する。これは、PC向けの複雑なデザインから縮小するのではなく、最小限の要素で構成されるモバイル向けのデザインを起点とし、画面幅が広がるにつれてスタイルを追加していく手法である。授業では、この手法がCSSの記述を効率化し、表示速度の向上にも寄与することを、実際のコード構造（ベースのスタイルとメディアクエリによる追加スタイル）と照らし合わせながら解説する。具体的な制作フローとして、ヘッダー、メインビジュアル（カバー画像とキャッチコピー）、主要コンテンツエリア、そしてフッターに至る各セクションのコーディング手順を概観する。特に、ユーザーの視線を集めるメインビジュアルの配置や、回遊性を高めるためのナビゲーション設計の重要性を強調する。また、サイトに動的なアクセントを加えるインタラクティブ要素として、ボタンやリンクに対するホバーエフェクトの実装方法（:hover擬似クラスの利用）とそのデザイン的な効果についても復習する。さらに、サイトのアイデンティティを示すファビコンの設定など、完成度を高めるための細部の調整についても触れる。この過程を通じて、学生は単にコードを記述するだけでなく、ユーザー体験を考慮した論理的な設計と、効率的な実装順序への理解を深めることとなる。この細目で理解すべき範囲は、モバイルファーストの概念に基づいたシングルカラムサイトの全体構造の設計から、各要素の具体的なコーディング、そして完成に至るまでの一連の制作フローまで。
			② 本主題では、第5部で学習した、より複雑で現代的なWebレイアウトの構築技術と、それらを異なるデバイス環境に適応させるレスポンシブWebデザインの実践について解説する。まず、Webページのレイアウト構築において現在主流となっている二つの強力なCSS機能、すなわちFlexbox（Flexible Box Layout Module）とCSS Grid（Grid Layout Module）について、それぞれの特性と使い分けを復習する。Flexboxに関しては、主に一次元（横方向または縦方向）の要素配置に適している点を確認し、第21回で扱った2カラムレイアウト（メインエリアとサイドバーの並列配置）の実装例を用いて、justify-contentやalign-itemsといった主要プロパティの働きを再整理する。一方、CSS Gridについては、二次元（行と列）のグリッド構造を定義できる強力な機能を解説し、第23回で扱ったタイル型レイアウト（画像やカード状のコンテンツを格子状に並べる配置）の実装を通して、grid-template-columnsなどのプロパティによる柔軟な領域定義方法を復習する。続いて、これらのレイアウト技術を基礎として、画面サイズに応じてデザインを最適化するレスポンシブWebデザインの具体的な実装手法を詳説する。CSSのメディアクエリ（@media）を用いてブレイクポイントを設定し、特定の画面幅を境にレイアウトを切り替える（例：PCでは2カラム、スマホでは1カラム）ための記述ルールを確認する。また、タイル型レイアウトにおける画像の扱いとして、object-fitプロパティを用いたトリミング調整など、見栄えを整えるための実践的なテクニックについても触れる。さらに、トップページ、一覧ページ、詳細ページなど、役割の異なる複数のページをリンクで接続し、サイト全体の統一感を保ちながら回遊性を設計する視点についても再確認する。この細目で理解すべき範囲は、FlexboxとCSS Gridを用いたマルチカラムおよびタイル型レイアウトの構築原理から、メディアクエリを駆使したレスポンシブ対応の応用実装、そして複数ページ連携によるサイト構築まで。
			③ 本主題では、第6部で扱ったWebサイトの実用性を高めるための機能拡張、インターネット上への公開に向けた準備作業、そして制作過程で直面する問題の解決手法について総括する。まず、静的なHTML/CSSサイトに動的な機能や外部リソースを統合する方法を復習する。具体的には、Googleマップによる地図表示、YouTube動画の埋め込み、そしてInstagramやX（旧Twitter）などのSNSタイムラインの表示について、各サービスが提供する埋め込みコード（iframe等）の取得とHTMLへの記述方法を解説する。また、ユーザーからのフィードバックを受け付けるための基本的な手段として、mailtoスキームを用いた簡易的なお問い合わせフォームの実装についても触れる。次に、制作したサイトを広く公開するための準備として、OGP（Open Graph Protocol）の設定について詳説する。SNSでサイトがシェアされた際に表示されるタイトル、説明文、サムネイル画像などを指定するメタタグの記述意義を理解させる。Webサーバーへのファイルアップロードに関しては、FTPクライアントソフトを用いた一般的な転送手順の概要を確認する。最後に、Web制作の実践において避けて通れないトラブルシューティングの重要性について論じる。表示崩れや意図しない動作が発生した際に、ブラウザーのデベロッパーツール（検証機能）を活用してHTML構造や適用されているCSSスタイルを調査し、原因を特定して修正するための基本的なアプローチを再演習する。エラーの原因を論理的に推察し、自力で解決策を見出す能力は、今後の継続的な学習と制作活動において不可欠なスキルであることを強調する。授業の結びとして、半期間で学んだHTML、CSS、Webデザインの基礎知識体系を俯瞰し、今後のスキルアップに向けた展望を示す。この細目で理解すべき範囲は、外部サービスの埋め込みによる機能拡張から、OGP設定を含む公開準備、デベロッパーツールを用いたトラブルシューティングの基本、そして半期の学習内容の全体的総括まで。
		キーワード	① モバイルファースト ② レスポンシブWebデザイン ③ メディアクエリ ④ Flexbox ⑤ CSS Grid
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	Webサイト制作のワークフロー
		復習・予習課題	◆今回授業の復習今回の総復習で再確認した第4部から第6部までの内容、特に「モバイルファースト」の考え方に基づくCSS設計、FlexboxとCSS Gridを用いたレイアウト構築、そしてメディアクエリによるレスポンシブ対応の記述について、自身のこれまでの演習課題のコードを見直しながら復習してください。理解が曖昧な点があれば、テキストの該当する章（CHAPTER 4～8）を読み返し、実際にコードを修正してみることで知識の定着を図ってください。 ◆次回授業の予習本授業で半期のカリキュラムは終了となりますが、Web制作の技術は日進月歩であり、継続的な学習が不可欠です。今後の学習の指針として、教科書巻末の「次は何をしよう？」の項目に目を通し、自身が次に習得すべき技術（例えばJavaScriptやCMSなど）や、挑戦したい制作活動について考えてみてください。また、これまでに作成したWebサイトを整理し、自身のスキルを証明するポートフォリオとしてまとめる準備を始めることを推奨します。

履修判定指標

履修指標	履修指標の水準	キーワード	配点	関連回
第1部：Webサイトの基本概念と制作準備 Webサイト制作に必要なインターネットの基礎知識、ユーザビリティの重要性、および制作環境の構築方法を習得し、制作の全体的な流れと設計図の役割を理解します。	【★☆☆初級】 - インターネットとWebの基本的な違いを説明できる。 - テキストエディターとブラウザーを準備し、起動できる。 - Webサイトには様々な目的と種類があることを認識している。【★★☆中級】 - ユーザビリティ（使いやすさ）がWebデザインにおいて重要であることを説明できる。 - 企画から公開までの一般的なWebサイト制作フローを理解している。 - サイトマップの役割を理解し、簡単なサイト構成図をイメージできる。【★★★上級】 - ワイヤーフレームの役割を理解し、ページの基本的な設計図を作成できる。 - 制作に必要なフォルダ構成を適切に準備・管理できる。 - 良いWebデザインの条件について、ユーザビリティの観点から考察できる。	Webデザイン、インターネット、ブラウザー、ユーザビリティ、テキストエディター、制作フロー、サイトマップ、ワイヤーフレーム	10	1, 2, 3
第2部：HTMLによるWebページの構造化 Webページの骨組みとなるHTMLの基礎を習得します。正しい文書構造の定義、テキストのマークアップ、画像やリンクの配置、フォームの作成など、主要なタグの使い方を実践的に学びます。	【★☆☆初級】 - HTMLの役割を理解し、基本構造（DOCTYPE宣言、html、head、body）を記述できる。 - 見出し（h1-h6）と段落（p）を用いて、文章の基本構造をマークアップできる。 - 箇条書きリスト（ul）と番号付きリスト（ol）を正しく使い分けられる。【★★☆中級】 - imgタグを用いて画像を挿入し、適切な属性（src, alt）を設定できる。 - aタグを用いて、他のページや外部サイトへのハイパーリンクを設定できる。 - tableタグを用いて、基本的な表データを作成できる。【★★★上級】 - formタグとinputタグを用いて、基本的な入力フォームを作成できる。 - divタグやspanタグを用いて、要素を意味のあるまとまりとしてグループ化できる。 - 適切なタグを用いて、文書構造を論理的に整理することができる。	HTML、マークアップ、タグ、要素、属性、DOCTYPE宣言、見出し、段落、リスト、画像、ハイパーリンク、表、フォーム、グループ化	20	4, 5, 6, 7, 8
第3部：CSSによるWebデザインの基礎 HTMLで作成した骨組みにスタイルを適用するCSSの基礎を学びます。文字や背景の装飾、ボックスモデルによる配置調整、FlexboxやGridを用いた現代的なレイアウト技術を習得します。	【★☆☆初級】 - CSSの役割とHTMLへの適用方法（外部ファイル化）を理解している。 - 文字のサイズ、色、フォントの種類を指定する基本的なプロパティを使用できる。 - カラーコードなどを用いて、背景色や文字色を指定できる。【★★☆中級】 - ボックスモデルの概念（content, padding, margin, border）を理解し、余白を調整できる。 - クラス（class）とアイディー（id）セレクタを使い分け、特定の要素にスタイルを適用できる。 - 背景画像を設定し、表示位置や繰り返し方法を調整できる。【★★★上級】 - Flexboxを用いて、要素を横並びにするなどの基本的なレイアウト調整ができる。 - CSS Gridの基礎的な概念を理解し、単純な格子状レイアウトを実装できる。 - レスポンシブデザインの基本的な考え方を理解し、リセットCSSの必要性を説明できる。	CSS、スタイル、プロパティ、セレクタ、カラーコード、背景、ボックスモデル、padding、margin、border、クラス（class）、アイディー（id）、Flexbox、CSS Grid、レスポンシブデザイン、リセットCSS	20	9, 10, 11, 12, 13, 14, 15
第4部：実践 Webサイト制作プロジェクト1（シングルカラム）基礎知識を活かし、シンプルなシングルカラムレイアウトのWebサイト制作を通して、モバイルファーストのアプローチ、実践的なコーディング、基本的なレスポンシブ対応を習得します。	【★☆☆初級】 - シングルカラムレイアウトの特徴を理解し、HTMLで基本的な構造を記述できる。 - ヘッダー、メインコンテンツ、フッターの各セクションを区別してコーディングできる。 - 指定された画像素材を適切な場所に配置できる。【★★☆中級】 - メインビジュアルやキャッチコピーをCSSでスタイリングし、見栄えを整えることができる。 - ボタンなどの要素にホバーエフェクト（マウスオーバー時の変化）を実装できる。 - サイト全体の基本的な余白やフォントの設定をCSSで行える。【★★★上級】 - モバイルファーストの視点に基づき、スマートフォン向けのスタイルから優先して記述できる。 - メディアクエリの基本構文を理解し、画面幅に応じてスタイルを切り替える基礎的なレスポンシブ対応ができる。 - ファビコンの設定など、サイト公開に向けた細部の調整ができる。	シングルカラムレイアウト、モバイルファースト、コーディング、メインビジュアル、キャッチコピー、ホバーエフェクト、フッター、レスポンシブWebデザイン、メディアクエリ、ファビコン	20	16, 17, 18, 19, 20
第5部：応用 Webサイト制作プロジェクト2（多様なレイアウト） 2カラムレイアウトとタイル型レイアウトのページ制作に挑戦します。FlexboxとCSS Gridを活用したより複雑な配置と、それぞれのレイアウトに適した実践的なレスポンシブ対応を習得します。	【★☆☆初級】 - 複数ページで構成されるWebサイトにおいて、各ページを適切なリンクで繋ぐことができる。 - 2カラムレイアウトとタイル型レイアウトの構造的な違いを理解している。 - 画像のトリミング位置を調整するプロパティなどを利用して見栄えを整えられる。【★★☆中級】 - Flexboxを活用して、メインエリアとサイドバーを持つ2カラムレイアウトを構築できる。 - CSS Gridを活用して、画像やテキストをタイル状に並べるレイアウトを構築できる。 - サイト全体でデザインの統一感を意識したスタイリングができる。【★★★上級】 - 2カラムレイアウトにおいて、スマートフォン表示時に1カラムに変更するレスポンシブ対応を実装できる。 - タイル型レイアウトにおいて、画面幅に応じて列数を可変させるレスポンシブ対応を実装できる。 - 複数のレイアウト手法を適切に使い分け、目的のデザインを再現できる。	2カラムレイアウト、タイル型レイアウト、サイドバー、グリッドレイアウト、複数ページ連携、回遊性、デザインの統一感	20	21, 22, 23, 24, 25
第6部：Webサイトの機能拡張と公開・運用 Webサイトに実用的な外部機能を追加する方法、インターネット上への公開準備、および制作時に発生するトラブルの基本的な解決方法について学び、学習成果を総括します。	【★☆☆初級】 - GoogleマップやYouTube動画などの外部コンテンツをWebページ内に埋め込むことができる。 - Webサイトがインターネット上で公開される仕組みの概要を理解している。 - 半期の授業で学んだHTMLとCSSの基礎用語を説明できる。【★★☆中級】 - SNSのタイムライン埋め込みなど、外部サービスとの連携を実装できる。 - OGP（Open Graph Protocol）の役割を理解し、SNSシェア時の表示設定の重要性を認識している。 - 表示崩れなどが起きた際に、どこの記述に原因があるかあたりをつけることができる。【★★★上級】 - Webサーバーへのアップロードに必要なファイルの整理など、公開に向けた準備ができる。 - 制作時の基本的なトラブルシューティングの手順を理解し、単純なエラーを修正できる。 - 自身のスキルを客観的に評価し、今後の学習の方向性を見出すことができる。	外部メディア埋め込み、Googleマップ、YouTube、SNS連携、OGP、公開準備、Webサーバー、トラブルシューティング、デバッグ	10	26, 27, 28, 29, 30

評価方法

評価基準	評語
学習目標をほぼ完全に達成している・・・・・・・・・・・・・	S (100～90点)
学習目標を相応に達成している・・・・・・・・・・・・・・・	A (89～80点)
学習目標を相応に達成しているが不十分な点がある・・・・・・	B (79～70点)
学習目標の最低限は満たしている・・・・・・・・・・・・・・	C (69～60点)
学習目標の最低限を満たしていない・・・・・・・・・・・・・	D (60点未満)

教科書

参考文献

実験・実習・教材費