code cademyの使い方
TRANSCRIPT
![Page 1: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/1.jpg)
Code_cademyの
使い方
Tsuyoshi Motobe
![Page 2: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/2.jpg)
www. codecademy.comにアクセス
![Page 3: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/3.jpg)
今回は、 facebook でログイン
![Page 4: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/4.jpg)
HTML & CSS を選択
![Page 5: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/5.jpg)
START
![Page 6: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/6.jpg)
翻訳:全てのレッスンはここから始まります。説明を読んでから、下部のインストラクションに従ってください。もし行き詰ったら、“ヒント”を押してください。
![Page 7: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/7.jpg)
翻訳:コードをここに書いてください。インストラクションに対する回答をここのエディターに書いてください。
![Page 8: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/8.jpg)
翻訳:どうなったか見てください。あなたのコードがブラウザでどんな風に表示されるかここで見れます。
![Page 9: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/9.jpg)
始まりました!
![Page 10: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/10.jpg)
まずは、ここを読みましょう。ここでは、この回で学ぶ知識の説明と、課題が書かれています。
![Page 11: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/11.jpg)
すべての Web ページは、 HTML と呼ばれる言語で書かれています。HTML はすべてのウェブページに構造を与える骨格と考えて良いです。このコースでは、 Web ページに段落、見出し、画像やリンクを追加するために、 HTML を使用します。
右のエディタでは、 test.html という呼ばれるタブがあります。これは HTML を入力しますファイルです。 < > s のコードを見てください。これが HTML です!他の言語のように、固有の文法(コミュニケーション・ルール)があります。
「 Save and Submit 」を押すと、結果タブは、インターネットブラウザ( Chrome 、 Firefox 、 Internet Explorer など)のように動作します。ブラウザの仕事は、認識可能な Web ページにtest.html というのコードを変換することです!ブラウザは、 HTML の文法に従い、ページをレイアウトする事ができます。
翻訳
![Page 12: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/12.jpg)
下にスクロールすると、インストラクションがあります。ここに手順が書いてあります。
![Page 13: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/13.jpg)
01. 右側に test.html というファイルがあります。
02. 2 行目のテキストを変更します( <strong > と < / strong>の間)何でも好きなテキストに変更してください。
03. Save & Submit Code を押すと、 test.html がブラウザでどのように見えるかを確認できます。見えましたか? <strong> < / strong> のタグは、私たちのテキストを太字にしましたよ!
翻訳
![Page 14: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/14.jpg)
どうしても、詰まってしまったら、ヒントを押しましょう。ほぼ回答なので、できれば押さない方が良いです。
![Page 15: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/15.jpg)
今回の課題は、 <strong></strong>の中身を変更することでしたので、
![Page 16: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/16.jpg)
こんな感じに変えました。
![Page 17: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/17.jpg)
こちらも変更されているのが確認できます。
![Page 18: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/18.jpg)
Save & Submit Code を押してください。
![Page 19: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/19.jpg)
正解すると、 Way to go! と表示されます。「 Start Next Lesson 」ボタンを押して次に行きましょう!
![Page 20: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/20.jpg)
次の回に進みました。2/14 となっているのが確認できます。
![Page 21: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/21.jpg)
次の回に進みました。2/14 となっているのが確認できます。
![Page 22: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/22.jpg)
ここの数字を変更することで、違う回に行けます。
![Page 23: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/23.jpg)
もし簡単すぎるようであれば、ここの HTML & CSS を押してください。
![Page 24: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/24.jpg)
先程の進捗が表示されています。
より高度なコースに進むこともできます。
![Page 25: Code cademyの使い方](https://reader035.vdocuments.mx/reader035/viewer/2022070509/58a527091a28ab143f8b6cb3/html5/thumbnails/25.jpg)
これを何度も繰り返します。