レイアウト自由自在！Dreamweaver CS4 CSSデザイン手法
レイアウト自由自在！Dreamweaver CS4 CSSデザイン手法は、Adobe Dreamweaver CS4（アドビ ドリームウィーバーCS4）を活用して、CSS（カスケーディングスタイルシート）を使用したホームページデザインを習得する講座です。
CSSレイアウトに必要な知識とテクニックが、2日間の実習で身につきます。
この講座は、最新バージョンとなるCS5シリーズへの対応を予定しています。詳しくはAdobe CS5対応講座の予定についてをご確認ください。
特長
CSSレイアウトに必要な知識とテクニックを、2日間でマスター
- この講座を受けると、こんなことができます
-
- CSSの概要や記述方法が習得できます。
- ホームページのレイアウトをすべてCSSだけで作成できます。
- Webページデザインの細かなテクニックを習得できます。
- Dreamweaver（ドリームウィーバー）でのCSSの使い方が習得できます。
- ブラウザごとの特徴と違い、原因と対処方法が習得できます。
- こんな方におすすめします
-
- Webデザイナーを目指したい。
- 企業のWeb担当者さま。
- Web制作の技術を高めたい。
- テーブルレイアウトからCSSレイアウトに切り替えたい。
CSSでホームページを自由にデザイン
ホームページを制作する際、このような悩みを抱えることはありませんか？
- Web制作業務の担当になったが、きちんとしたレイアウトが作れない。
- サイト全体のデザインを変更したいが、ページがたくさんありすぎて挫折した。
- 2段組み・3段組みのページレイアウトを作ってみたい。
- テーブルを使ってレイアウトしているが、『今どきテーブルでレイアウトはしない』と言われてしまった。
これらの問題は、CSS（カスケーディングスタイルシート）を活用して解消できます。
CSSは、ページの外観を自由にデザインできる、現在のWebで必要不可欠な技術です。近年ではWeb標準化という考え方のもとに、(X)HTMLとCSSを正しく記述することが強く推奨されています。
CSSの実践的な使い方
CSSでホームページを作る場合にも、
- CSSを使ってみたいが、どこから始めていいのかわからない。
- CSSをどんなツールで作ればいいのかわからない。
- CSSを使ったWeb制作のワークフローを確認したい。
- 各種ブラウザーの見え方の違いに悩んでいる。
などの「つまずき」があります。
レイアウト自由自在！Dreamweaver CS4 CSSデザイン手法では、Adobe Dreamweaver CS4（アドビ ドリームウィーバーCS4）を利用した、実践的なCSSの使い方を習得します。
CSSの記述方法などの基礎から、段組レイアウトや印刷用レイアウトなどの応用ワザ、ブラウザーごとの差や対処方法まで、2日間まるごとCSSについて学習します。
書籍やリファレンス本を見ても、実際にどう使えばわからない…という方にぴったりの講座です。
- アプリ操作もXHTMLも
セット割でまとめて学習 -
CSSをおぼえる前に、まずはAdobe Dreamweaver CS4（アドビ ドリームウィーバーCS4）から習得したい方は、セット割がおすすめ！
DwCS4 ＋ CSS 入門セットは、本講座とプロの使い方を学ぶ Adobe Dreamweaver CS4 入門講座がセットで20％オフになる割引パックです。
一歩進んだXHTML＆CSSのテクニックまで一気に習得したい方は、CSS入門 ＋ XHTML 実践セットがピッタリです。
本講座と実用サンプルで学ぶWeb標準 XHTML & CSS 実践講座がセットで10％オフになります。
セット受講をご希望の方は、セット割専用ページよりお申し込みください。
学習内容
CSSの基本とレイアウトに必要な知識を習得
レイアウト自由自在！Dreamweaver CS4 CSSデザイン手法では、CSSレイアウトに必要な知識とテクニックを、2日間のハンズオン（PCを使用しての実習）で学びます。
- CSSの概要と記述方法
- セレクターの種類と特徴
- DreamweaverでのCSS設定方法
- CSSで2段組・3段組のWebページをレイアウトする
- 便利なツール紹介
- CSSでナビゲーションバーのレイアウトやリンクをデザインする
- ブラウザーごとの特徴と違い、原因と対処方法
- 見出しの効果的な表現方法（例：角丸デザイン）
- 印刷用レイアウトの作成
- 総合実習：サンプルサイトを作成する
この講座ではDreamweaver自体の初歩的な操作は学習しませんので、基本操作に不安がある方はプロの使い方を学ぶAdobe Dreamweaver CS4 入門講座の受講をおすすめします。
テーブルレイアウトからスタイルシートへ
ホームページの標準言語である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（アドビ ドリームウィーバー）が最適です。
Dreamweaverの編集画面（デザインビュー）はCSSが適用された状態で表示されているため、CSSの値を変更すればすぐに反映・確認できます。
CSSの設定も、ダイアログボックスから各種パラメーターを指定するだけで自動的に作成できるので、テキストでひとつひとつ入力する必要はありません。
ほかにも、「コードナビゲーター」「CSSスタイルパネル」など、CSSに関する便利な機能が多数搭載されています。
講師
- 鈴木 航 （すずき こう）
- m-School インストラクター
Adobe認定インストラクター｜Flash -
m-Schoolインストラクター。エスエイティーティー入社後、コンテンツ企画開発を経て、m-Schoolのインストラクターとして活躍中。
担当講座はFlash、Dreamweaver、Microsoft Silverlightなど多岐にわたる。トレーニングコースの企画・開発にも携わる。かぼちゃの煮物が嫌い。
スケジュールにより講師が変更になる場合があります。あらかじめご了承ください。
m-Schoolとは？
m-School（エムスクール）は、Adobe製品を中心とした最新のIT技術を習得できる、プロフェッショナルのためのトレーニングセンターです。
詳細ははじめての方へ m-Schoolのご案内にてご紹介中です。
短期集中で受講
講座ごとにお申し込みいただく短期集中システムのため、入学金は必要ありません。
「あなたが今、必要とする講座」に、すぐに受講できます。
アドビ認定トレーニングセンター
インストラクターの資格やトレーニングコース、設備のすべてにおいて高い水準を維持していることが認められ、アドビ認定トレーニングセンター（AATC：Adobe Authorized Training Center）として認可を受けています。
駿台予備学校でおなじみ、駿河台学園が運営
駿河台学園グループのIT教育専門会社であるSATTが運営しています。教育専門機関ならではの、質の高い「教育サービス」を提供する「安心」と「信頼」をご提供します。
お客さまの声
講座を受講いただいた、お客さまの声をご紹介します。
何か問題がある毎に本を買ったりして、それでもすっきりとしませんでしたが、 今回いろんなことがすーとした気がします。 本当にありがとうございました。 自己流のPhotoshopやFlash、Illasutlatorなどいつかまたお願いしたいと思っています。
（T.Yさま）
CSSの記述内容について、今までわからなかった部分の理解が得られました。 実習では、教えていただいたことがうまくできませんでしたが、今後の業務にも活用していけるよう今回の内容を復習したいと思います。
（S.Kさま）
とても知識が豊富で、テキストに載っていない内容も、ホワイトボードやネットなどの情報で適宜教えていただけた。また、演習の解説も短時間でポイントだけ教えていただけるなど、講師としての能力もとても高かった。
（安井 隆文さま）
テキストの内容以外にも、いろいろなことを教えていただいたので楽しかったです。 また機会があれば受講させていただきたいと思います。
（T.Yさま）
- CSSの初学者に対して、分かりやすい構成であると思う。
- クロス ブラウザー対応についてのノウハウが含まれていることは良かった。
- 細かなところでも良く調べられた結果が掲載されており、大変評価できるテキスト。
（岩田 修一郎さま）
FAQ
受講前
- ホームページをゼロから制作したことがなく、簡単な編集や更新作業しかしたことがありませんが大丈夫ですか。
-
はい、問題なく受講いただけます。簡単な編集や更新のご経験しかない方も多く受講されています。
- Dreamweaverをまったく使ったことがありませんが、受講できますか。
-
一般的なホームページ制作の知識があれば大丈夫ですが、きちんとした基礎を学ぶためにプロの使い方を学ぶAdobe Dreamweaver CS4 入門講座の受講をオススメします。
まとめて習得したい方には、上記入門講座と本講座がセットになった「DwCS4 ＋ CSS 入門セット」もご用意しています。詳細やお申し込みはセット割専用ページよりご確認ください。
- ソースコードを直接入力したことがありませんが、講座についていけますか。
-
はい、講座ではCSSスタイルパネルを使って設定をします。
- 今までテーブルレイアウトでしか作成したことがありませんが、講座についていけますか。
-
はい、CSSレイアウトの基本からご紹介しますのでご安心ください。
- さらなるCSSのテクニックや、Web標準に則したXHTMLを学ぶにはどうすればいいですか。
-
さらに実践的にステップアップするには、実用サンプルで学ぶWeb標準 XHTML & CSS 実践講座の受講をオススメします。
また、まとめて習得したい方向けに、上記入門講座と本講座がセットになった「CSS入門 ＋ XHTML 実践セット」もご用意しています。詳細やお申し込みはセット割専用ページよりご確認ください。
講座全般や受講環境については受講FAQにてご説明しています。合わせてご確認ください。
こんなときには、このページ
もっとお得に受講したい
ほかの講座は？
申し込み手順を知りたい
不明な点を解消したい
詳細
| 講座情報 | 講座番号 | DWAC |
|---|---|---|
| 講座名 | レイアウト自由自在！Dreamweaver CS4 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ページ制作の経験 |
|
| その他 | 必要ありません。 |
セット割
本講座とDreamweaverの入門講座をセットでお申し込みいただくと20％オフになる、DwCS4 ＋ CSS 入門セットをご用意しました。
本講座とXHTML＋CSSの実践的な講座をセットでお申し込みいただくと10％オフになる、CSS入門 ＋ XHTML 実践セットもご用意しています。
各セットの受講をご希望の方は、セット割専用ページよりお申し込みください。
おすすめ講座
受講する前・受講した後にオススメしている講座です。
| この講座を受講する前にオススメ | プロの使い方を学ぶAdobe Dreamweaver CS4 入門講座でDreamweaverの基本操作をマスターしましょう！ |
|---|---|
| この講座を受講した後は、これが最適 | 実用サンプルで学ぶ Web標準XHTML & CSS実践講座で、Web標準に沿ったWebサイト制作の実践的なテクニックをマスターしましょう。 |
日程・申込
お申し込みの前に受講規約（PDF：311KB）をご一読いただき、ご了承のうえ受講ください。よろしくお願いいたします。
お問い合わせ
メルマガ