HTML/CSS講座HTML/CSS講座

千貫りこのHTML/CSS初級講座

講座レベル1

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

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

千貫りこ

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

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


修了目標

この講座をうけるとHTMLとCSSの基礎的なスキルが身につきます。

  • 基本的なレイアウト・装飾のやり方
  • HTMLタグを選ぶときの考え方
  • CSSの記述方法

カリキュラム概要

  1. HTML+CSSの基礎知識
    • HTML+CSSによる制作のメリット・ワークフロー
    • 仕様書、タグリファレンス
  2. HTML文書を作る(実習)
    • 文書型宣言と表示モード
    • 文書構造を意識する
    • ブロックレベル要素とインライン要素
    • よく使うタグ
    • マークアップのコツ
    • バリデーション
  3. CSSの基礎知識
    • メディアタイプ
    • セレクタ、プロパティ
    • ボックスモデル
    • スタイルの優先順位
    • CSSファイルの分割
  4. CSSを記述する(実習)
    • divによるグループ化
    • id/classの違い、命名のコツ
    • リセットスタイル
    • 知っていると便利な定番スタイル(clearfixなど)
    • floatを使った2カラムレイアウト
    • テキストのスタイリング
    • バリデーション
千貫りこのワークショップ

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


使用アプリケーション
Adobe Dreamweaver
講師
千貫りこ
定員
6名
対象
HTMLの基本はある程度理解している方
適切なマークアップのやり方を知りたい方
CSSの基礎習得にイマイチ自信が無い方
テキストの色・スタイルなど部分的なCSSを記述した経験はあるが、今後はフルCSSレイアウトに挑戦してみたい方
本ページ下の 受講対象レベルチェック問題 を理解できる方
会場
ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分

受講料

29,800円(税込み)

受講料には、テキストやノートPCの使用料金などを含んでおります。入会金などは一切必要ありません。

最大30%OFFまでの割引あります

  • 早割30
  • 早割10
  • 遠方割
  • 学割
  • 主婦割

開講日・お申し込み

2017年06月30日(金)11:00~18:00残り5席

2017年08月03日(木)11:00~18:00残り6席

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


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

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

問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だが)太字ではない。



受講者の声

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

一般企業勤務 契約社員

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

一般企業勤務正社員

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

一般企業勤務

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

一般企業勤務

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

アルバイト

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

Web制作会社

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

一般企業勤務

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

Web制作会社

いちから丁寧に教えていただいたことで仕組みを理解することが出来た。

Web制作会社勤務・正社員

これまで自分でマニュアルなどを見ながら作業をしていましたが、あらためてタグの意味やマークアップの大切さを学べ、大変ためになりました。 授業もとても親切でした。

一般企業勤務 正社員

HTML/CSSの基礎となる知識を得ることができ、また、独学ではなかなか学べないポイントや最新の情報を共有していただけたので、大変為になりました。

正社員

とてもわかりやすく、ていねいに、そしてただテキストに沿うだけでなく、個々の必要に応じてさまざまなプロの技や経験も伝えてくださったので、本当に勉強になりました!

フリーランス その他

とてもわかりやすい説明と、実務(企業サイトの更新など)の参考になる実習で受講してよかったと思いました。

一般企業勤務 契約社員

少人数だったので個人のペースに合わせ理解しながら進めたのでしっかり身についたように感じます。 テキストも分かりやすかったです。

Web制作会社勤務 正社員

基本的なことは個人的に勉強していたり、学校で学んだりしていたのですが、知識や方法などが所々で抜けていたところがあったので改めて基礎を学べてよかったです。

Web制作会社勤務 正社員

HTMLは全くの初心者なのですが、非常にわかりやすく、1ステップずつ進めてくださったので、勉強になりました。

一般企業勤務 正社員

今回作業順序を示していただいたので、綺麗に正しい順序でコーディングすることができました。

一般企業勤務 正社員

基本的にこれまで自己流で勉強したことが整理できてよかったです。

フリーランス

テキストの情報だけでは理解できなかったことや疑問に思っていたことを解消できてとても良かったです。

一般企業勤務 正社員

普段本だけ読んで学習しているので、実はわかっていない箇所があきらかになり、ためになりました。

Web制作会社勤務・正社員

読み方、書き方がとてもわかりやすかったです。

Web制作会社勤務・アルバイト

今回HTMLとCSSの基礎固めをしっかりしたいと思いこの講座を受講しましたが、分かりやすい説明でよかったです。

学生・求職中

一日で今までの一人でやっていたときより、とても早いスピードですすめられました。

一般企業勤務 派遣社員

CSSの実装の流れを実際に体験してみたことで、既存CSSの修正ポイントをつかむこつが分かったように思います。

Web制作会社勤務・正社員

Dreamweaverに代わる役に立つツールなど教えていただけて参考になりました。

一般企業勤務 派遣社員

今までなんとなくでやっていたことが「正しかった!」と確信が持てたり、 「間違ってた、、」と気が付くことができました。

一般企業勤務 正社員

  • Twitter
  • Instagram
  • Facebook