CodeCamp(コードキャンプ)のWebマスターコースレビュー・感想|3日目

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

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

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

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

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

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

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

Webマスターコース3日目|CodeCamp(コードキャンプ)

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

引用:CodeCamp(コードキャンプ)

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

CodeCamp(コードキャンプ)Webマスターコース第3回目レッスンの内容

  1. 第4章の課題(中級)の答え合わせ
  2. 第7章の教科書を確認しよう

1. 課題(中級)の答え合わせ

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

第4章 課題(中級)

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

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

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

第4章課題(中級)に取り組んだ様子

渡辺彩香
課題に取り組んでみましたが、名前と自己PRの周りに枠をつける方法がわからなくて……。
栗山浩一
では、さっそくコードを確認してみましょう!

2. 第7章の教科書を確認しよう

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

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

第7章の教科書

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

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

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



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

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

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

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

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

栗山浩一
すると、下記のような画面が出てきます。今回は、この「検証」機能を使って、テストを繰り返しながら課題を完成させてみましょう。
渡辺彩香
エディタでコードを書くのと同じように「検証」画面でもコードを書くことができるんですか?
栗山浩一
実際に反映させることはできませんが、擬似的に文字の大きさや色などCSSに変更を加えてみることができるんです。

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

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

渡辺彩香
ええと、確か。”border”タグでしょうか……。実はまだ、あまり覚えられていないんです。
栗山浩一
では、borderと打ってみましょうか。

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

渡辺彩香
1文字打っただけで、いろいろと候補が出てきました!!
栗山浩一
実は「検証」にはサジェスト機能があるんです。この機能を活用すると、スペルをうろ覚えでも入力をすることができますよ。

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

渡辺彩香
わかりました、”border-bottom”です!

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

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

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

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

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

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

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

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

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

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

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

渡辺彩香
できました!
栗山浩一
いいですね! 他の要素も同じように「検証」を使って考えていきましょう!

Webマスターコース3日目の成果と課題|CodeCamp(コードキャンプ)

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

・検証画面でCSSをテストする方法
・CSSの基礎

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

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

第8章 課題1の内容

Webマスターコース3日目の感想|CodeCamp(コードキャンプ)

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

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

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

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

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

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

2ヶ月
  • 料金:148,000円(税抜)
  • レッスン回数:20回
  • 受講期間:60日間
  • 週の学習時間目安:20〜25時間
4ヶ月
  • 料金:248,000円(税抜)
  • レッスン回数:40回
  • 受講期間:120日間
  • 週の学習時間目安:10〜15時間
6ヶ月
  • 料金:298,000円(税抜)
  • レッスン回数:60回
  • 受講期間:180日間
  • 週の学習時間目安:5〜10時間

LINE@無料相談

無料で相談する

編集部がプログラミングスクール選びのアドバイスをさせていただきます。「スクールがたくさんあり過ぎてどれを選べば良いのか分からない」「どの言語を勉強すれば良い?」「転職に有利なスクールはどこ?」など、どんな質問でもOKです!気軽にご連絡ください★