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の基礎知識
    • セレクタ、プロパティ
    • ボックスモデル
    • スタイルの優先順位
  4. CSSを記述する(実習)
    • divによるグループ化
    • id/classの違い、命名のコツ
    • リセットスタイル
    • 知っていると便利な定番スタイル(clearfixなど)
    • flexbox、floatプロパティを使ったレイアウト
    • テキストのスタイリング
千貫りこのワークショップ

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


使用アプリケーション
Adobe Dreamweaver
講師
千貫りこ
定員
6名
対象
webブラウザやテキストエディタなど、作業に必要なアプリケーションを問題なく操作できる方
適切なマークアップのやり方を知りたい方
CSSの基礎習得にイマイチ自信が無い方
テキストの色・スタイルなど部分的なCSSを記述した経験はあるが、今後はフルCSSレイアウトに挑戦してみたい方
本ページ下の 受講対象レベルチェック問題 を理解できる方