Progate後の学習 ～after to Progate～
さて、前回の記事でProgateの具体的な進め方を解説させていただきました。まだよくわからないよ、もっと基礎を固めたいとゆう方もとりあえずは一旦終了してもらって次の学習に移りましょう。勉強から離れていた社会人の方は、ひとまずコーヒーでも飲んで久しぶりに使った頭をリフレッシュしてください笑
そして一息ついたらまた新しいことを始めます。まずはテキストエディタとゆうものをご自身のPCにダウンロードして頂くことになります。
テキストエディタとは、HTML、CSSで書いたコードをブラウザに反映させるときの、コードを書く為のソフトになります。いわゆる商売道具です。これから長い付き合いになるので、ダウンロードしたらぜひ一礼してこれからよろしくお願いしますと挨拶しといてください笑
よろしくお願いしますね、エディターさん！
え？💦
テキストエディタを入れよう
さっそくテキストエディタと検索して、ご自身のPCにダウンロードします。とは言ってもたくさん種類があり、その中でも無料や有料のものもあるのでどれを選んだらいいか迷うかもしれませんが、初学者の方が使う分にはまず無料のもので十分です。その中でも迷ったらVisual Studio Codeか、Atomを選択しましょう。とりあえずこの二つのうちどちらかを選んどけば間違いないです。それは、どちらも使ってる人が圧倒的に多いから。書籍や動画などでも、主にこの二つが挙げられてることが多いです。使ってる人が多いとゆうことは、ちょっと調べればすぐいろいろな情報が分かるとゆうこと。使っていて分からないことがあっても、いろんな方が解説されているので、ご自身で問題を解決しやすいといえます。ちなみに私はVisual Studio Codeを使っています。今でもこれ一筋です。手放す理由がないほど使いやすいですから笑
悩んだらVisual Studio Codeか、Atom
とゆうわけで、ここで迷うのももったいないのでサクッと決めちゃいましょう！オススメはVisual Studio Codeか、Atomです！好きな方を選んでください笑
Visual Studio Codeの解説はこちら
https://skillhub.jp/blogs/235
Atomの解説はこちら
https://freesoft-concierge.com/utility/atom-2/
もちろん、それ以外でもたくさんの優良なエディタがあるのでご自身で調べられて気に入ったものを選んでも構いません！
エディタをダウンロードしたら、最初は英語になってると思います。気になる方は上の解説リンクのページで日本語化の設定を行なってください。日本語化するには、プラグインとゆう拡張機能を入れる必要があります。次に便利なプラグイン機能を入れてみましょう。
プラグインを導入しよう
テキストエディタには、使用を快適にするプラグイン機能(拡張機能)が備わっています。無料で使えるものばかりなので、今のうちから入れておいて操作性を上げておくと後々楽になります。
Visual Studio Codeであれば、Live Serverとゆうプラグインが便利なので、優先的に入れとくといいと思います。通常、自分の書いたコードをブラウザに反映させるとき、一度保存→コピーして開くとゆう二度のクリック作業があるのですが、Live Serverがあれば、自分の書いたコードをそのまま直でブラウザに反映してくれるので、かなり時短になります。素早くコーディングを行うには必須のプラグインですので、ダウンロードしたら秒で入れときましょう笑
以下、オススメのプラグイン機能を上げておきます。参考にしてみてください。
Visual Studio Codeのプラグイン機能
https://webst8.com/blog/vscode-recommend-plugins/
Atomのプラグイン機能
https://macoblog.com/atom-plugin/
ブラウザを入れよう
テキストエディタで書いたコードを実際にWebサイトに反映させるには専用のブラウザが必要です。ブラウザとはインターネットを閲覧するときにインターネットエクスプローラーやらsafariやらをクリックすると思いますが、分かりやすく言えばそのアイコンのことです。ただインターネットエクスプローラーは現在サポートが終了しているので、非推奨です。Web製作の勉強を始めたのなら、Googlechromeを入れることをおススメします。Googlechromeとは、天下のGoogle様が開発したWebブラウザーです。最新のWeb環境に対応しており、高速でシンプルな動きが人気です。また便利な拡張機能を追加して使いやすくカスタマイズすることも可能です。まだ入れてない人はぜひともこの機会にダウンロードしておくことをおススメします！
エディタを使って書いてみよう
テキストエディタのダウンロードが終わり、プラグインも実装できたら、実際にエディタにコードを書いてみましょう。
Visual Studio Code ファイルの作り方、コードの書き方 https://webst8.com/blog/vscode-file-create/
Atom ファイルの作り方、コードの書き方
https://nexer.co.jp/weiv/how-to-use-atom/
このようにプロゲートで勉強したことを活かしていろいろ書いたり画像を貼ってみたりしてください。
最初はなかなかエディタの使い勝手に慣れず、苦戦してイライラするかもしれませんが、初めてのことは誰でも上手くいきませんので大丈夫です。いろいろ触っていくうちに分かるようになってきます。なのでどうかこの時点ではパソコンをぶん投げたりせずに肩慣らしだと思って気長にやってみてください（笑）まだ学習は始まったばかりですから(;´∀｀)
×
〇
Progate後の最強本紹介！
エディタもブラウザも準備できたところで、いよいよ次のステップの学習に移ります。
私がProgate後に激推しする一冊の本があります。それはなにかというと
ドン！
はい、こちら1冊ですべて身につくHTML＆CSSとWebデザイン入門講座です!(^^)!
独学で現在勉強している人はこの本知ってるとゆう方、多いのではないでしょうか？
この本はProgateを一通り終えた後の教材にもってこいの初心者向け神本です！
WebクリエイターボックスとゆうWebデザインやWeb業界について広く発信されているブログがあって、管理運営者のManaさんとゆう方が書かれた本です。
内容が緩く丁寧な感じに仕上がっていて、適切な写真配置と文字の大きさでとても見やすいです！
まさに初心者が初めに手を付ける教材としてうってつけの本ですので、まずはこの本でWebデザインからのコーディングとは何か？や適切なタグの使い方などを知識として入れておきましょう。
また、この本には前の記事でお伝えしたFlexboxについても詳しく載っています！コーディングにおいて、もはやFlexboxは必須ですので、この解説ページはとてもありがたいです！私も何度も辞書的な感じで読み返しましたし、今でもお世話になっています（笑）
Flexboxについてこんなに分かりやすく解説が載っている本もあまりないと思うので、とてもおススメです！
そしてもう一つ重要なのが適切なタグを要所要所で入れようとゆうことです。
例えばヘッダーやフッターだけでなく、リストを作るときはnavタグ、塊のコンテンツを囲むときはsectionタグなど、div以外のタグもちゃんと使いましょうとゆうことです。
Progateでは道場コースも含めてほぼ全てdivタグで書くことになっていましたが、実際はそうゆうコーディングはしません。なぜdivタグだけで作ってはいけないかとゆうと、このページでは説明を割愛しますが、SEOとゆうGoogleやYahoo!の検索上位にくるシステムがあって、それに乗りにくくなるからです。また、制作会社さんも仕事でコーダーの書いたコードを見ることがあるのですが、明らかにクソコード認定されます（笑）なのでこのタイミングでは難しいかもしれませんが、一応こうゆう書き方をするんだよとゆうことだけ頭に入れておいてください。
一通り目を通したら実演ページをやってみよう
Webデザインの基本構造や様々なCSSの記述など一通りの解説が終わったところで、フルスクリーンのWebサイトを説明文を追いながら実際に作っていくページがあります。
作成していくのは架空のカフェのホームページです。
内容が充実していて、普通に作ると結構難しいレベルです（笑）とくにProgateを終えたばかりの初学者の方がやるには説明文を追っても、つまりどうゆうことだってばよ？な状態だと思いますが大丈夫です。この時点ではこんなWebサイトが作れるようになるんだ！楽しみだな～くらいの感覚で本の内容をまるコピしてみてください。コードの書き方は詳しく載っていますので、まずは全体の雰囲気ややり方を学ぶとゆう感覚で気軽にやってみてください！
また、終盤にはプラグインや地図の埋め込みなどがあります。初めやることばかりで戸惑うかもしれませんが、心を無にしてやり方をよく見てやってみてください。この時点で暗記できなくても全然問題ないです。
まとめ
いかがでしたでしょうか？今回はテキストエディタのダウンロード、実際のコーディング初体験、そして役に立つ神本をご紹介しました。私もProgateを終えたばかりの頃はどんどん知らない単語やわからないことが出てきて大丈夫かなと思いましたが、気長にぼちぼちやっていくうちにできるようになってきました。なので、初学者のみなさんもこれを見て自分もやってればいずれできるようになるんだ！と自信をもって学習に取り組んでいただけたらと思います。最後に1冊ですべて身につくHTML&CSSの商品リンクを貼っておきますので、これを見て一緒に勉強を頑張りたいと思った方やこれから独学頑張ります！とゆう方もぜひぜひこのリンクから買っていただけると嬉しいです！まだまだ道は長いですが共に頑張って乗り越えていきましょう！最後までお読みいただきありがとうございました！また次の記事でお会いしましょう!(^^)!