ProgateでHTML・CSSの基礎を学んだら次にすること【答え:模写をする】

ProgateでHTML・CSSを学んだら次に何をするか迷ってませんか?次にすること、それは模写です。けれどコーディングの基礎をProgateで学んだ直後、どうやって?どこに?模写をするのかさっぱりだと思います。そんなお悩みの方にまずは模写をする環境の準備について紹介していきます。

Progateの次に何をする?

タイトルでもお伝えした通り、Progateで基礎を学習したあとは模写、つまり何かしらのサイトを見て真似をします。なんでも良いわけではなく、なるべくシンプルで動きの少ないものを選ぶのが良いです。動きの少ないものとは、スクロールする度に変わった動きをするものや、カーソルの移動やクリックでかっこいい動きをするものを指します。本当はそういったかっこいいものをやってみたいですが、難しすぎて挫折する可能性もあるので最初は簡単なものをやってみましょう。

では模写をするためにはどうすれば良いのでしょう?Progateでは用意された環境でコードを打ち込むだけでよかったですが、これからは自分でコードを打ち込む環境を用意しなければなりません。次の章でコーディングの環境準備について紹介します。

ローカル環境を準備しよう

ローカル環境ってなんぞ?!と思ったかもしれません。ローカル環境とは、普段みんなが調べ物などをしても検索にかからないところ、自分のパソコンの中だけでみれる環境です。なぜローカル環境を用意するかというと、自分でコーディングしてみてインターネット上で正しく表示されるのかをみる必要があるから。

用意自体は非常に簡単です。以下の三つを準備しましょう。

  • テキストエディタを準備する
  • 打ち込んだコードを保存するファイルを作成する
  • Google Chromeのアプリを用意する

テキストエディタを用意しよう

テキストエディタとはコードを編集する環境、アプリケーションです。何かメモをする時、MacやiPhoneならメモのアプリを起動してそこに打ち込むと思いますが、同じニュアンスでコードを打ち込む場所が必要です。そのためにテキストエディタを用意しましょう。おすすめのテキストエディタはAtom、有名でたくさんの人が使用しているアプリです。

Atomのインストールはこちらから

一応細かく順序を説明するために「ファイルを作成する」と言いましたが、Atomなどのテキストエディタでコードを作成する過程で準備しますのでその辺りは後述します。

Google Chromeを用意しよう

Google Chromeのアプリを用意すると言いましたがこれは正直なんでも良くて、FirefoxでもSafariでも良いです。今回はGoogle Chromeを前提に進めていきます。

なぜGoogle Chromeを準備するかというと打ち込んだコードを表示する場所を用意するためです。テキストエディタだけではちゃんと表示されているのかわからないので、本番環境だったらこう表示される、という場所としてGoogle Chromeを用意する必要があります。

ローカル環境での表示の仕方

これで準備が整いました。あとはひたすらコードを真似ていってちゃんと表示されるかを試していきます。とりあえず簡単なものから作ってみましょう。

コードを模写する

基本的には模写をするサイトの空欄のところで右クリック→検証と進むとコードが出てくるので、それをひたすらに真似ていきます。この時重要なのが自分の打っているコードがどこの部分にあたるのかを意識することです。自分の打ったものが何を表し、どこに表示されているのかを意識しながら打つことで自分で作り出す時の経験値になります。コードさえ覚えてしまえば極端な話どんなものでもコーディングして再現できるようになるわけです。

ほどほどに模写の正確さやスピードを意識しつつ、打ち込んでいるコードが何を表しているかを考えるのがコツです。

保存先のフォルダを用意する

何もないところからひたすらコードを打っていたらどこに保存されるかが確定されてません。とりあえずコードを打ち込んでいるところで「cmd + s」か「ctrl + s」を押してみてください。そうするとフォルダが新規に作成され、フォルダ名を入力する画面になるはずです。自分のわかりやすい名前にして保存しておきましょう。どこいったかわからなくなるので、最初はデスクトップに保存するのがおすすめです。

開くアプリケーションを指定

ある程度コーディングが終わったら試しにGoogle Chromeで開いてみましょう。ファイルのところで右クリックして、このアプリケーションで開く、と出るのでそこでGoogle Chromeを選択して開いてみましょう。

HTMLファイルの開き方

Google Chromeはないと思うので、その他から選んでください。

開いてみたら全然想像してない形で表示されるかもしれませんが、コードが間違っているか、もしくは読み込んだ情報が古いかのどちらかです。リロード(再読み込み)も念のためしてみましょう。

まとめ

これでコーディングの練習環境はしっかり整いました。あとはとにかく経験を積むためにひたすら模写をするだけです。とはいえ最初に書き込むコードを調べたり、cssのファイルと連動させたりと、Progateからいきなり模写に入ると知らないこと、学ぶことがたくさん出てきます。

おそらく最初は全くうまくいかなくてションボリするはず。いきなり放り出された感じがしますが、Progateはあくまでコーディングの基礎を学ぶためのきっかけで、環境がすごい丁寧に用意されていたんだなーと実感するはずです。そのきっかけを生かすのはあなたの学習意欲と諦めない気持ちです。一個ずつ調べて、コーディングを一人前にできるように頑張りましょう!

Progateで基礎を学んだ次にすること
最新情報をチェックしよう!