デジハリONLINE のAdobeマスター講座 Dreamweaver 内容と感想【2021年6月】

デリハリ Dreamweaver
動画編集

Webサイトを作りたい

Adobe Dreamweaverを使うと作れるらしい

デジハリオンラインのAdobeマスター講座のDreamweaverはどんな感じ?」

企業の商品販売Webサイト、LPの作成等のマークアップ作業で、効率よく作業できるツールとして人気なのがAdobe Dreamweaverです。

2021年6月、デジハリオンラインのAdobeマスター講座を受講しました。

この記事では以下についてまとめています。

  • Adobe Dreamweaverの講座内容とその感想
  • Adobe Dreamweaverをお得に購入する方法

参考にしてください。




目次

Adobe Dreamweaverをお得に購入する方法

以下手順で進めると、Adobe Dreamweaverをお得に購入できます。

  1. Adobe公式サイトから、Adobe Dreamweaverが含まれるAdobe Creative Cloudを無料で始める
  2. Adobe Dreamweaverを7日間無料で体験する
  3. 以下いずれかの方法でAdobe Creative Cloudを購入する
    ・無料体験終了後、Adobe公式サイトからIDを購入する
    たのまな アドビオンライントレーニング通信講座を購入する
    デジハリONLINE Adobeマスター講座を購入する

まず、Adobe公式サイトからAdobe Dreamweaverをインストールすると、7日間無料で使えます。

Adobe Dreamweaver Adobe Dreamweaver

無料期間中に解約すれば料金は発生しません。

無料体験期間終了後に、次のいずれかのパッケージでAdobe Dreamweaverを購入するとお得です。

Adobeのパッケージ

Adobe Dreamweaverは、Photoshop、Illustratorで作った素材を使ってWebサイトを完成させるものなので、必然的にそれらソフトが含まれたAdobe Creative Cloudが必要です。

なお、前回はたのまな アドビオンライントレーニング通信講座の内容を説明しました。

ヒューマンアカデミー Adobe Dreamweaver 感想

ヒューマンアカデミー たのまな Adobe Dreamweaverオンライン講座内容と感想【2020年5月】

2020年5月7日

本記事では、デジハリONLINE Adobeマスター講座の内容を説明します。

Adobe Creative CloudをデジハリONLINEから購入

デジハリ Adobeマスター

デジハリONLINE Adobeマスター講座は、デジタルハリウッド約20年の教育ノウハウに基づいて制作された基礎動画教材(46時間)と、12ヶ月版のAdobe Creative Cloudがセットになった講座です。

Adobe公式サイトからよりもAdobe Creative Cloudを安く購入でき、しかも、Adobeのソフトの使い方を学習できるのでお得です。

デジハリオンラインのAdobeマスター講座では、Adobeの以下ソフトの使い方を学べます。

Adobeマスター講座で学べるソフト

  • Photoshop
  • Illustrator
  • Dreamweaver
  • Premiere Pro
  • After Effects
  • InDesign

Adobeマスター講座には、課題もあり、プロのクリエイターに課題を添削してもらえます。

基礎動画、課題の添削は、Adobeマスター講座を開始してから以下の期間有効です。

  • 動画の視聴期間: 1ヵ月
  • 課題添削期間: 2ヵ月

詳細はこちらを参照してください。

デジハリ・オンライン Adobeマスター講座 Adobe Dreamweaverの講義内容

デジハリオンラインのAdobeマスター講座のAdobe Dreamweaverの講義内容がどのようなものかを紹介します。

概要

講義はオンラインのAdobe Dreamweaverの解説動画です。

講義内容は講義一覧で確認できます。

Adobe Dreamweaverの講義内容(2021年6月)

  • Step01 オリエンテーション
  • Step02 Webの基本
  • Step03 HTMLの基本
  • Step04 HTMLを記述する際の注意
  • Step05 リンク構造を作る
  • Step06 全ての要素を確認する
  • Step07 テキストコンテンツに関する要素
  • Step08 コンテンツセクショニングに関する要素
  • Step09 画像とマルチメディアに関する要素
  • Step10 テーブルに関する要素
  • Step11 フォームに関する要素
  • Step12 その他、覚えておきたい要素
  • Step13 その他、覚えておきたい要素
  • Step14 SEO対策、SNS対策
  • Step15 地図、動画の読み込み
  • Step16 コンテンツモデルについて
  • Step17 CSSの基本
  • Step18 セレクターの種類
  • Step19 擬似クラス
  • Step20 疑似要素
  • Step21 セレクターの組み合わせ
  • Step22 CSSを記述する際の注意
  • Step23 文字・行に関するプロパティ
  • Step24 トピックス
  • Step25 背景に関するプロパティ
  • Step26 ボックスに関するプロパティ
  • Step27 表示・配置に関するプロパティ
  • Step28 アニメーションに関するプロパティ
  • Step29 レイアウト
  • Step30 @規則について
  • Step31 JavaScript

講義で使う素材はダウンロードでき、手を動かしながら学べます

講義内容

Step01 オリエンテーション

デリハリ Dreamweaver

Dreamweaverの学習の進め方について以下を学習します。

  1. 学習の進め方
  2. リファレンスの紹介
  3. サンプルファイルの確認
  4. Dreamweaverでの学習の準備(1)
  5. Dreamweaverでの学習の準備(2)
  6. GoogleCromeでの学習準備

Step02 Webの基本

デリハリ Dreamweaver

HTML、CSS、JavaScriptでWebサイトが表示される仕組みについて、以下を学習します。

  1. webページを表示するしくみ
  2. webページをつくるファイル

Step03 HTMLの基本

デリハリ Dreamweaver
  1. HTMLとは
  2. HTMLの基本構文
  3. HTMLに必須の要素
  4. ブロックレベル要素とインライン要素
  5. 属性を詳しくみる

Step04 HTMLを記述する際の注意

デリハリ Dreamweaver
  1. HTMLを記述する際の注意
  2. 実体参照
  3. HTMLのコメント

Step05 リンク構造を作る

デリハリ Dreamweaver
  1. aアンカー
  2. 相対パスと絶対パス

Step06 全ての要素を確認する

  1. すべての要素を確認する

Step07 テキストコンテンツに関する要素

デリハリ Dreamweaver
  1. p 段落
  2. ul 順序なしリスト
  3. ol 順序つきリスト
  4. dl 説明リスト
  5. div コンテンツ分割
  6. hr 主題分割
  7. blockquote ブロック引用
  8. figure 図表、自己完結コンテンツ
  9. pre 整形済みテキスト

Step08 コンテンツセクショニングに関する要素

デリハリ Dreamweaver
  1. h1 h6 見出し
  2. header main footer
  3. article 記事など、自己完結コンテンツ
  4. section セクション
  5. nav 目次
  6. address 連絡先
  7. aside 間接的な関係の文章

Step09 画像とマルチメディアに関する要素

デリハリ Dreamweaver
  1. img 画像
  2. audio 音声
  3. video ビデオ
  4. map クリック可能な領域指定

Step10 テーブルに関する要素

デリハリ Dreamweaver
  1. table テーブル
  2. table 行、列の結合
  3. table その他の要素

Step11 フォームに関する要素

デリハリ Dreamweaver
  1. formフォーム
  2. 1行のテキスト
  3. 1行のテキスト emailアドレス
  4. 1行のテキスト パスワード
  5. 複数行のテキスト
  6. セレクトボックス
  7. ラジオボタン
  8. チェックボタン

Step12 その他、覚えておきたい要素

デリハリ Dreamweaver
  1. br 改行
  2. span 行内汎用コンテナ
  3. small 注釈
  4. strong em 重要性、強調
  5. del ins 編集範囲の特定
  6. iframe インラインフレーム

Step13 その他、覚えておきたい要素

デリハリ Dreamweaver
  1. 設定されているメタデータの概要
  2. viewport スマートフォン対応
  3. IE互換モード
  4. タッチアイコン
  5. ファビコン
  6. 自動リンクの設定

Step14 SEO対策、SNS対策

デリハリ Dreamweaver
  1. SEO対策とは
  2. SEO対策の設定
  3. SNS対応、OGPとは
  4. OGPの設定
  5. Twitter専用の設定

Step15 地図、動画の読み込み

デリハリ Dreamweaver
  1. youtubeの読み込み
  2. GoogleMapの読み込み

Step16 コンテンツモデルについて

デリハリ Dreamweaver
  1. コンテンツモデルについて

Step17 CSSの基本

デリハリ Dreamweaver
  1. CSSとは
  2. CSSの基本構文
  3. CSSを記述するところ
  4. CSSの学習を始める前の準備

Step18 セレクターの種類

デリハリ Dreamweaver
  1. セレクターの種類
  2. 要素セレクター
  3. classセレクター
  4. idセレクター
  5. 属性セレクター
  6. 全称セレクター

Step19 擬似クラス

デリハリ Dreamweaver
  1. 擬似クラスとは
  2. hover
  3. checked
  4. active
  5. focus
  6. firstChild lastChild
  7. firstOfType lastOfType

Step20 疑似要素

デリハリ Dreamweaver
  1. 擬似要素
  2. before after
  3. fisrtLetter firstLine

Step21 セレクターの組み合わせ

デリハリ Dreamweaver
  1. セレクターの組み合わせ
  2. 複数のセレクタを同時に指定
  3. 子孫結合子AB
  4. 子結合子A-B
  5. 隣接兄弟結合子A+B

Step22 CSSを記述する際の注意

デリハリ Dreamweaver
  1. CSSを記述する再の注意
  2. コメント
  3. カスケード
  4. スタイルの継承
  5. スタイルの優先順位

Step23 文字・行に関するプロパティ

デリハリ Dreamweaver
  1. フォント全般の指定
  2. フォントスタイル
  3. フォントの太さ
  4. フォントサイズ
  5. 行高の指定
  6. フォントファミリー
  7. 文字色の指定
  8. 文字横揃えの指定
  9. 縦揃えの指定
  10. 文字装飾の指定

Step24 トピックス

デリハリ Dreamweaver
  1. CSSでの色の指定
  2. CSSでの長さの指定(1)
  3. CSSでの長さの指定(2)

Step25 背景に関するプロパティ

デリハリ Dreamweaver
  1. 背景全般の指定
  2. 背景色
  3. 背景画像
  4. 背景画像のサイズ
  5. 背景画像の繰り返し
  6. 背景画像の位置

Step26 ボックスに関するプロパティ

デリハリ Dreamweaver
  1. ボックスとは
  2. ボックスモデルとは
  3. border枠線
  4. borderradius枠角
  5. 影をつける
  6. padding 内余白
  7. margin 外余白
  8. マージンの相殺
  9. 高さの指定
  10. 幅の指定
  11. 高さ、幅の計り方
  12. アウトライン

Step27 表示・配置に関するプロパティ

デリハリ Dreamweaver
  1. 表示に関する指定
  2. はみ出しに関する指定
  3. 配置に関する指定
  4. 配置位置に関する指定
  5. 表示順に関する指定

Step28 アニメーションに関するプロパティ

デリハリ Dreamweaver
  1. 時間変化
  2. アニメーション
  3. 変形

Step29 レイアウト

デリハリ Dreamweaver
  1. フレックスボックス flex
  2. floatとclear
  3. clearfix

Step30 @規則について

デリハリ Dreamweaver
  1. @規制について
  2. 画面の種類に応じたスタイル変更

Step31 JavaScript

デリハリ Dreamweaver
  1. JavaScript

デジハリ・オンライン Adobe Dreamweaverの講義を受けた感想

Adobe Dreamweaverの操作方法というより、HTMLの構文を学ぶのに適した講座です。

Adobe Dreamweaverの操作方法については基本的な操作のみで、ほとんどがHTMLの構文の解説動画です。

レッスン数はかなりたくさんあり、HTMLの構文を分かりやすく解説されているので、Web初心者に最適な講座内容です。

Adobe Dreamweaverの操作については、AdobeオンラインのAdobe Dreamweaverチュートリアルを確認されるといいです。

なお、プロの高度な技術については、デジハリ・オンラインスクールTECH::CAMPオンラインデザイナーコースなどスクールに通うことをおすすめします。

Web デザイン スクール 比較

【2021年】Web制作・Webデザイン 始め方とスクールを比較・検討

2020年5月20日

なお、デジハリONLINE のAdobeマスター講座の一覧はこちらを参照してください。

デジハリ Adobe

デジハリONLINE のAdobeマスター講座 内容と感想【2021年6月】

2021年7月4日