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

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

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

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

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

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

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

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

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

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

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

  1. 5分のカウンセリング
  2. エディター及び教科書の活用方法(ディレクトリの作成について)
  3. 課題を通してわかったこと(色の指定方法、<!DOCTYPE html>、metaタグ)

※「第3章CSSの基礎」までは自己学習で進めました。

1. 5分のカウンセリング

今回は第1回目のレッスンだったので、進め方についてのカウンセリングがありました。私の場合は2ヶ月でHTML、CSS、JavaScript、PHPを学習したいので、予習をどれだけ進められるかが肝となります。

このタイミングで「レッスンを受ける前はなるべく課題を進めて、疑問点を明らかにしておくこと」という受講のポイントを知ることができたのは良かったです。

2. エディター及び教科書の活用方法(ディレクトリの作成について)

レッスンで実際に使用するエディター及び教科書は以下の画面です。

エディター及び教科書の画面

左側にディレクトリ(フォルダのこと)、右側に教科書があります。章のタイトルを開くと、下記のようにメニューがずらり。

体験レッスン教材の内容

HTML5、CSS3の分野だけでも全部で9章まであるので、情報量の多さを感じます。

新しくディレクトリを作成する方法についても学びました。下記画像は、「index.html」を作ってみたところです。

ディレクトリ作成の様子

 

基本的な使い方がわかったところで、実践に入ります!

3. 課題に挑戦

右側の課題を見ながら、中央画面にコードを入力

第3章までは自分で学習を進めていましたが、HTML・CSSの基礎となる大事な箇所です。そのため、授業ではまず「CSSの基礎力を問う課題」からスタートしました。課題内容は下記の通りです。

第3章の課題

上記のように、指定されたデザインをイチから作っていく課題に取り組みます。はじめに教わったディレクトリの作成方法に従い、まずはchallenge_momotaro.cssというファイルを作成しました。

基本的な操作のため、あまり悩まずに課題に取り組むことができました。しかし、気になった箇所が何点かあったため、Q&A形式で紹介します。

1日目のレッスンで生じた疑問

1日目のレッスンを受講し課題を解いていくと、4つの疑問が出てきました。その解答と合わせてご紹介します。

色の指定方法について

渡辺彩香
フォントの色を「赤」で指定したいとき、red、#ff0000などさまざまな表記方法が存在します。どんな指定方法がベストですか?
栗山浩一先生
どちらがいいということはありませんが、16進数、10進数のどちらも扱えるようにしておくと良いでしょう。

赤だとred、青だとblueなど、色を名前で指定することはできますが、すべての色をカバーしているわけではありません。例えば、レッドとオレンジを混ぜたような色だと、名前がついていないため指定できません。対応しているモニタの色数にもよりますが、256色のみの指定となります。

一方、16進数(#から始まり数字6桁で終わるものです)なら、1670万色も指定することができるのです。

<!DOCTYPE html>とは

渡辺彩香
HTMLを書くとき、一番最初に書く”<!DOCTYPE html>”とはどのような意味があるのでしょうか。
栗山浩一先生
“<!DOCTYPE html>”とは、HTMLのバージョンを指定するものです。

なぜこの宣言をするのかと言うと、ブラウザによって、どの時代のHTMLを読み込むかが異なることがあるためです。古いHTMLの型をデフォルトとしているブラウザがあった場合、見た目が崩れてしまう可能性があります。必ず1行目にバージョンの指定を入れる癖をつけましょう。

metaタグとは

渡辺彩香
<meta>タグで指定することにはどんな役割があるのでしょうか。
栗山浩一先生
<meta>タグは、その文書内の情報(メタデータと言います)を指定するときに使います。

例えばページのタイトルや文字コードの指定、スタイルシートの指定などを行います。特に、”utf-8”や”shift_jis”などの文字コードの指定は必ず行いましょう。文字化けの原因となります。

コメントを書く方法

渡辺彩香
教科書を見ながら、 コードを書くと、どこにどんな指定があったのかわからなくなります……。プログラム中にメモをする方法はありますか?
栗山浩一先生
あります。言語によって変わりますが、HTML/CSSの場合は、メモを「/*と「*/」で挟みます。

上記は「3ー10 課題」のCSS回答箇所です。コメントを入れることで、要件を何度も確認する手間が省けました。

今回は「自分自身の確認のため」にコメントを残しましたが、チームで開発を進めていたり、他の人がメンテナンスをしたりする場合に、コードをわかりやすく保つためにコメントを残すようです。

今回のつまづきポイント

どうしてもできないことや自分で解決できなかった「つまづきポイント」についてまとめてご紹介します。

スペルミス

例えば「stylesheet」を「styleseat」と打ってしまうなど、タグを間違えて覚えていたり、打ってしまったりして、きちんと反映されないことが多々ありました。スペルミスがあると、プログラムが動かなくなってしまうので、細かく確認をしていくことが重要です。

今回のレッスンは初回ということもあり、難しいものはありませんでしたが、20回しかないレッスンの中で、どの言語でどれだけ時間を割くかが学習の鍵となります。それらも考えながら、予習・復習を進めていきます。

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

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

・学習の進め方
・HTML、CSSの基礎

今回は、今後を踏まえた学習の進め方と、HTML、CSSについての細かい活用方法について伺いながら課題に挑戦することができました。

授業では4章の課題1まで学習を進めました。第2回に向けて、下記の課題に取り組みます。

第3章の課題(中級)

作成の際、以下の要件は必ず満たすようにしてください。要件以外の文字の大きさや配色などは自由です。

  1. CSSは外部読み込みにする
  2. 見出しの上下境界線を点線(破線ではない)にする
  3. 見出しの文字は半角の「<」と「>」で囲い、中央寄せにする
  4. リンクの文字色の色を変える(サンプルではオレンジ)にする
  5. 赤い字の部分はspanで囲い、文字のサイズを18pxにする
  6. リストの点を丸ではなく四角にする

第4章の課題2

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

  1. 全ての要素はブラウザ左端から表示する
  2. 各検索エンジンへのリンクは、背景色の付いた範囲どこからでもクリックできる
  3. 各リンクの文字は中央に表示する
  4. 各リンクは上下に余白をあける
  5. 各リンクに箇条書きのマーカー(黒丸)を表示しない

色や文字の大きさについては自由で、サンプルと全く同じにする必要はありません。教科書では教えていないプロパティを利用する課題もあるようなので、ネットで調べながら課題に挑戦します。

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です!気軽にご連絡ください★