セマンティックXHTML+CSSレイアウト中級講座

Web標準とドキュメントツリーをキチンと理解し、正しいCSSレイアウトのウェブページをマスターする2日間の講座です。 ブラウザの特徴を把握し、適切に対処する方法を身につけます。

カリキュラム

開発設定/利用ブラウザ

  1. TeraPad / Firefox / Firebug / IE-Tester

Web標準の理解を深める

  1. WaSP
  2. ドキュメントツリー
  3. セマンティックウェブ

セマンティク・マークアップの基本

  1. マークアップ【実習1】
  2. XHTMLコンパウンド(リスト/リストのネスト)
  3. XHTMLコンパウンド(書籍/会話文)

知っておくべきマークアップ

  1. テーブル要素の正しいマークアップ
  2. Form要素の正しい基本のマークアップ
  3. Form要素の正しい応用のマークアップ
  4. ロゴの基本の正しいマークアップ
  5. ナビゲーションの正しいマークアップ
  6. ウェブサイト全体のマークアップ設計の基本

ブラウザ表示相違の理解と対策

  1. IE-Testerの利用
  2. ブラウザスタイルシートの初期化(2009年版)
  3. font-sizeの理解と設定
  4. リスト要素へのCSSの適用

レイアウトに必要なfloatpositionの考え方

  1. floatと後続要素の関係
  2. dl要素の2コラム
  3. floatの仕組み
  4. floatプロパティの応用(左右交互のプロパティ)
  5. positionプロパティの正しい基本とz-indexの設定

CSSレイウアトのページの作成【実習】

  1. table要素へのスタイルシート
  2. Form要素へのスタイルシート
  3. Form要素の正しい応用のマークアップ
  4. グローバルナビゲーションのCSS(ブロックレベル要素とインラインレベル要素の複合)
  5. マルチバックグラウンド

将来を見据えたIE対策【実習】

  1. プログレッシブエンハンスメント
  2. 将来性を考えたIE7への対応
  3. 将来性を考えたIE8への対応
  4. Firefoxのスタイルシートリセット
  5. 現ブラウザ対応の適切な外部スタイル(パスフィルター)の適用方法