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

シラバス

Webデザイン科 2024年度入学生

科目名 HTML & CSS実習 作成日 2024/03/13
区分 必修 講義/実習
開催時期 1年次 前期
講義・演習駒数/週 0駒
実習・実験駒数/週 4駒
合計駒数/週 4駒
総時間数 120時間
総単位数 4単位
企業連携
授業の目的 Webサイトの根幹であるHTMLとCSSの正しい知識とスキルを習得することを目的とする。
到達目標 文章構造に沿って適切なマークアップが出来る。 CSSを使って自在にレイアウトを組む事が出来る。 HTML、CSS、JSそれぞれの役割を理解し、標準仕様に沿ったWebサイトを作成することが出来る。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合 40% 10%  % 10% 30%  %  % 10%
評価基準
①文章構造に沿った適切なマークアップができること。 ②CSSを使ってレイアウト、デザインを組む事ができること。 ③WebにおけるHTML、CSS、JSのそれぞれの役割を説明できること。
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 川島 温哉
テキスト・参考文献 できるポケット Web制作必携 HTML&CSS全事典
実務経験有無  
Webディレクター、フロントエンドエンジニアとして数々の企業サイトの構築に従事した実務経験がある。その経験から本科目の実習において現場で使えるスキルを身につけられるよう実践的な教育を行う。 
関連科目 JavaScript実習、Webアプリケーション制作Ⅰ、Webアプリケーション制作Ⅱ、サーバーサイドプログラミングⅠ、サーバーサイドプログラミングⅡ  履修前提   

授業計画

回数 学習目標 学習項目
1 HTMLの基本書式のルールを理解し適切に記述できる。ごく簡単なHTMLを使ったページを作成出来る。   HTMLの基本書式。body、html、head、title等の基本的な要素の意味と役割を学習する。 テキストエディタの使い方。 
【理解度確認】課題
2 良く使われるHTML要素の意味とその役割を説明出来る。それらの要素を使い簡単なページを作成出来る。  Webサイトで良く使われるHTMLの頻出要素について学ぶ。 
【理解度確認】課題
3 複数ページを使い相互にリンクを設定できる。相対パス、絶対パスの違いを説明出来る。   文字コードの指定、HTMLのバージョンによる違い、相対パスと絶対パスの違い、リンクの設定の仕方について学ぶ。 
【理解度確認】課題
4 セクショニングコンテンツに属する要素の役割とアウトラインの仕組みを説明出来る。それらの要素を適切に使い文章構造に沿ったマークアップが出来る。   tableの作り方、文章構造に沿ったマークアップ、セクショニングコンテンツ  
【理解度確認】課題、小テスト
5 CSSを用いて文字の大きさや色、背景などを変えることが出来る。 idとclassを適切に使い分けることが出来る  CSSの基本書式、idとclassの付け方、ボックスモデル 
【理解度確認】課題
6 CSSの優先度を理解し、基本的なセレクタを使うことが出来る。 簡単なレイアウトを組むことが出来る。  CSSの基本セレクタ、優先度、基本的なレイアウトの組み方  
【理解度確認】課題
7 CSS Gridを使い簡単なレイアウトを組む事が出来る。  CSS Gridを使ったレイアウトの組み方について学ぶ。CSS Gridの仕組みとCSS Gridで使うプロパティについて学ぶ。 
【理解度確認】課題
8 CSS Gridを使い少し複雑なレイアウトを組む事が出来る。  CSS Gridを使ったレイアウトの組み方について学ぶ。 
【理解度確認】課題
9 flexboxとfloatを使ったレイアウトを組む事が出来る。  flexboxとfloat使ったレイアウトの組み方について学ぶ。 
【理解度確認】課題
10 positionプロパティを使ったレイアウトを組む事が出来る。  positionプロパティの特徴と利用方法について学ぶ。 
【理解度確認】課題
11 RWDの技術を理解し、基本的なRWDのサイトを作成する事ができる。  RWD(レスポンシブ Webデザイン)の技術的要素と特徴を学ぶ。 
【理解度確認】課題
12 企画に沿って情報を整理し、画面を設計することが出来る。   実践的なWebサイトの制作① 情報の整理、企画、設計  
【理解度確認】企画書の作成
13 Fiigma、Adobe XDやPhotoshopなどでデザインを作成し、それを適切にコーディングすることが出来る。  実践的なWebサイトの制作② 画面の設計、モックの作成  
【理解度確認】課題
14 W3Cの仕様に沿ったWebサイトを作成することが出来る。またGitを利用したコードの管理方法を学ぶ。  Gitによるコードのバージョン管理方法、VS CodeでのGitの使い方  
【理解度確認】課題
15 企画の内容、作成した作品について的確にプレゼン出来る。   作品プレセンテーション 
【理解度確認】プレゼンテーション