Workshop

千貫りこのXHTML/CSS入門講座

ここ数年、XHTMLとCSSでサイトを制作するのが当たり前になりつつあります。雑誌ではCSSの高度なテクニックに関する特集がひんぱんに組まれ、CSSによるデザイン実装に役立つ書籍も次々と発売されています。しかし、一方の主役であるXHTMLやCSSの基礎について語られることは多くありません。
あなたはトラブルに直面した時に原因を特定できず「対処できない！」とパニックに陥った経験はないでしょうか？もしかしたらそれは、XHTMLとCSSの「基礎力不足」が原因かもしれません。

本講座では「HTMLの基本をある程度理解している方」を対象として、「適切なマークアップを知りたい」「ボックスモデルの概念を理解したい」「フルCSSレイアウトへの苦手意識を克服したい」という方のために、XHTML文書をきちんとつくり込むためのポイントと、「2カラムレイアウト」など基本的なCSSの記述方法を実習（Dreamweaverを使用）を交えて学習します。

XHTMLの正しい記述方法をしっかり押さえて、XHTML＋CSSによるサイト制作のメリットを100%享受しましょう。またCSSの基礎を再確認することで、苦しまぎれのハックなど場当たり的なコーディングから脱却しましょう。

Get Adobe Flash player

講座レベルlevel1

■カリキュラム概要

  • 1.XHTML＋CSSの基礎知識

    • HTMLとXHTMLの違い
    • XHTML＋CSSによる制作のメリット
    • XHTML＋CSSのよる制作のワークフロー
    • 仕様書、タグリファレンス

  • 2.XHTML文書を作る（実習）

    • 文書型宣言と表示モード
    • 文書構造を意識する
    • ブロックレベル要素とインライン要素
    • よく使うタグ
    • マークアップのコツ
    • バリデーション

  • 3.CSSの基礎知識

    • メディアタイプ
    • セレクタ、プロパティ
    • ボックスモデル
    • スタイルの優先順位
    • CSSファイルの分割

  • 4.CSSを記述する（実習）

    • divによるグループ化
    • id/classの違い、命名のコツ
    • リセットスタイル
    • 知っていると便利な定番スタイル（clearfixなど）
    • floatを使った2カラムレイアウト
    • テキストのスタイリング
    • バリデーション

  • 5.CSSあれこれ

    • CSSハック、条件コメント
    • IE6対応
    • 困ったときの情報収集

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用アプリケーション
Adobe Dreamweaver CS3/CS4
講師
千貫りこ
定員
6名
対象
HTMLの基本はある程度理解している方
適切なマークアップのやり方を知りたい方
CSSの基礎習得にイマイチ自信が無い方
テキストの色・スタイルなど部分的なCSSを記述した経験はあるが、今後はフルCSSレイアウトに挑戦してみたい方
本ページ下の 受講対象レベルチェック問題 を理解できる方。
料金
29,800円（税込み）

2010年8月3日（火）11:00～18:00残り1席

お申し込み：2010年8月3日（火）

2010年8月7日（土）11:00～18:00残り5席

お申し込み：2010年8月7日（土）

2010年9月2日（木）11:00～18:00残り5席

お申し込み：2010年9月2日（木）

受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。

■受講対象レベルチェック問題

＊全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。

問1：

「見出し」「段落」「順不同リスト（箇条書き）」をマークアップするのに使うタグをそれぞれ答えてください。

問2：

以下のコードが示しているものを答えてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

問3：

以下のスタイルが適用されている要素について、文章（例：「○○」というid名が付けられたdiv要素の中の...）で答えてください。また、この記述から想像される表示結果を答えてください。

div#container div.content h1 {
  margin: 10px;
  background-color: #cc0000;
  font-weight: normal;
}

答1：

hn、p、ul（li）

答2：

DOCTYPE宣言。XHTMLのバージョン。

答3：

「container」というid名がつけられたdiv要素に含まれる、「content」というclass名がつけられたdiv要素に含まれたh1要素。
表示結果は、上下左右に10pxのマージンをとっており、背景色は赤、（h1だが）太字ではない。

Information

写真：千貫りこ

Instructor千貫りこ

Webクリエイター

プロフィールを見る

voice

受講頂いた方からのコメントをご紹介しています。

タグの書き方や、CSSの書き方など基本的なことが、しっかりと理解することができました。

アルバイト

少人数で色々と質問ができてとても良かったです。またハンズオンなので実践的でわかりやすかったです。

Web制作会社

【「複数割」受講チケット最大23%OFFキャンペーン】有効期限はお買い求め日から1年間。募集中の全ての講座にご利用いただけます！！キャンペーンの詳細はこちら

【10,000円キャッシュバックキャンペーン】 2講座受講の方に10,000円のキャッシュバック！！キャンペーンの詳細はこちら

イメージ：Webデザイン 知らないと困る現場の新常識100
Webデザイン 知らないと困る現場の新常識100（共著）

トップページに戻る