セマンティックXHTML+CSSレイアウト中級講座
Web標準とドキュメントツリーをキチンと理解し、正しいCSSレイアウトのウェブページをマスターする2日間の講座です。 ブラウザの特徴を把握し、適切に対処する方法を身につけます。
カリキュラム
開発設定/利用ブラウザ
- TeraPad / Firefox / Firebug / IE-Tester
Web標準の理解を深める
- WaSP
- ドキュメントツリー
- セマンティックウェブ
セマンティク・マークアップの基本
- マークアップ【実習1】
- XHTMLコンパウンド(リスト/リストのネスト)
- XHTMLコンパウンド(書籍/会話文)
知っておくべきマークアップ
- テーブル要素の正しいマークアップ
- Form要素の正しい基本のマークアップ
- Form要素の正しい応用のマークアップ
- ロゴの基本の正しいマークアップ
- ナビゲーションの正しいマークアップ
- ウェブサイト全体のマークアップ設計の基本
ブラウザ表示相違の理解と対策
- IE-Testerの利用
- ブラウザスタイルシートの初期化(2009年版)
- font-sizeの理解と設定
- リスト要素へのCSSの適用
レイアウトに必要なfloatとpositionの考え方
floatと後続要素の関係- dl要素の2コラム
floatの仕組みfloatプロパティの応用(左右交互のプロパティ)- positionプロパティの正しい基本とz-indexの設定
CSSレイウアトのページの作成【実習】
- table要素へのスタイルシート
- Form要素へのスタイルシート
- Form要素の正しい応用のマークアップ
- グローバルナビゲーションのCSS(ブロックレベル要素とインラインレベル要素の複合)
- マルチバックグラウンド
将来を見据えたIE対策【実習】
- プログレッシブエンハンスメント
- 将来性を考えたIE7への対応
- 将来性を考えたIE8への対応
- Firefoxのスタイルシートリセット
- 現ブラウザ対応の適切な外部スタイル(パスフィルター)の適用方法