1. トップ
  2. 学校紹介
  3. 情報公開
  4. 学科情報
  5. シラバス - 科目一覧

シラバス

AIシステム科 2024年度入学生

科目名 HTML&CSS 作成日 2024/03/12
区分 必修 実習
開催時期 1年次 前期
講義・演習駒数/週 0駒
実習・実験駒数/週 2駒
合計駒数/週 2駒
総時間数 60時間
総単位数 2単位
企業連携
授業の目的 Webサイトが表示される仕組み、HTML Living StandardとCSSによる基本的なWebサイトを構築出来るようになることを目的とする。
到達目標 Webサイトが表示される仕組みを説明出来る。 HTML Living StandardとCSSによってWebサイトを作成出来る。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合 40% 20%  % 40%  %  %  %  %
評価基準
①Webサイトが表示される仕組みを説明出来ること。 ②HTML Living StandardとCSSによってWebサイトが作成出来ること。
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 宇山 亮
テキスト・参考文献 オリジナルテキスト
実務経験有無  
システムエンジニア・プログラマとして、Webシステム開発に従事した実務経験がある。その経験から取得した知識とスキルを活かして、本科目のWebサイト作成技術に対する職業実践的な教育を行う。  
関連科目 クライアントサイドプログラミングⅠ・Ⅱ、サーバーサイドプログラミングⅠ・Ⅱ、オブジェクト指向分析・設計Ⅰ・Ⅱ、卒業研究   履修前提   

授業計画

回数 学習目標 学習項目
1 Webサイトが表示される仕組みを説明出来る。HTML文書の基本的な構造が説明出来る。   マークアップ言語の歴史と発展を踏まえた上で、HTML5とCSSの役割と用途、クライアントバとサーバ間の通信の仕組み、Webブラウザの働きについて学習する。また、HTML文書の基本的な構造についても学習する。  
【理解度確認】小テスト、練習問題
2 HTML Living Standardに準拠したHTML文書を作成出来る。   HTML (1):HTML Living StandardにおけるDOCTYPE宣言およびmeta要素の働き、適切なHTML5の文書の記述方法について学習する。併せて、要素の構成についても学習する。  
【理解度確認】小テスト、練習問題
3 文書、リストを利用したWebサイトを作成出来る。   HTML (2):見出し、段落などWebサイト作成上必須となる要素、リスト要素について学習する。  
【理解度確認】小テスト、練習問題
4 画像、動画等のリソースを指定する要素を利用したWebサイトを出来る。   HTML (3):URIの記述方法を踏まえた上で、リソースの指定方法について学習する。画像や動画等を取り扱うimg、video等の要素について学習する。 
【理解度確認】小テスト、練習問題
5 サイト内リンクを利用したWebサイト、表を利用したWebサイトを作成出来る。   HTML (4):主にa要素、table要素の使用方法を学習する。  
【理解度確認】小テスト、練習問題
6 header、main、footer要素などを用いて、Webサイトの基本構造が説明でき、それに基づいたWebサイトを作成出来る。   HTML (5):Webサイトの基本構成要素となるheader、main、footerなどの要素について学習する。  
【理解度確認】小テスト、練習問題
7 CSSの基本的なプロパティを利用したWebサイトを作成出来る。   CSS (1):CSSの基本文法及び主要なプロパティ等について学習する。また、style要素によるCSSの指定方法、link要素による外部CSSの読み込み方法等について学習する。  
【理解度確認】小テスト、練習問題
8 セレクタの組合せ、優先順位について説明出来る。主要な擬似クラス、擬似要素を利用したWebサイトを作成出来る。  CSS (2):タイプセレクタ、クラスセレクタ等の各種セレクタ、及びそれらの組合せ、優先順位について学習する。また、link、hover等の主要な擬似クラス、主要な擬似要素についても学習する。 
【理解度確認】小テスト、練習問題
9 CSSにおける色、大きさについて説明出来る。色、大きさを指定してテキストを修飾出来る。  CSS (3):CSSにおける色、大きさの扱い、テキストを修飾するプロパティについて学習する。  
【理解度確認】小テスト、練習問題
10 ボックスモデルについて説明出来る。  CSS (4):ボックスモデルについて学習する。また、ボックスモデルを利用した基本的なレイアウトについて学習する。  
【理解度確認】小テスト、練習問題
11 ボックスモデルについて説明出来る。  CSS (5):ボックスモデルにおける背景について学習する。 
【理解度確認】小テスト、練習問題
12 ボックスモデルについて説明出来る。  CSS (6):ボックスモデルにおける位置の指定について学習する。 
【理解度確認】小テスト、練習問題
13 様々なレイアウトのWebサイトを作成出来る。  CSS (7):フレックスボックスを利用したレイアウトについて学習する。  
【理解度確認】練習問題
14 様々なレイアウトのWebサイトを作成出来る。  CSS (8):グリッドレイアウトを利用したレイアウトについて学習する。 
【理解度確認】練習問題
15 総合テストによって学習内容の理解度を確認する。  これまでの学習内容の総合テストを実施する。 
【理解度確認】総合テスト