Workshop

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

雑誌ではCSSの高度なテクニックに関する特集がひんぱんに組まれ、CSSによるデザイン実装に役立つ書籍も次々と発売されています。しかし、一方の主役であるHTMLやCSSの基礎について語られることは多くありません。

あなたはトラブルに直面した時に原因を特定できず「対処できない！」とパニックに陥った経験はないでしょうか？もしかしたらそれは、HTMLとCSSの「基礎力不足」が原因かもしれません。

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

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

Get Adobe Flash player

講座レベルlevel1

■カリキュラム概要

  • 1.HTML＋CSSの基礎知識

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

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

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

  • 3.CSSの基礎知識

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

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

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

  • 5.CSSあれこれ

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

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

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

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

お申し込み：2012年5月17日（木）

2012年6月15日（金）11:00～18:00残り5席

お申し込み：2012年6月15日（金）

2012年7月13日（金）11:00～18:00残り6席

お申し込み：2012年7月13日（金）

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

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

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

問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

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

一番知りたい基礎技術だったので、大変勉強になりました。また時間が足りない部分は再度受講でもお願いできればと思います。

一般企業勤務 契約社員

あやふやなところが解決したのでよかった

一般企業勤務 正社員

本だけでは流してしまう部分も、しっかりと確認しながら分かりやすく解説してくださったので、楽しく学ぶことができました。すぐに使ってみたい便利なツールやHTML5やCSS3についても交えてくださり、より一層興味深かったです。アットホームな雰囲気で質問もしやすく、丁寧にお答えいただき、感謝しています。

一般企業勤務

独学だけでは得られない貴重な知識が得られました。ありがとうございます。

一般企業勤務

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

アルバイト

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

Web制作会社

CSSでスタイルを設定するには、HTMLで正しいタグ付けがされていることと、divタグでの区切り方がポイントになると思いました。実際に手を動かしてみることで、理解が深まったと思います。

一般企業勤務

コーディングに苦手意識があり、セミナーなどなかなか参加しにくかったのですが今回のようなセミナーであれば、また気軽に参加したいなと思いました。

Web制作会社

67WS channel

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

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

安心サポート始めました 一度ご受講された講座に、6ヶ月間無料で再受講できます

イメージ：プロのWebクリエイターになるための教科書
プロのWebクリエイターになるための教科書

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

トップページに戻る