オンラインでVSCodeを使用、CodePenで表示確認
1. やはりVSCodeを使いたい ウェブデザインの勉強を始めてドットインストールさんに教えてもらったのがVSCode、職業訓練校（以下訓練校）さんのテキストでも推奨されていたのでVSCodeで勉強を始めました。ところが訓練校ではVSCodeの使用は不可、DreamWeaver（以下DW)の使用しかできないことに。半日かけてテキスト資料も勉強でもDreamWeaver使いにくいのです。アドビさんごめんなさい。2．やむなくDreamWeaverを DWでややこしいのはサイト定義、画面が大きくならない、隣にビューが出ているが信用ならない。Codeのエラー機能がない。重たいので他のアドビのソフトと併用できない。などがあります。でもぐずついては訓練校の授業においていかれるので3．メモ帳がいいかな Win10についているメモ帳を使うことに。訓練校の授業に完全においていかれた自分は、みんなとは別にテキストを見ながらメモ帳で入力すること半日がんばりました。画面は大きいし。いいのだけど・・・。新規ファイルを作るたびに全てのファイルにしたり、エラーアシストがない。色がつかないのがさびしい（わがままかい！？）。家に帰って、VSCodeをダウンロードせずに使う方法はないものか考えました。4．VSCodeオンライン版発見Visual Studio Code for the WebBuild with Visual Studio Code, anywhere, anytime, entirely in your browser.vscode.dev こちらです。すばらしい。ありました。ダウンロードせずに使えるのです。ところが・・・うちこんだコードをブラウザで表示させるにはGIT HUBと連携してGIT HUB上で確認するという方法になります。と書いて実際に訓練校の授業が個人面談のためストップして自習になっている間にやってみました。5. 結論からいうとやはりVSCodeはダウンロードして使ったほうがいいです。オンライン版は通信環境にもよるのですが半日の実習の中で何度も落ちてしまい。変更が保存されていなかったり、フォルダー自身が消えてしまい。また1からやり直しになったりしました。6. CodePenは部品作成用に VSCodeで作成したHTML,CSSを貼り付けて動作確認しようとしたところ。無料のCodePenでは画像のアップロードは不可だそうです。ですから、CodePenはページ全体の表示よりも、ボタンなどの部品づくりの方が使い道も多そうです。HTMLとCSSを貼り付けて動作を確認し、部品のhtml,cssを元のindex.htmlにはりつけるのがよさそうです。今朝、CodePenで確認なんて書いてしまいましたが間違いでした。読んでくださった皆様。すいませんでした。
