ドリームウィーバーってどんなん?「Adobe CCおトク&基礎学べる」初心者オススメ☆デジハリAdobeマスター講座で【Dreamweaver】勉強中!

デジハリで勉強中のイメージ画像
この記事は約11分で読めます。
PR
  1. ドリームウィーバー勉強中「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座で【Dreamweaver(ドリームウィーバー)】
  2. ドリームウィーバー勉強中!「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】HTML・CSSを使うにあたって標準となる・参考とするサイトなど
  3. ドリームウィーバー勉強中!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「分割」
  4. ドリームウィーバー勉強中!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「環境設定」から設定できるもの
  5. ドリームウィーバー勉強中!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「背景色」を変える
  6. ドリームウィーバーって?!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「文字サイズ」を変える
  7. 「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】 自動でコードが入らないほうがいいとき「コードヒント」
  8. ドリームウィーバー勉強中!「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「コードフォーマット」
  9. 「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】 ブラウザの種類
  10. ドリームウィーバー勉強中!「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】Chrome DevTool
  11. 「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】感想
  12. ドリームウィーバー勉強中! 「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】で勉強するメリット
  13. 「Adobe CCおトク&基礎学べる」初心者オススメ☆デジハリAdobeマスター講座で【Dreamweaver】勉強中!/ まとめ
  14. Adobeすべての『アプリ(ツール)』を知りたいとき!リンク

ドリームウィーバー勉強中「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座で【Dreamweaver(ドリームウィーバー)】

これまでAdobeのイラストレーターを使ってきましたPhotoshopも使えるようになりたいと思って【イラストレーターとPhotoshop】の安いプランを探していたところ、

デジハリ・ONLINEと、・ヒューマンアカデミー「たのまな」最もおトクに使えることがわかりました ¥36,346税込¥39,980)

仕事で使っているので、すぐに利用できるデジハリAdobeマスター講座を選びました(上:スポンサーリンク なっております)

イラストレーターとPhotoshopだけでよかったのですが、デジハリAdobeマスター講座には Adobe CCにある他のソフトも勉強できるようになっているので取り組むことにしました

今回、THML & Dreamweaver(ドリームウィーバー) レポートします

ドリームウィーバー勉強中!「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】HTML・CSSを使うにあたって標準となる・参考とするサイトなど

デジハリAdobeマスター講座【Dreamweaver】W3C/World Wide Web Consortiumu

W3C サイト

「ワールド ワイド ウェブ コンソーシアム」

ウェブの標準規格を作っている団体 ここのリファレンスが もっとも正確

W3Cの HTML&CSS ページ あたらしい情報がある> HTML5.2

ドリームウィーバー勉強中!デジハリAdobeマスター講座【Dreamweaver】MDN/MDN Web Docs サイト

MDN Web Docs サイト

W3Cより読みやすい 日本語翻訳ページがある

ウェブサイトやプログレッシブウェブアプリのためのHTML、CSS、APIを含む オープンウエッブ技術に関係する情報を提供している

使用にあたっての注意点なども書かれてある

MDN ページ

PR

ドリームウィーバー勉強中!Adobeマスター講座【Dreamweaver】HTMLクイックリファレンス

HTMLクイックリファレンス サイト

ホームページ制作について知りたい項目がわかる・スピーディーに調べられる(日本語 個人の方が制作)

  • HTML・CSSについても調べられる
  • 例文もある
  • プロも使用している

HTMLクイックリファレンス ページ

ドリームウィーバー勉強中!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「分割」

Dreamweaver画面

あらかじめ必要なコードが用意されている(ラクチン♪)

入力したものが どのように表示されるかがわかる(上部画面で)= 開いているページ上部真ん中「分割」

ドリームウィーバー勉強中!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「環境設定」から設定できるもの

「環境設定」へ入るには

  • Mac メニューバー(上部)左はし「Dreamweaver」> 「環境設定」
  • Windows メニューバー(上部)> 「編集」> 「環境設定」
メニューバー(上部)>表示>コードビューオプション
  • ワードラップ=コードが長くなったときにもそのまま改行したようになって表示される
  • 行番号=コードの行ナンバー
  • シンタックスカラーリング=色で「タグ・青色」「属性・緑色」など、意味づけされていて、見やすくなっている
  • 自動インデント=字下げ 例:<body>に書き込まれたものであることをわかりやすく 文の頭に1文字ぶん開けたり 見やすく・ エンターキーを押すことで自動でやってくれる

ドリームウィーバー勉強中!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「背景色」を変える

  • メニューバー(上部)> 環境設定> インターフェイス> アプリケーションテーマ

ドリームウィーバーって?!Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「文字サイズ」を変える

  • メニューバー(上部)> 環境設定> フォント> 好みの大きさをクリックして決める

「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】 自動でコードが入らないほうがいいとき「コードヒント」

たとえば「p」を入力して タブキーを押すと、自動で<p></p>と 表示されるが、作業によっては邪魔になる時があるので自動でコードが入らないようにする設定したいとき

「コードヒント」
  • メニューバー(上部)> 環境設定>「コードヒント」
  • 「終了タグ」の「開始タグの”>”の 入力後」の下にある「閉じない」にチェックを入れて 「開始タグの”>”の 入力後」についていたチェックマークをはずす

ドリームウィーバー勉強中!「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「コードフォーマット」

文字の頭に入れる空欄(スペース)を調整する

「コードフォーマット」
  • Dreamweaverの場合、タブキーを押すと4つ入る→2つで使用するところもある

PR

「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】 ブラウザの種類

  • Google Chrome
  • Microsoft Edge
  • Internet Explorer
  • Safari
  • Firefox
  • Operaなど

ドリームウィーバー勉強中!「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】Chrome DevTool

Chrome = ウェブサイトを見ているときに使っているソフトウェア(ブラウザ) で、最も普及している 便利なツール(Chrome DevTool)がある

デベロッパーツールが表示された画像

デベロッパーツール」表示のさせ方

右クリックして「検証」を 選んだ画像

Google Chromeを起動させる>右クリック検証をクリック> デベロッパーツール画面が表示される

デベロッパーツールを表示させる場所は 好きに選べる

デベロッパーツールの右はし上部にある 縦に並んだ3つの点をクリックする>好みの設定をクリックして選ぶ

Google Chromeのデベロッパーツールよく使うもの(HTML CSSで)
  • Elementsをクリック(Googleデベロッパーツール画面左はし上部)> 左はし矢印のついたアイコンをクリック>表示されているページの要素を検証することができる見たいところをクリックすると、そこのコード(情報)が’表示される)
  • CSSで使う Stylesの確認(画面右側上部))
  • CSSで使うComputedで余白がわかる
  • スマホで見た画面を再現できる
    • Elementsの左となり(Googleデベロッパーツール画面左はし上部・大小2つの四角い小さなアイコンをクリック (カーソルを合わせるとgoogled devices toolbarと表示)をクリック>上部中央 Responsive をクリック> 各デバイス (Galaxy S5 iPhone 5/SEなど ことじ)が表示されるので、見たいものをクリック
デベロッパーツールでスマホサイズ で表示させたい時
スマホサイズで表示させる時
スマホサイズで 表示される

自分で作ったコードが思い通りになっているか?修正する場所の確認などができる

 PR

「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】感想

今回、はじめてデジハリでTHML & Dreamweaveを視聴して、復習をかねてレポートしてみました

感想は・・

una
una

手品みたいでおもしろーい☆

少しだけですが、HTMLとCSSは本を買ったり 借りたり ネット上で調べたりして実装したことがあります

HTMLとCSSを学ぶには、ネット上でも動画でも良いものがあるし、コードを入力するとき必要となる フリーテキストエディタもあります(Visual Studio Code TeraPadなど unaも使ってました)

ドリームウェーバー「Dreamweaver」の便利なところは、書いたコードが同じ画面の上部に表示されるのでいいなと思いました(まだ勉強し始めたばかりなので、独学でやっていたのと比べたら・・の感想です)

記述する前に基本的なコード(下)がすでに表示してあったり

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>デジハリで勉強中[Dw]THML & Dreamweaver</title>
</head>
<body>
<h1>見出し</h1>
</body>
</html>)

また、記述しているなかで関連する候補のコードを表示してくれたりと、ドリームウィーバー「Dreamweaver」とても使いやすそうです

自由に表現できるようになったら楽しいでしょうねー♪♪

興味のある方は早めに取り組むのがオススメです プロへの入り口ですね

ドリームウィーバー勉強中! 「Adobe CCおトク&基礎学べる」デジハリAdobeマスター講座【Dreamweaver】で勉強するメリット

デジハリを利用するメリットはおおいにあると感じています

とくに これからweb系を学ぼうとする人には、このデジハリ・オンラインスクールはとても良い選択です

どこに、どんな機能があるのかなど、

最初の1歩がスムーズにわかる♪

イラストレーター Photoshopの講座を視聴したときとおなじで、効率よく時短で最初の1歩が踏み出せるのはとても大きいなと感じています 独学はとにかく時間がかかるんですよね(経験済み)

独学で勉強しながらHTMLCSSを書いて実装していたときとはちがって、おどろきと発見だらけでした☆

うれしかったのは 独学の頃 わからなかったwebのぼんやりしたものが、はっきりして『謎』が解けたことです

デジハリ・オンラインスクールのデメリット/Dreamweaver
  • 目的をもって視聴しないと 単調になりやすい
  • 視聴期間40日間は 人によっては足りないかも

デメリットかどうかは人によって分かれるところですが、講座の再生ボタンを押したものの 受け身だけになるのでダラーっとなりやすいです(ならない人もいます)

1回に視聴する時間を決めてやるとか、目的別に区切って視聴するなど 自分に合ったやり方で勉強するのがオススメです

ちなみにunaは、視聴しながら実習すると時間が限られてしまうので 空いた時間があればスマホで視聴しています(とにかくすべての カリキュラムを視聴しておこうと思っているので)

自分の知っておきたいものだけ(例:「Ai」イラストレーターと「Ps」フォトショップ)

何回も視聴しながらマスターするのもNICE☆

デジハリ・オンラインスクールのメリット/Dreamweaver
  • 講師の方が むずかしい言葉を使わず、わかりやすく解説されるので抵抗なく取り組める
  • 実際にコードを書いて、web上でどのように表示されるのか動画でわかりやすい
  • どのような場面で使うのか現場・プロ視点の話が聞ける
  • 1回の視聴時間が短いので集中できる(項目によって差アリ)
  • 素材があらかじめ用意されている
  • 早送りで視聴できる

さわやかーな先生♪

まだ 始まったばかりなのでどこまで理解できるかは不明ですが、楽しみです

動画の視聴は1ヵ月間だけだからね!

(動画閲覧期間は、手続き完了より[1ヶ月(40日間))

けっこうハードかも

「Adobe CCおトク&基礎学べる」初心者オススメ☆デジハリAdobeマスター講座で【Dreamweaver】勉強中!/ まとめ

  • デジハリでAdobeの【Dreamweaver】を学べる
  • webのイロハから学べる(なんにも知らない初心者にはわかりやすいオリエンテーションがある)
  • むずかしいと思わせない進行
  • ひとつの講義に集中しやすい内容
  • 効率的にはじめられ、進められる
  • デジハリを使うと、Adobe CC1年間おトクに使えて、6つのアプリの基礎が学べる
    • 1「Ai」 Illustrator (イラストレーター)
    • 2「Ps」 photoshop (フォトショップ)
    • 3「Dw」Dreamweaver (ドリームウィーバー)
    • 4「Id」 InDesign (インデザイン)
    • 5「Pr」 Premiere Pro (プレミアプロ)
    • 6「Ae」 After Effect (アフターエフェクト)

Adobeすべての『アプリ(ツール)』を知りたいとき!リンク

デジハリのAdobeマスター講座を購入すると「Adobe CC」が1年間税込 39,980円で利用できます(Adobe公式よりもお得)

実際、デジハリを申し込んで、使いはじめてAdobeパソコン画面(下画像)を見たら・・すべてのツールがずらーっと並んでいてびっくり!

Adobeのウインドウ
下にスクロールしたAdobeのウインドウ
Adobeのウインドウ3

こんなに使えるんだね!!!

すべて使いこなせる人っていたらすごいわねー

デザイン系だと

Illustrator (イラストレーター)

photoshop (フォトショップ)

が必要になることが多いよ

「Adobe CC」で使えるアプリ(ツール)についてはコチラAdobe公式「Adobe Creative Cloudツール」で確認できます

una
una

それぞれのアプリが解説付きでわかりやすい♪

タイトルとURLをコピーしました