レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法
概要
レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法は、Adobe Dreamweaver CS5（アドビ ドリームウィーバーCS5）を使用して、CSS（カスケーディングスタイルシート）を活用したホームページデザインを習得する講座です。
CSSレイアウトに必要な知識とテクニックが、2日間の実習で身につきます。
- この講座で、できること
-
- CSSの概要や記述方法が習得できます。
- ホームページのレイアウトをすべてCSSだけで作成できます。
- Webページデザインの細かなテクニックを習得できます。
- Dreamweaver（ドリームウィーバー）でのCSSの使い方が習得できます。
- ブラウザごとの特徴と違い、原因と対処方法が習得できます。
- こんな方におすすめします
-
- Webデザイナーを目指したい。
- 企業のWeb担当者さま。
- Web制作の技術を高めたい。
- テーブルレイアウトからCSSレイアウトに切り替えたい。
CSSレイアウトの使い方テクニックを、2日間でマスター
ホームページを制作する際、こんな悩みはありませんか？
- Web制作業務の担当になったが、きちんとしたレイアウトが作れない。
- サイト全体のデザインを変更したいが、ページがたくさんありすぎて挫折した。
- 2段組み・3段組みのページレイアウトを作ってみたい。
- テーブルを使ってレイアウトをデザインしていたが、『いまどきテーブルでレイアウトはしない』と言われてしまった。
これらの問題は、CSS（カスケーディングスタイルシート）で解消できます。
CSSを利用すれば、ページの外観を自由にデザインできるため、現在のWebでは必要不可欠な技術です。近年ではWeb標準化という考え方のもとに、(X)HTMLとCSSを正しく記述することが強く推奨されています。
実践的なCSSの使い方
CSSでホームページを作る場合にも、やみくもにスタートすると
- CSSを使ってみたいが、どこから始めていいのかわからない。
- どんなツールで作ればいいのかわからない。
- CSSを使ったWeb制作のワークフローを確認したい。
- 各種ブラウザーの見え方の違いに悩んでいる。
などの「つまずき」が出てきます。
レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法では、Adobe Dreamweaver CS5（アドビ ドリームウィーバーCS5）を利用した、実践的なCSSの使い方を習得します。
記述方法などの基礎項目から、段組レイアウトや印刷用レイアウトなどの応用ワザ、ブラウザーごとの差や対処方法まで、2日間まるごとCSSについて学習します。
『書籍やリファレンス本を見ても、実際にどう使えばわからない…』という方にぴったりの講座です。
コースカリキュラム
ハンズオン（実習形式）だから、わかるまで習得できる
- 講座の目次
- PDF／67KB
レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法では、CSSレイアウトに必要な知識とテクニックを、2日間のハンズオン（PCを使用しての実習）で学びます。
- CSSの概要と記述方法
- セレクターの種類と特徴
- DreamweaverでのCSS設定方法
- CSSで2段組・3段組のWebページをレイアウトする
- 便利なツール紹介
- Mozilla Firefoxのアドオン
- DreamweaverのCSSインスペクトツール
- Adobe BrowserLab（アドビ ブラウザーラボ）
- 各種の検証ツール
- CSSでナビゲーションバーのレイアウトやリンクをデザインする
- ブラウザーごとの特徴と違い、原因と対処方法
- 見出しの効果的な表現方法（例：角丸デザイン）
- 印刷用レイアウトの作成
- 総合実習：サンプルサイトを作成する
この講座ではDreamweaver自体の初歩的な操作は学習しませんので、基本操作に不安がある方はプロの使い方を学ぶAdobe Dreamweaver CS5 入門講座の受講をおすすめします。
セット割
アプリ操作もXHTMLもまとめて学習
DwCS5 ＋ CSS 入門セット
CSSをおぼえる前に、まずはAdobe Dreamweaver CS5（アドビ ドリームウィーバーCS5）から習得したい方は、セット割がおすすめ！
DwCS5 ＋ CSS 入門セットは、本講座とプロの使い方を学ぶ Adobe Dreamweaver CS5 入門講座がセットで20％オフになる割引パックです。
| セットの講座 | プロの使い方を学ぶAdobe Dreamweaver CS5 入門講座 | 173,250円 |
|---|---|---|
| レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法 | 73,500円 | |
| 価格 | 2講座を個別に受講した場合の価格 | 246,750円 |
| 割引率 20％のプライスダウン | －49,350円 | |
| セット割なら | 197,400円 |
- セット割とは
-
セット割は、対応する2講座を合わせて受講すると最大20％の割り引きとなる、お得なサービスです。
短期集中・まとめてマスターしたい方におすすめのセットプランです。
講師
- 千貫 りこ（せんがん りこ）
- フリーランス Webクリエイター
-
主な業務は小～中規模サイトの企画・制作。出版、呉服、店舗、作家、NPO法人などクライアントの業種は多岐に渡る。
書籍・雑誌記事の執筆、セミナー講師など、Web制作にまつわる幅広い仕事に従事している。
著書
- プロのWebクリエイターになるための教科書（毎日コミュニケーションズ）
- 現場のプロから学ぶXHTML+CSS（毎日コミュニケーションズ・共著）
- Webデザイン 知らないと困る現場の新常識100（MdN・共著）
イベント／セミナー
- CSS Nite in SENDAI, Vol.5 （2010年9月18日）
- Dreamweaver Town Meeting in Tokyo 大喜利 （2010年5月29日）
- Creator's Meeting in Nagoya Vol.3 （2010年5月22日）
- Creator's Meeting in Nagoya Vol.2 （2010年4月10日）
- Web Designer Inspire Night Vol.8（2009年11月30日）
- CSS Nite ビギナーズ （2008年11月1日）
スケジュールにより講師が変更になる場合があります。あらかじめご了承ください。
お客さまの声
講座を受講いただいた、お客さまの声をご紹介します。
何か問題がある毎に本を買ったりして、それでもすっきりとしませんでしたが、 今回いろんなことがすーとした気がします。 本当にありがとうございました。 自己流のPhotoshopやFlash、Illasutlatorなどいつかまたお願いしたいと思っています。
（T.Yさま）
CSSの記述内容について、今までわからなかった部分の理解が得られました。 実習では、教えていただいたことがうまくできませんでしたが、今後の業務にも活用していけるよう今回の内容を復習したいと思います。
（S.Kさま）
とても知識が豊富で、テキストに載っていない内容も、ホワイトボードやネットなどの情報で適宜教えていただけた。また、演習の解説も短時間でポイントだけ教えていただけるなど、講師としての能力もとても高かった。
（安井 隆文さま）
テキストの内容以外にも、いろいろなことを教えていただいたので楽しかったです。 また機会があれば受講させていただきたいと思います。
（T.Yさま）
・CSSの初学者に対して、分かりやすい構成であると思う。
・クロス ブラウザー対応についてのノウハウが含まれていることは良かった。
・細かなところでも良く調べられた結果が掲載されており、大変評価できるテキスト。
（岩田 修一郎さま）
テキストも内容もすっきりとまとまっていて良かったと思っております。ソフトを買っても、なかなか使いこなすことはできないので、今回教えて頂き、まずは第一歩を踏み出したと感じました。先生の話かた（スピード、音の高さなど）内容が解りやすく伝わり、すべてが良かったと思います。
（H.Yさま）
非常に役立ちました。長年疑問に思っていた部分がクリアされたりもしました。
（C.Aさま）
前バージョンの、Dreamweaver CS4講座を受講されたお客さまの声も合せて掲載しています。
FAQ
受講前
- ホームページをゼロから制作したことがなく、簡単な編集や更新作業しかしたことがありませんが大丈夫ですか。
-
はい、問題なく受講いただけます。簡単な編集や更新のご経験しかない方も多く受講されています。
- Dreamweaverをまったく使ったことがありませんが、受講できますか。
-
一般的なホームページ制作の知識があれば大丈夫ですが、きちんとした基礎を学ぶためにプロの使い方を学ぶAdobe Dreamweaver CS5 入門講座の受講をオススメします。
まとめて習得したい方には、上記入門講座と本講座がセットになったDwCS5 ＋ CSS 入門セットもご用意しています。詳細やお申し込みはセット割専用ページよりご確認ください。
- ソースコードを直接入力したことがありませんが、講座についていけますか。
-
はい、講座ではCSSスタイルパネルを使って設定をします。
- 今までテーブルレイアウトでしか作成したことがありませんが、講座についていけますか。
-
はい、CSSレイアウトの基本からご紹介しますのでご安心ください。
講座全般や受講環境については受講FAQ（よくあるご質問）にてご説明しています。合わせてご確認ください。
関連用語・キーワード
テーブルレイアウトとは
ホームページの標準言語であるHTML（XHTML）は、もともと文書構造の記述を目的としていました。ホームページも時代とともに見た目やレイアウトが重視され始めますが、HTMLにそのような制御を行う機能は少なく、代替手段としてテーブル（table）が利用されるようになります。
しかしテーブルレイアウトには大きな欠点がありました。
- 細かくレイアウトをデザインしようとすると、HTMLのソースが複雑になる。
- サイト全体で共通の色やフォントを利用する場合、ひとつずつ修正する必要があり手間がかかる。
- table要素は表（ひょう）を作るためのものなので、そもそも使い方がまちがっている。
そこでCSSの登場です。HTMLは文書の内容のみを記述し、レイアウトや文字デザインなどの見た目の制御はCSSにまかせ、内容と表現を別々に管理するようになりました。
CSSとは（スタイルシートとは）
CSSとは、Cascading Style Sheet（カスケーディングスタイルシート）の略称で、ページの見た目やどのように表示するかを定めた仕様（規格）です。
従来、フォントや色などの見た目もHTMLで指定していましたが、レイアウトやデザインをCSSで行うことにより文書構造（HTML、XHTML）とデザインを切り離せるため、さまざまなメリットが得られます。
CSSのメリット
- 制作効率やメンテナンス性が向上する。
- 自由度の高いデザインが作れる。
- アクセシビリティが向上する。
- SEO（検索エンジンの最適化、サーチエンジン対策）しやすくなる。
このように多くのメリットがあるCSSですが、各ブラウザーのCSS対応にばらつきがあるため、「ブラウザーによって見え方が異なる」「正しく表示されないバグがある」など、使いこなすには多くの知識が要求されます。
講座では、CSSの基礎はもちろんのこと、ブラウザーごとの差異を含めた実践的な手法を実習形式で習得します。
Dreamweaverで効率的にCSSレイアウト
CSSはHTMLと同様にテキストファイルですので、メモ帳などのエディターでも編集できます。
しかし効率的に作成するにはAdobe Dreamweaver CS5（アドビ ドリームウィーバーCS5）が最適です。
Dreamweaverの編集画面（デザインビュー）はCSSが適用された状態で表示されるため、CSSの値を変更すればすぐに反映・確認できます。
ダイアログボックスから各種パラメーターを指定するだけで自動的にCSSが作成されるので、手動でひとつひとつ入力する必要はありません。
ほかにも、「コードナビゲーター」「CSSスタイルパネル」など、CSSに関する便利な機能が多数搭載されています。
フォローアップ
m-Schoolとは？
m-School（エムスクール）は、Adobe製品を中心とした最新のIT技術を習得できる、プロフェッショナルのための研修トレーニングセンターです。
詳細ははじめての方へ m-Schoolのご案内にてご紹介中です。
短期集中で受講
講座ごとにお申し込みいただく短期集中システムのため、入学金は必要ありません。
「あなたが今、必要とする講座」に、すぐに受講できます。
アドビ認定トレーニングセンター
インストラクターの資格やトレーニングコース、設備のすべてにおいて高い水準を維持していることが認められ、アドビ認定トレーニングセンター（AATC：Adobe Authorized Training Center）として認可を受けています。
駿台予備学校でおなじみ、駿河台学園が運営
駿河台学園グループのIT教育専門会社であるSATTが運営しています。教育専門機関ならではの、質の高い「教育サービス」を提供する「安心」と「信頼」をご提供します。
日程・お申し込み
| 講座情報 | 講座番号 | DWAL |
|---|---|---|
| 講座名 | レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法 | |
| 講座種別 | m-School 入門 | |
| 実習 | パソコンを使った実習があります | |
| カテゴリー | Adobe Dreamweaver | |
| 企業研修 | 出張講座、貸切講座ともに可能です m-Schoolの企業研修 | |
| 講座日数 | 日数 | 2日間 |
| 受講時間 | 10:00～17:00 （9:40より受付／13:00～14:00は休憩時間） | |
| 総時間 | 12時間（1日6時間×2日間） | |
| 再トレ | 対応講座です 再トレとは | |
| 開催場所 | 会場 |
|
| PC環境 | Microsoft Windows XPまたはVistaを使用します（日程により環境が異なります）。Apple Macintoshをご利用の方でも、ツールの基本操作やユーザーインターフェースはWindows版とほぼ同等ですので、安心してお申し込みください。 | |
| 持参物 |
|
|
| 価格 | 受講料 | 73,500円 （税込） |
| セット割 | 対応講座です セット割とは | |
| 早割 | 対応講座です 早割とは | |
| お支払い | お振り込み | |
| 特典 |
|
前提条件
講座を受講するうえで、下記の知識・経験が必要になります。
| 基本操作 | 下記のようなWindowsの一般的な操作ができる。
|
|---|---|
| プログラミングの経験 | 必要ありません。 |
| デザイン制作の経験 | 必要ありません。 |
| ネットワークの知識 | 必要ありません。 |
| Webページ制作の経験 |
|
| その他 | 必要ありません。 |
おすすめ講座
受講する前・受講した後にオススメしている講座です。
| 受講前にオススメ | プロの使い方を学ぶAdobe Dreamweaver CS5 入門講座でDreamweaverの基本操作をマスターしましょう！ |
|---|---|
| セットでお得に | Dreamweaverの基礎からまとめて学ぶ、DwCS5 ＋ CSS 入門セットもあります。 |
開催スケジュール
開催スケジュールページにて、すべての講座のカレンダーが確認できます。
お申し込みの前に受講規約（PDF：116KB）をご一読いただき、ご了承のうえ受講ください。よろしくお願いいたします。
お問い合わせ
メルマガ