CodeCamp（コードキャンプ）のWebマスターコースレビュー・感想｜3日目

こんにちは。コードキャンプ株式会社が運営するプログラミングスクール「CodeCamp（コードキャンプ）」でプログラミングを学習している渡辺です。

プログラミング初心者の渡辺彩香です！

CodeCamp（コードキャンプ）では常時７種類の講義を展開しています。その中でも、私はWebサービスの開発をしてみたいと思い、HTML、CSS、JavaScript、そしてPHPを学習する「Webマスターコース」を受講することにしました。およそ２ヶ月でどこまで学習できるのか、とても楽しみです。

私が受けているコースは「Webマスターコース」です。プログラミング初心者を対象としており、「そもそもWebサイトがどのようにできているのか？」という知識から、文字の表示や動きをつけるためのコーディングなど、ひとりでWebサイトを構築する上で必要な知識を習得できます。

引用：CodeCamp（コードキャンプ）

受講回数は2ヶ月（20回）、4ヶ月（40回）、6ヶ月（60回）の３つから選べます（今回は2ヶ月間受講します）。

引用：CodeCamp（コードキャンプ）

Codecamp（コードキャンプ）「Webマスターコース」第3回目の学習内容をレビューします。

※2018年の秋頃に受講しました。

Webマスターコース３日目｜CodeCamp（コードキャンプ）

本日の講師：栗山　浩一（くりやまこういち）先生
都内近郊でWebサイトの企画・デザインのお仕事をしています。
また、PHPを中心に企業の技術研修の講師もしています。
プログラミングのことだけでなく、サイト制作のお仕事内容についても質問をどうぞ！特に、見やすくてわかりやすいWebページの作り方に興味のある人には、いろいろなワザを教えちゃいます。

引用：CodeCamp（コードキャンプ）

全２０回のコースのうち、第２回目のレッスン。今回学んだことは以下の通りです。

１. 課題（中級）の答え合わせ

第３回目のレッスンでは、次の第４章の課題に取り組んだ上で講義を受講しました。

第４章　課題（中級）

注意すべき点は以下となります。

1. 一番外側の要素を中央に表示する
2. 閉じるリンクは背景色の付いた範囲どこからでもクリックでき
3. 閉じるリンクの文字には下線をつけず、中央に表示する
4. 閉じるリンクの文字を太字にする
5. それぞれの文章の行間を大きくとる（画像では通常の160%）

課題に取り組んだ結果がこちらです。

第４章課題（中級）に取り組んだ様子

課題に取り組んでみましたが、名前と自己PRの周りに枠をつける方法がわからなくて……。

では、さっそくコードを確認してみましょう！

２. 第７章の教科書を確認しよう

第７章では、今回のHTML・CSSを学ぶ上でとても大事な入力・送信フォームの作り方について学びます。

入力・送信フォームは、こんな感じの画面です。

第７章の教科書

フォームから送信したデータを受け取るのには、今後学ぶPHPなどプログラミング言語を活用します。そのため、教科書や課題では、属性の値を「#」としています。

また、この他にもform要素で頻出の属性がありますが、HTML以外の知識を必要とするので、今回は紹介しません。

では、まずform要素でよく出てくる、



CSSファイルを作成した様子

できたら、保存して確認。「別タブ」をクリックして、実際のブラウザでどのように表示されるのかを確認してみましょうか。

右下の「別タブ」ボタンをクリック

同じ画面が出てきますよね。ここで、chromeならではの機能「検証」を使っていきます。

別タブを開き、「検証」をクリック

すると、下記のような画面が出てきます。今回は、この「検証」機能を使って、テストを繰り返しながら課題を完成させてみましょう。

エディタでコードを書くのと同じように「検証」画面でもコードを書くことができるんですか？

実際に反映させることはできませんが、擬似的に文字の大きさや色などCSSに変更を加えてみることができるんです。

まずは”<h1>タグ”の下に下線を引くために、h1 { }の間にコードを挿入しましょう。渡辺さん、下線を引くにはどう書くんでしたっけ。

「検証」をクローズアップ

ええと、確か。”border”タグでしょうか……。実はまだ、あまり覚えられていないんです。

では、borderと打ってみましょうか。

<h1>要素にbを入力したところ

１文字打っただけで、いろいろと候補が出てきました！！

実は「検証」にはサジェスト機能があるんです。この機能を活用すると、スペルをうろ覚えでも入力をすることができますよ。

<h1>要素の下線にだけ線を引きたいときは、どのタグでしたっけ？

わかりました、”border-bottom”です！

すぐに次のサジェストが出てきました。確か、実線は”solid”ですね。

検証画面で入力している様子

線の太さが気になるので、”1px”で調整したいと思います。

h1要素に下線を追加している様子

いいですね！　ここで、下線の色を変更してみましょうか。色の変更も、検証機能を使うことで簡単に行うことができるんですよ。

“1px”のとなりに、”black”を打ってみてください。

色を指定するコードを入力した様子

すごい！　色も自由に変更できるんですね。今回はわかりやすいように、黄緑色にしてみます！

<h1>要素の下線を黄緑色にした様子

これで<h1>要素のCSSはできあがりですね。では、コピーして、エディタに貼り付けましょう。今のままではまだテストを行っただけなので、実際の画面に表示されることはありません。

エディタに貼り付けて反映させた様子

できました！

いいですね！　他の要素も同じように「検証」を使って考えていきましょう！

Webマスターコース３日目の成果と課題｜CodeCamp（コードキャンプ）

第２回を受講して学んだことと、次回に向けた課題について整理します。

今回は、CSSについての細かい活用方法について伺いながら課題に挑戦することができました。

第４回の受講に向けて、下記の課題に取り組みます。

第８章　課題１の内容

Webマスターコース3日目の感想｜CodeCamp（コードキャンプ）

Webサイトを構成する要素を学びました。ブログやニュースサイトなどのサイト構造が気になるので、よく参照にするサイトを「検証」して、構造を解明してみたいと思います。

また、ややこしい内容だと思っても、ひとつずつコードを見ていけば必ず謎は解明できるとわかりました。もっと勉強して、HTML・CSSはもちろん、もっと先のプログラミングのことについて学んでいきたいです。

CodeCampの無料体験を申し込む

CodeCamp（コードキャンプ）の「Webマスターコース」とは

CodeCamp（コードキャンプ）の「Webマスターコース」は、プログラミング未経験からWebサイト制作のための必要スキルを習得するためのコースです。

＞＞無料体験レッスン受講で10,000円OFFクーポンプレゼントキャンペーン実施中

引用：CodeCamp（コードキャンプ）

CodeCamp（コードキャンプ）「Webマスターコース」の料金

CodeCampの無料体験を申し込む