
XHTML+CSS未経験者~初心者向け講座。
基礎知識とマークアップの基本的なスタイルを身に着けます。
【カリキュラムが新しくなりました!】
1講座は100分。学びたい部分だけチョイスして受講できるので、理解している内容は省き、知りたいところを集中的に習得できます。
![]()
- Web標準を理解する
- シンプルなソースを書くために、XHTMLマークアップを理解する
![]()
- XHTML・CSSとは何か?
- Web標準とは何か?
- Web標準に準拠してWebページを作ることのメリット
- ひな型からXHTML文書を作るときの注意点
- 文書構造に即したマークアップの仕方
- XHTMLマークアップとバリデート(文法チェック)実習
- 基本的なCSSの使い方
- 習得度チェック 小テスト
![]()
![]()
- CSSの基本ルールを理解する
- テキストにマウスをあてるとテキスト色をかえられる(マウスオーバー)
- margin、padding など、余白の計算を理解しボックスモデルの計算ができるようになる
![]()
- XHTMLの復習
- CSSの基本ルール
- 様々なセレクタの扱い方
- CSSコーディング実習
- 背景画像の扱い方
- 文字の回り込みとCSSハック
- マウスに反応するテキストリンク
- CSSレイアウトとボックスモデルの概念
- ボックスモデルの計算練習
- 習得度チェック 小テスト
![]()
![]()
- 実務に沿ったワークフローを理解できる
- CSSによる2段組み、3段組みのレイアウトを実習できる
- ブラウザの初期スタイルのリセット方法を知り、バージョンごとに異なるレイアウト崩れを修正できるようになる
![]()
- XHTMLとCSSの復習
- 実務に即した制作ワークフローとは
- 画面設計の考え方
- フルCSSレイアウトのための下準備とは
- ブラウザの表示モードとDOCUTYPE宣言
- ブラウザ初期スタイルのリセット
- CSSによる2段組み・3段組みレイアウトの組み方
- 実践的レイアウト実習
- 習得度チェック 小テスト
![]()
![]()
- 実務に沿ったワークフローを理解できる
- ヘッダーやフッターによく使われる横並びメニューをリストで組めるようになる
- スタイルシートのロールオーバーを習得する
![]()
- CSSによる段組みレイアウトの復習
- 後続要素が無い場合のフロート解除テクニック
- CSSプロパティ記述の復習
- CSSによる画像見出しの作り方
- アイコン付きリンクの作り方
- 横並びメニューの作り方1
- 横並びメニューの作り方2
- ロールオーバーメニューの作り方
- CSS応用実習
- 習得度チェック 小テスト
![]()
担当講師

草野 あけみ氏
リクルート系列の制作会社でWebサイトの企画・デザインから制作・運用、開発チームとの折衝、外注管理など幅広い業務を担当。
2004年に独立し、フリーランスで(X)HTML+CSSコーディング専門のWEBクリエーターとして第一線で活躍中。
ディレクター・デザイナー・コーダー・プログラマーの分業体勢が整った中規模以上の案件を多くこなす中で、デザインを忠実に再現しつつ、プログラム開発者にも読みやすく、SEO対策としても有利な簡潔でスマートなコーディングを大切にしている。











