HTML5基礎 CSS基礎

第72はじめての HTML5+CSS入門 基礎講座

最新のHTML5情報を取り入れたHTMLとCSS入門基礎講座です。
これからのマークアップはHTML5になるため、入門の段階からでも習得できるようにカリキュラムに組み込んでいます。 HTML5のマークアップは初心者には理解しにくいものですが、HTML5の基本コンセプトを解りやすく解説しています。

CSS編では、レイアウトで必要なプロパティの理解度を上げるため無理なく覚えることができるように解説し、実習を通して挙動を確認していただきながら段組みレイアウトまで行います。 また、HTML5の新要素はブラウザによっては認識されずCSSの表示が異なってしまいます。このような問題に対応するブラウザ対策方法など、現場で使えるぶれない基礎固めが可能です。

対象

  • HTML/CSSの要素を理解してウェブサイトを制作したい方
  • HTML5の基本を勉強したい方
  • CSSの基本を勉強したい方
  • 1ページにdivを10個以上でマークアップする方
  • Dreamweaver(オーサリングソフト)は利用するが、デザインビューでコーディングに頼ってしまっている方

カリキュラム

HTML5とWeb標準

  1. HTML5の誕生とその背景と今後の動き
  2. なぜ、HTML5にする必要があるのか?
  3. Web標準とは?そのビジネス面でのメリットなど
  4. DOCTYPE スイッチ

HTML5の文法

  1. 要素の使い方
  2. HTML5の文法の理解

HTML5の文書構造

  1. 文書構造の骨格
  2. 各要素の解説
  3. HTML Validatorの使い方
  4. ブラウザの歴史と種類
  5. 良く使われる要素の解説
  6. マークアップ実習
  7. アウトラインの理解

CSS基礎

  1. CSSの歴史とブラウザの状況
  2. CSS記述方法を学ぶ
  3. メディアタイプ
  4. @import規則
  5. CSS優先スタイルの解釈方法
  6. ブラウザの初期化
  7. 擬似要素

CSSスタイルとレイアウトの基礎をマスター【実習】

  1. ブロックレベル、インライン要素のスタイル
  2. CSSスタイルデザイントピックス
  3. floatの仕組み
  4. 検証ツールの紹介と実習を通しながら使用

実習環境で利用するソフト

Dreamweaverなど、どのソフトでも利用できるための基礎力を付けていただくために (utf-8が入力できる)テキストエディタとCSSサポートの良いブラウザを利用して実習していただきます。

  1. Windows:TeraPad
  2. Mac:ミミカキ
  3. Firefox
  4. Opera
  5. Chrome
*パソコン持参される方:Dreamweaver などの使い慣れたソフト