こんにちは。コードキャンプ株式会社が運営するプログラミングスクール「CodeCamp（コードキャンプ）」でプログラミングを学習している渡辺です。
私が受けているコースは「Webマスターコース」です。プログラミング初心者を対象としており、「そもそもWebサイトがどのようにできているのか？」という知識から、文字の表示や動きをつけるためのコーディングなど、ひとりでWebサイトを構築する上で必要な知識を習得できます。
受講回数は2ヶ月（20回）、4ヶ月（40回）、6ヶ月（60回）の３つから選べます（今回は2ヶ月間受講します）。
Codecamp（コードキャンプ）「Webマスターコース」第1回目の学習内容をレビューします。
目次
Webマスターコース1日目｜CodeCamp（コードキャンプ）
本日の講師：栗山 浩一（くりやまこういち）先生
都内近郊でWebサイトの企画・デザインのお仕事をしています。
また、PHPを中心に企業の技術研修の講師もしています。
プログラミングのことだけでなく、サイト制作のお仕事内容についても質問をどうぞ！特に、見やすくてわかりやすいWebページの作り方に興味のある人には、いろいろなワザを教えちゃいます。
CodeCamp（コードキャンプ）Webマスターコース第１回目レッスンの内容
- 5分のカウンセリング
- エディター及び教科書の活用方法（ディレクトリの作成について）
- 課題を通してわかったこと（色の指定方法、<!DOCTYPE html>、metaタグ）
※「第３章CSSの基礎」までは自己学習で進めました。
１. 5分のカウンセリング
今回は第1回目のレッスンだったので、進め方についてのカウンセリングがありました。私の場合は２ヶ月でHTML、CSS、JavaScript、PHPを学習したいので、予習をどれだけ進められるかが肝となります。
このタイミングで「レッスンを受ける前はなるべく課題を進めて、疑問点を明らかにしておくこと」という受講のポイントを知ることができたのは良かったです。
２. エディター及び教科書の活用方法（ディレクトリの作成について）
レッスンで実際に使用するエディター及び教科書は以下の画面です。
エディター及び教科書の画面
左側にディレクトリ（フォルダのこと）、右側に教科書があります。章のタイトルを開くと、下記のようにメニューがずらり。
体験レッスン教材の内容
HTML5、CSS3の分野だけでも全部で９章まであるので、情報量の多さを感じます。
新しくディレクトリを作成する方法についても学びました。下記画像は、「index.html」を作ってみたところです。
ディレクトリ作成の様子
基本的な使い方がわかったところで、実践に入ります！
３. 課題に挑戦
右側の課題を見ながら、中央画面にコードを入力
第３章までは自分で学習を進めていましたが、HTML・CSSの基礎となる大事な箇所です。そのため、授業ではまず「CSSの基礎力を問う課題」からスタートしました。課題内容は下記の通りです。
第３章の課題
上記のように、指定されたデザインをイチから作っていく課題に取り組みます。はじめに教わったディレクトリの作成方法に従い、まずはchallenge_momotaro.cssというファイルを作成しました。
基本的な操作のため、あまり悩まずに課題に取り組むことができました。しかし、気になった箇所が何点かあったため、Q&A形式で紹介します。
１日目のレッスンで生じた疑問
１日目のレッスンを受講し課題を解いていくと、４つの疑問が出てきました。その解答と合わせてご紹介します。
色の指定方法について
赤だとred、青だとblueなど、色を名前で指定することはできますが、すべての色をカバーしているわけではありません。例えば、レッドとオレンジを混ぜたような色だと、名前がついていないため指定できません。対応しているモニタの色数にもよりますが、２５６色のみの指定となります。
一方、１６進数（＃から始まり数字６桁で終わるものです）なら、１６７０万色も指定することができるのです。
<!DOCTYPE html>とは
なぜこの宣言をするのかと言うと、ブラウザによって、どの時代のHTMLを読み込むかが異なることがあるためです。古いHTMLの型をデフォルトとしているブラウザがあった場合、見た目が崩れてしまう可能性があります。必ず１行目にバージョンの指定を入れる癖をつけましょう。
metaタグとは
例えばページのタイトルや文字コードの指定、スタイルシートの指定などを行います。特に、”utf-8”や”shift_jis”などの文字コードの指定は必ず行いましょう。文字化けの原因となります。
コメントを書く方法
上記は「３ー１０ 課題」のCSS回答箇所です。コメントを入れることで、要件を何度も確認する手間が省けました。
今回は「自分自身の確認のため」にコメントを残しましたが、チームで開発を進めていたり、他の人がメンテナンスをしたりする場合に、コードをわかりやすく保つためにコメントを残すようです。
今回のつまづきポイント
どうしてもできないことや自分で解決できなかった「つまづきポイント」についてまとめてご紹介します。
スペルミス
例えば「stylesheet」を「styleseat」と打ってしまうなど、タグを間違えて覚えていたり、打ってしまったりして、きちんと反映されないことが多々ありました。スペルミスがあると、プログラムが動かなくなってしまうので、細かく確認をしていくことが重要です。
今回のレッスンは初回ということもあり、難しいものはありませんでしたが、２０回しかないレッスンの中で、どの言語でどれだけ時間を割くかが学習の鍵となります。それらも考えながら、予習・復習を進めていきます。
Webマスターコース１日目の成果と課題｜CodeCamp（コードキャンプ）
第１回を受講して学んだことと、次回に向けた課題について整理します。
・HTML、CSSの基礎
今回は、今後を踏まえた学習の進め方と、HTML、CSSについての細かい活用方法について伺いながら課題に挑戦することができました。
授業では４章の課題１まで学習を進めました。第２回に向けて、下記の課題に取り組みます。
第３章の課題（中級）
作成の際、以下の要件は必ず満たすようにしてください。要件以外の文字の大きさや配色などは自由です。
- CSSは外部読み込みにする
- 見出しの上下境界線を点線（破線ではない）にする
- 見出しの文字は半角の「<」と「>」で囲い、中央寄せにする
- リンクの文字色の色を変える（サンプルではオレンジ）にする
- 赤い字の部分はspanで囲い、文字のサイズを18pxにする
- リストの点を丸ではなく四角にする
第４章の課題２
注意すべき点は以下となります。
- 全ての要素はブラウザ左端から表示する
- 各検索エンジンへのリンクは、背景色の付いた範囲どこからでもクリックできる
- 各リンクの文字は中央に表示する
- 各リンクは上下に余白をあける
- 各リンクに箇条書きのマーカー(黒丸)を表示しない
色や文字の大きさについては自由で、サンプルと全く同じにする必要はありません。教科書では教えていないプロパティを利用する課題もあるようなので、ネットで調べながら課題に挑戦します。
CodeCamp（コードキャンプ）の「Webマスターコース」とは
CodeCamp（コードキャンプ）の「Webマスターコース」は、プログラミング未経験からWebサイト制作のための必要スキルを習得するためのコースです。
＞＞無料体験レッスン受講で10,000円OFFクーポンプレゼントキャンペーン実施中
CodeCamp（コードキャンプ）「Webマスターコース」の料金
| ２ヶ月 |
|
| ４ヶ月 |
|
| ６ヶ月 |
|
CodeCamp（コードキャンプ）では常時７種類の講義を展開しています。その中でも、私はWebサービスの開発をしてみたいと思い、HTML、CSS、JavaScript、そしてPHPを学習する「Webマスターコース」を受講することにしました。およそ２ヶ月でどこまで学習できるのか、とても楽しみです。