Adobe CCおトク＆基礎学デジハリAdobeマスター講座Dw勉強中

「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座で【Dreamweaver(ドリームウィーバー)】を勉強中です
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】HTML・CSSを使うにあたって標準となる・参考とするサイトなど
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「分割」
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「環境設定」から設定できるもの
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「背景色」を変える
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「文字サイズ」を変える
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】自動でコードが入らないほうがいいとき「コードヒント」
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「コードフォーマット」
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】ブラウザの種類
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】Chrome DevTool
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】感想
「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】で勉強するメリット
「Adobe CCおトク＆基礎学べる」初心者オススメ☆デジハリAdobeマスター講座で【Dreamweaver】勉強中！/ まとめ
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の HTML&CSS ページあたらしい情報がある＞ HTML5.2

デジハリAdobeマスター講座【Dreamweaver】MDN/MDN Web Docs サイト

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

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

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

MDN ページ

デジハリAdobeマスター講座【Dreamweaver】HTMLクイックリファレンス

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

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

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

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

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

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

「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「環境設定」から設定できるもの

「環境設定」へ入るには

Mac メニューバー(上部)左はし「Dreamweaver」＞「環境設定」
Windows メニューバー(上部)＞「編集」＞「環境設定」

メニューバー(上部)＞表示＞コードビューオプション

ワードラップ=コードが長くなったときにもそのまま改行したようになって表示される
行番号=コードの行ナンバー
シンタックスカラーリング＝色で「タグ・青色」「属性・緑色」など、意味づけされていて、見やすくなっている
自動インデント=字下げ例：＜body＞に書き込まれたものであることをわかりやすく文の頭に１文字ぶん開けたり見やすく・エンターキーを押すことで自動でやってくれる

「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「背景色」を変える

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

「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】コード表示の「文字サイズ」を変える

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

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

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

「コードヒント」

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

「Adobe CCおトク＆基礎学べる」デジハリAdobeマスター講座【Dreamweaver】「コードフォーマット」

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

「コードフォーマット」

Dreamweaverの場合、タブキーを押すと4つ入る→2つで使用するところもある

「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デベロッパーツール画面左はし上部・大小２つの四角い小さなアイコンをクリック (カーソルを合わせるとgoogled devices toolbarと表示)をクリック＞上部中央 Responsive をクリック＞各デバイス (Galaxy S5 iPhone 5/SEなどことじ)が表示されるので、見たいものをクリック

デベロッパーツールでスマホサイズで表示させたい時 — スマホサイズで表示させる時

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

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

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

感想は・・

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系を学ぼうとする人には、このデジハリ・オンラインスクールはとても良い選択です

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

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

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

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

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

デジハリ・オンラインスクールのデメリット/Dreamweaver

目的をもって視聴しないと単調になりやすい
視聴期間40日間は人によっては足りないかも

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

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

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

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

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

デジハリ・オンラインスクールのメリット/Dreamweaver

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

さわやかーな先生♪

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

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

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

けっこうハードかも

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

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