Adobe Dreamweaver CS6CSSデザイン技法 基礎講座
公開講座についてのお知らせ
2014年3月末をもちまして「公開講座」を、終了とさせていただくこととなりました。
サービス開始よりご愛顧いただき、誠にありがとうございました。
なお今後は、「公開講座」にて培ったノウハウを盛り込みながら、同ブランドの『法人研修』につきまして、一層充実したサービスを提供してまいります。
つきましては引き続きご愛顧賜りますよう、よろしくお願い申し上げます。
概要

Adobe Dreamweaver CS6 CSSデザイン技法 基礎講座は、Adobe Dreamweaver CS6(アドビ ドリームウィーバーCS6)初心者の方、またはWebサイト制作の基礎を習得したい方を対象に、アプリケーションの基本的な使い方や実践的なコーディングのポイントを習得できる、2日間のトレーニングです。
- この講座で、できること
-
- HTMLとCSSコーディングに関する基本的な知識が身につきます。
- Webサイト制作現場のノウハウを理解できます。
- こんな方におすすめします
-
- 更新作業の経験はあるが、ゼロからページを制作できるようになりたい。
- 独学で学んだ知識なので不安がある。
- Webサイト制作の流れや最新のトレンドを知りたい。
コーディングの基礎をしっかり押さえよう!
Adobe Dreamweaver CS6 CSSデザイン技法 基礎講座は、Dreamweaver CS6の基本的な使い方はもちろんのこと、
- Webサイト制作のワークフロー
- コーディング時につまづきがちなポイント
- 押さえておきたいワンランク上のテクニック
など、コーディングに関するノウハウを習得できる講座です。
Floatによる横並びの配置や、CSS Sprites、CSS3など、実践的な知識を身につけるためのカリキュラムをご用意しています。
コースカリキュラム
Dreamweaverの基本的な使い方、
Webサイト制作の実践的な知識を学ぶ
Adobe Dreamweaver CS6 CSSデザイン技法 基礎講座では、Dreamweaver CS6の基本機能を使いながら、Webサイト制作の流れやHTMLのマークアップで気をつけること、CSSデザインのポイントや初級者にありがちなトラブルを防ぐ方法などを習得します。
- 講座の目次
- PDF/46KB
- ユニット 1:Web制作の現場を知る
- サイト制作のワークフロー
- CMS
- スマートフォン、タブレット対応
- ワークフローの変化
- ユニット 2:マークアップ
- HTMLとは
- HTMLの書き方
- 文書構造
- DOCTYPE
- 知っておきたい要素
- HTML5コーディング
- ユニット 3: CSSスタイリング
- CSSとは
- CSSの書き方
- 記述場所
- セレクタ
- セレクタの優先度
- 知っておきたいプロパティ
- CSS3
- ボックスモデル
- ユニット 4: スタイリングしてみよう
- リセットスタイル
- float
- 非表示のスタイル
- position
- 背景画像
- 角丸
- CSS Sprites
- CSS3でボタンをつくる
- Webフォント
- ユニット 5: 現場で役立つ知識
- jQuery
講師
- 千貫 りこ(せんがん りこ)
- フリーランス Webクリエイター
-
主な業務は小~中規模サイトの企画・制作。出版、呉服、店舗、作家、NPO法人などクライアントの業種は多岐に渡る。
書籍・雑誌記事の執筆、セミナー講師など、Web制作にまつわる幅広い仕事に従事している。
著書
- デザインの学校 これからはじめるHTML&CSSの本(技術評論社)
- すべての人に知っておいてほしい スタイルシートデザインの基本原則(MdN・共著)
- プロのWebクリエイターになるための教科書(マイナビ)
- 現場のプロから学ぶXHTML+CSS(マイナビ・共著)
イベント/セミナー
- dachas Woman's Work Style(2012年11月10日)
- 90分でわかる!スマホ・タブレット対応サイト制作★入門編(2012年9月25日)
- WebSig 1日学校2011(2011年9月10日)
- プロのWEBクリエイターのためのHTML+CSS基礎力アップセミナー(2011年4月2日)
スケジュールにより講師が変更になる場合があります。あらかじめご了承ください。
お客さまの声
講座を受講いただいた、お客さまの声をご紹介します。
何か問題がある毎に本を買ったりして、それでもすっきりとしませんでしたが、 今回いろんなことがすーとした気がします。 本当にありがとうございました。 自己流のPhotoshopやFlash、Illasutlatorなどいつかまたお願いしたいと思っています。
(T.Yさま)
CSSの記述内容について、今までわからなかった部分の理解が得られました。 実習では、教えていただいたことがうまくできませんでしたが、今後の業務にも活用していけるよう今回の内容を復習したいと思います。
(S.Kさま)
とても知識が豊富で、テキストに載っていない内容も、ホワイトボードやネットなどの情報で適宜教えていただけた。また、演習の解説も短時間でポイントだけ教えていただけるなど、講師としての能力もとても高かった。
(安井 隆文さま)
テキストの内容以外にも、いろいろなことを教えていただいたので楽しかったです。 また機会があれば受講させていただきたいと思います。
(T.Yさま)
・CSSの初学者に対して、分かりやすい構成であると思う。
・クロス ブラウザー対応についてのノウハウが含まれていることは良かった。
・細かなところでも良く調べられた結果が掲載されており、大変評価できるテキスト。
(岩田 修一郎さま)
テキストも内容もすっきりとまとまっていて良かったと思っております。ソフトを買っても、なかなか使いこなすことはできないので、今回教えて頂き、まずは第一歩を踏み出したと感じました。先生の話かた(スピード、音の高さなど)内容が解りやすく伝わり、すべてが良かったと思います。
(H.Yさま)
非常に役立ちました。長年疑問に思っていた部分がクリアされたりもしました。
(C.Aさま)
前バージョンの、Dreamweaver CS4、CS5講座を受講されたお客さまの声も合わせて掲載しています。
FAQ
受講前
- ホームページをゼロから制作したことがなく、簡単な編集や更新作業しかしたことがありませんが大丈夫ですか。
-
はい、問題なく受講いただけます。簡単な編集や更新のご経験しかない方も多く受講されています。
- Dreamweaverをまったく使ったことがありませんが、受講できますか。
-
一般的なホームページ制作の知識があれば大丈夫ですが、きちんとした基礎を学ぶためにプロの使い方を学ぶAdobe Dreamweaver CS6 入門講座の受講をオススメします。
- ソースコードを直接入力したことがありませんが、講座についていけますか。
-
この講座の受講は、ソースコードを入力できることが前提です。不慣れな方もついていけるようサポートしますが、タイピングがおぼつかないと難しいかもしれません。
- 今までテーブルレイアウトでしか作成したことがありませんが、講座についていけますか。
-
はい、CSSレイアウトの基本からご紹介しますのでご安心ください。
関連用語・キーワード
CSSとは(スタイルシートとは)
CSSとは、Cascading Style Sheet(カスケーディングスタイルシート)の略称で、ページの見た目やどのように表示するかを定めた仕様(規格)です。
従来、フォントや色などの見た目もHTMLで指定していましたが、レイアウトやデザインをCSSで行うことにより文書構造(HTML、XHTML)とデザインを切り離せるため、さまざまなメリットが得られます。
CSSのメリット
- 制作効率やメンテナンス性が向上する。
- 自由度の高いデザインが作れる。
- アクセシビリティが向上する。
- SEO(検索エンジンの最適化、サーチエンジン対策)しやすくなる。
このように多くのメリットがあるCSSですが、各ブラウザーのCSS対応にばらつきがあるため、「ブラウザーによって見え方が異なる」「正しく表示されないバグがある」など、使いこなすには多くの知識が要求されます。
講座では、CSSの基礎はもちろんのこと、ブラウザーごとの差異を含めた実践的な手法を実習形式で習得します。
Dreamweaverで効率的にCSSレイアウト

CSSはHTMLと同様にテキストファイルですので、メモ帳などのエディターでも編集できます。
しかし効率的に作成するにはAdobe Dreamweaver CS6(アドビ ドリームウィーバーCS6)が最適です。
Dreamweaverの編集画面(デザインビュー)はCSSが適用された状態で表示されるため、CSSの値を変更すればすぐに反映・確認できます。
ダイアログボックスから各種パラメーターを指定するだけで自動的にCSSが作成されるので、手動でひとつひとつ入力する必要はありません。
ほかにも、「コードナビゲーター」「CSSスタイルパネル」など、CSSに関する便利な機能が多数搭載されています。
詳細
講座情報 | 講座番号 | DWBB |
---|---|---|
講座名 | Adobe Dreamweaver CS6 CSSデザイン技法 基礎講座 |
|
講座種別 | m-School 入門 | |
実習 | パソコンを使った実習があります | |
カテゴリー | Adobe Dreamweaver | |
講座日数 | 日数 | 2日間 |
受講時間 | 10:00~17:00 (9:40より受付/13:00~14:00は休憩時間) | |
総時間 | 12時間(1日6時間×2日間) | |
開催場所 | 会場 |
|
PC環境 | Microsoft Windows 7またはVistaを使用します(日程により環境が異なります)。Apple Macintoshをご利用の方でも、ツールの基本操作やユーザーインターフェースはWindows版とほぼ同等ですので、安心してお申し込みください。 | |
持参物 |
|
|
価格 | 受講料 | 73,500円 (税込) |
お支払い | お振り込み | |
特典 |
|
前提条件
講座を受講するうえで、下記の知識・経験が必要になります。
基本操作 | 下記のようなWindowsの一般的な操作ができる。
|
---|---|
プログラミングの経験 | 必要ありません。 |
デザイン制作の経験 | 必要ありません。 |
ネットワークの知識 | 必要ありません。 |
Webページ制作の経験 | HTMLやCSSのソースを編集したことがある(部分的な編集で構いません) |
その他 | 必要ありません。 |
おすすめ講座
受講する前・受講した後にオススメしている講座です。
受講前にオススメ | プロの使い方を学ぶAdobe Dreamweaver CS6 入門講座でDreamweaverの基本操作をマスターしましょう! |
---|