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

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

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

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

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

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

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

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

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

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

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

本日の講師：勝田　郁郎（かつたいくお）先生
普段はSOHOにてWEB系、ソーシャルゲーム関連の開発を行っております。
実務に基づいた使えるスキルを丁寧に解りやすくお伝えいたします。

現在学んでいる箇所では無い箇所の質問も、是非して下さい。
どんな質問を何度して頂いても構いません。
理解し、使いこなせるようになるまで、お手伝いさせて頂きます。
いっしょに頑張りましょう。

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

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

１. 課題２の答え合わせ

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

第４章の課題２

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

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

しかし、私ひとりの力でできたのは、下記画像のHTMLのみ……。「CSSって、どうやって書くんだっけ？」という初歩的なところでつまづいてしまいました。

第４章課題に取り組んだ様子

はじめまして。第２回目の講義ですが、まだ第４章の課題を完成させられていないんです……。

はじめまして！　第２回目の講義ですね。よろしくお願いします。

今回は、第４章の課題を一緒に解いて行きましょう！

２. 第４章の課題２に再挑戦（「検証」の使い方）

まずは、現状できているものと、課題を見比べてみましょう。

どの要素を変える必要があると思いますか？

右：課題の完成形　左：現状の成果

まずは、見出しの”<h1>要素”に下線を加えたいです。次に、”<li>要素”でリスト表示させたままなので、枠で囲みたいですね。

後は、”<a>要素”の範囲を変更でしょうか。課題には「各検索エンジンへのリンクは、背景色の付いた範囲どこからでもクリックできる」ようにするとありました。

わかりました！まずは、今挙げた”<h1>要素”、”<li>要素”、そして”<a>要素”それぞれをこんな風に書いてみましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

できました！

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

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

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

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

授業では４章の課題１を終えることができたので、第３回に向けて、下記の課題に取り組みます。

第４章　課題（中級）

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

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

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

今回はCSSを効率的に入力する方法を学びました。検証画面を介して入力することで、スペルミスが減ることはもちろん、「他にもこんなにコードがあったんだ！」と表現方法の種類をたくさん知れたのが大変興味深かったです。

今後は、普段活用するSNSやウェブサイトでも、検証画面で「どんな風にコードを書いているのか」を見てみようと思います。

CodeCampの無料体験を申し込む

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

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

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

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

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

CodeCampの無料体験を申し込む