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

無料でプログラミングを体験できます

下のリンクよりお申し込み頂けます。お申し込みから受講までオンラインで完結。開発環境は必要無し。パソコンとネット環境があればお試し可能です。

エンジニアと1対1のライブ講義を体験する 

1週間カリキュラムを体験する 

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 第4章の課題2の答え合わせ
  2. 第4章の課題2に再挑戦(「検証」の使い方)

1. 課題2の答え合わせ

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

第4章の課題2

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

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

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

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

渡辺彩香
はじめまして。第2回目の講義ですが、まだ第4章の課題を完成させられていないんです……。
勝田郁郎
はじめまして! 第2回目の講義ですね。よろしくお願いします。

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

2. 第4章の課題2に再挑戦(「検証」の使い方)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第4章 課題(中級)

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

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

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

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

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

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