みなさんがインターネットで見ているWebサイトはHTMLとCSSという仕組みを使って作っています。
今日はこのHTMLとCSSの使い方をProgateというサービスを使って練習します。
まず、ProgateのWebサイトにアクセスします。下のアドレスをクリックしてください。
※Progateを使うためには、Google Chromeの最新版かInternet Explorerのバージョン11以上が必要です。分からない時は、大人の人に聞くか、Kids Code Clubのスタッフまで相談してください。
Webサイトを開いたら、右上にある「ログイン」ボタンをクリックします。
メールアドレスとパスワードを入力して、ログインボタンをクリックします。
HTMLとCSSのコースをクリックします。
HTMLとCSSのコース一覧が表示されます。
まずは、「HTML＆CSS初級編」をやってみましょう。このレッスンを終えると下のようなWebサイトがつくれるようになっています。
それではまずはじめに「レッスンを始める」をクリックします。
レッスンは次のような流れで進みます。
①スライドを見る
②演習でコードを書いてみる
まずはじめにスライドを見てみましょう。
次のページに進んだり戻ったりするためには、画面右下にある左右ボタンか、キーボードの左右ボタンを押してください。
スライドをすべて読み終わったら、演習に進むボタンを押すか、Enterボタンを押して、演習に進みましょう。
演習ではHTMLとCSSのコードを実際に入力していきます。
画面は次のようになっています。
①何をするかが書いてある教科書です
②あなたがコードを入力するところです
③入力したコードの結果が表示されます
④いまやっているレッスンの見本が表示されています
⑤スライドを見ることができます
⑥入力画面を最初の状態に戻すことができます（入力したコードはすべて消えます）
⑦ヒントや答えを見ることができます（答えを見るともらえる経験値が減ります）
⑧レッスンがどれくらい進んでいるかが分かります
⑨コードを書き終わったあと、答え合わせをするボタンです
入力するコードはのコピーボタンをクリックするとコピーすることができます。
コピーしたコードを貼り付ける時は、キーボードの左下にある「Ctrl」を押しながら「V」のキーを押しましょう。
分からなくなったら「スライドで確認」ボタンをクリックすると、ヒントになるスライドが表示されます。
コードを書くとすぐにプレビュー画面に表示されます。プレビューと見本が同じになるようにコードを書きましょう。
もしまちがっていたら、まちがっている理由が表示されるので、コードを書き直しましょう。
正解すると経験値がもらえてレベルアップします！次に進むボタンをクリックして、どんどん進みましょう。
いま自分がやっているレッスンやレベルはマイページで見ることができます。マイページへは右上のにんじゃわんこの横にある、名前のところにカーソルを合わせると下に出てくるメニューをクリックして移動できます。
小学生から挑戦できる簡単なものから、大人も学ぶ本格的なものまで、たくさんのレッスンがそろっています。ぜひ挑戦してみてください！
分からないことがあったら、Kids Code Clubのスタッフまで気軽に相談してくださいね。
メール（info@kidscodeclub.jp）やLINEで相談できます。受付時間によってはお待たせすることがありますが必ずお返事します。
Progateはこちら https://prog-8.com