HTML/CSS講座HTML/CSS講座

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

講座レベル2

「コーディング」という作業は「ビジュアルデザインを実装すること」とイコールであると捉えられがちです。しかしHTMLは本来、デザインの影響を受けるべきではありません。あなたは、デザイン実装に気をとられるあまり「デザイン前提のHTML」を記述していませんか?

千貫りこ

本講座では「CSSレイアウトにある程度慣れている方」または、「 千貫りこのHTML/CSS初級講座 」の履修相当の理解がある方を対象にしています。

無理のないHTMLを土台としてデザインを実装するためのCSSや、複雑なレイアウトを実現するためのCSSを、実習を通して習得します。またトラブル発生時の対処方法や、知っておくと便利なCSSファイルの管理方法など、サイト制作にまつわる実践的なテクニックを習得します。


修了目標

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

  • アクセシビリティに配慮したマークアップのやり方
  • より柔軟なレイアウト方法
  • HTMLソースの記述順にとらわれない配置(positionプロパティ)
  • webサイト制作関連の最新情報

カリキュラム概要

  1. "正しい"HTMLを記述する
    • 要素の判断方法
    • ケーススタディ
  2. ワンランク上のHTML
    • 画像のaltについて
    • 情報の並び順
    • バリデーションについて
  3. 実践的CSSのあれこれ
    • ボックスモデルについておさらい
    • スタイルの優先順位
    • ルールづくり
    • トラブル発生時のデバッグ方法
  4. CSSを記述する(実習)
    • 段組
    • 横並びのボックスの、見かけの高さをそろえる
    • 横並びのボックス内にあるアイテムの縦位置をそろえる
    • displayプロパティのつかいどころ
千貫りこ

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


使用アプリケーション
Adobe Dreamweaver
講師
千貫りこ
定員
6名
対象
千貫りこのHTML/CSS初級講座 」の履修相当の理解がある方
マークアップの基本は知っているが、さらに理解を深めたい方
より効率的にHTML+CSSでサイトをつくる方法を知りたい方
CSSレイアウトの基本は知っているが、さらに活用方法を知りたい方
本ページ下の 受講対象レベルチェック問題 を理解できる方
会場
ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分

受講料

29,800円(税込み)

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

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

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

開講日・お申し込み

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

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

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


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

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

問1: 以下のHTMLのp要素に装飾をほどこしたいとき、CSSのセレクタはどのように記述しますか?
ただし、IE6以上のモダンブラウザにスタイルを適用できることが条件です。3つお答えください。

<body>
<div class="section">
<h2>セレクタ</h2>
<p class="text">セレクタにはいろいろな記述方法があります。</p>
</div>
</body>

問2: 以下のHTMLに問題点はありますか?あるとすれば何が問題なのでしょうか?

<a href="sample.html" target="sample">サンプルページへの<div style="color:red">リンク</div></a>

答1: p、div p、div.section p、
div.section p.text、.section .text など

答2: インライン要素であるa要素の内側に、ブロックレベル要素であるdivが配置されていること。



受講者の声

ディスプレイタグを、ちゃんと理解しながら使っていなかったので、今後は、使いどころを理解して使えそうです。同じく横並びにするのを解除するタグを別途divで囲っていたので、今後は、よけいにdivタグで囲まないようにWebサイトが作成していきたいと思います。

一般企業勤務 正社員

とても分かりやすい説明で、今までもやもやしていた部分がクリアになってきました!復習したいと思います!初めて本格的なセミナーを受講しましたが、いろいろと意識が変わりました。セミナー情報などもたくさん教えていただき、情報量も豊富でした。ありがとうございました!

Web制作会社勤務

入門と今回の中級講座で何とかやっていけそうです。ありがとうございました。

その他 正社員

意味をあらあめて考えたり、いつもあまり使用していない、またわかっていない部分など勉強・復習になりました。ありがとうございました。

フリーランス

丁寧な講座内容で満足です。HTML5の話しや、すぐ使えるチップスや書籍の紹介もあって今後とても助かりそうです。

求職中 その他

今まで何となく制作してましたが、知識整理ができました。中級ということで入門より一歩踏み込んだ実用TIPsが中心でよかったです。

一般企業勤務 正社員

概念が理解することができました。あとは、どんどん作っていきたいと思います!

一般企業勤務 正社員

とても良かったです。すぐに使える技をたくさん教えていただきありがとうございました。千貫先生の授業はまた受けてみたいので、別の内容を増やしてほしいです。

一般企業勤務 正社員

先週、HTML/CSS入門講座を受講しました。本日忘れないうちにと思い、HTML/CSS中級講座を受講しましたが、受講して良かったです!分かり易い説明で勉強になりました。

Web制作会社勤務 その他

説明が詳しく丁寧なので、どちらかというと初心者レベルの私でもなんとかやりきることができました。

一般企業勤務 契約社員

受講内容だけでなく、さまざまな質問にお答えいただき、 わかりやすかったです。

一般企業勤務 正社員

人数が少なかったので、たくさん質問できました。

一般企業勤務 正社員

今まで勉強してきた分かりずらかったところに手が届いた気がします。 もう一度復習してさらに理解を深められたらと思いました。

一般企業勤務 契約社員

中級編も実践的な内容でしたので、大変ためになりました。

一般企業勤務 正社員

positionのrelativeとabsoluteの使い方がよくわかりました。 教えてくれるかたの説明のしかたでぜんぜんわかりやすさが違うと思いました。

一般企業勤務 その他

進行スピードが早すぎないのでビギナーでもついていきやすかったです。

一般企業勤務 正社員

  • Twitter
  • Instagram
  • Facebook