CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|5日目

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

井旗丈
関東の大学に通っています。

これから就職した際など、webデザインやエンジニアとしての知識を身に付けたいと思いCodeCamp(コードキャンプ)で必死に勉強中。

オンラインプログラミングスクールでどれだけ力がつき、どのような成果物を作れるようになるのか、日々ワクワクしながらプログラミングの勉強をしています。

私が受けているコースは「プレミアムコース」。HTML/CSSからJavascript、PHP/MySQL、Photoshop、Illustratorまで、Codecamp(コードキャンプ)で用意されているすべての言語やスキルを自由に組み合わせて自分だけのカリキュラムを組める贅沢なコースです。

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

それでは、2018年12月3日に受講した、Codecamp(コードキャンプ)「プレミアムコース」第5回目の学習内容をレビューします

プレミアムコース5日目|CodeCamp(コードキャンプ)

本日の講師:高橋 翔 先生

こんにちは! 今年でエンジニアとしての経験は5年となります。大手企業での社内SEとして勤務を経て、昨年起業いたしました。Androidアプリ開発やWebアプリ開発を主に行っています。

また、家庭教師や個別指導塾での指導経験もあり、「自分で考えて、学んでいく。」ことをサポートするのに自信があります。

優しく、丁寧に教えることを心がけております。

趣味はバスケットボールとゲームです。最近はよくスプラトゥーンをやっています!

大学時代にゲームAIについて、学習していた経験もあり、機械学習やAIについての講座も担当可能です。 Pythonを使用しますので、どの言語でもいいので、予約を入れて頂ければ、ご対応いたします。

はじめての場合は、メッセージでその旨お伝えいただけるとスムーズです。

それでは、どうぞよろしくお願いします。

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

井旗丈
HTMLとCSSの教科書は、全部で9章あるなか、事前にこのレッスンの前に8章まで自力で進めておき、途中でつまづいた課題を中心にHTMLとCSSの要諦を掴もうと考え今回のレッスンを受講しました。

他社のオンラインプログラミング学習ツールを勉強していたおかげで、多少わからないところがあっても、何とかGoogleで検索しながら課題を解くことができています。

そんな中、やはりつまづいたのが、以前理解をうやむやにしていた「ブロック、インライン要素」と「floatプロパティ」です。さて、それでは本日のレッスン内容について詳しく以下の2つをご紹介させていただきます。

CodeCamp(コードキャンプ)プレミアムコース第5回目のレッスン内容

  1. 検証ツールを使いこなすこと

  2. CSSはブロックレベル要素とインライン要素をしっかり考えながら書く。

1.検証ツールを使いこなすこと

皆さんは、HTMLやCSS、JavaScriptなどをウェブに公開し、微調整をしながらコードを編集するとき、どのような方法で行なっていますか?

CodeCampの勉強では、エディタツールを使って書いたコードは実はウェブ上に公開されているので、実際にURLをGoogleなどの検索ツールで入力するとちゃんと表示されます。

ウェブ上に公開されているHTMLやCSSのプログラムの編集は、いちいち自分の開発環境で更新しながらウェブに反映するのではとても非効率で、便利な「検証ツール」を使って微調整しながら正しいコードに書き換えたり、より良い数値に直していくのがとても楽で便利です!(私はちなみに、検証ツールはちょっとしか使っていませんでした。とても非効率。)

検証ツールは、Googleであればウェブサイト上で右クリックの動作を行うと「検証」という欄が出てくるので、それを押すと使うことができます。

このような画面に切り替わります。

もしかしたら、何かウェブ上の文章をコピーしようとして、この画面に似た画面に切り替わった経験のある方もいらっしゃると思います。

画像を見ていただくと、左側にウェブページ、右側にHTMLで書いたコードと、それに付随しているCSSのコードが見えると思います。

この画面で、CSSを変更したり、HTMLを編集したりすることができ、即座にウェブページに模擬的に反映させることができる優れたツールです。

「ここの文字色を変えたらどんな印象になるかな?」
「ここの文字の大きさもう少し大きくしてみたいな。」
「あれ、なんかCSSがおかしい、検証ツールでどこに適用されているかみてみよう。」

など、ちょっとした「検証」ができるツールです。

検証を通して出来上がったコードは、そのままデータにコピペしちゃえばすぐにウェブにも反映することができます。とっても便利。

ちなみに今回私が課題をやっていてつまづいたブロックレベル要素とインライン要素の課題も、この検証ツールで一個一個CSSがどうなっているのかみていき丁寧に編集したら難なく課題をクリアすることができました。

これからHTMLやCSSを勉強される皆さん、今勉強しているけど検証ツール使ったことない皆さん、是非使ってみてください!

2.CSSはブロックレベル要素とインライン要素をしっかり考えながら書く。

上に示している画像のページは、Google、Yahoo!JAPAN、bingへのリンクをリスト要素でそれぞれ並べています。

背景にある箱を、どのリンクでも同じ幅と高さに変えたかったのですが、なかなかできずにいました。

先生に、今まで試したことを説明して、それでもダメだったのでちょっとヒントください、というと第一声でおっしゃったヒントが「検証ツール使ってどこにCSSが適用されているのかみてみてください」でした。でたな検証ツール。では実際にみてみよう。

みてみると、いらないpaddingがあったり、marginがあったりと、自分が思い描いていたところにうまくCSSを適用させることができていないところが多かったです。

paddingやmarginを然るべきところに指定しても、まだテキストが左寄りになったまま動かない現象が続きます。
「text-align: center;」を指定しているのになんでだろう、と思ったら。

ここで必要な考え方が、その要素はボックスライン要素か、インライン要素なのか、ということです。

私がGoogleやYahoo!のリンクをウェブに表示させるときに使っていた要素は<a>、つまり、インライン要素でした。インライン要素には、一部適応されないCSSがあり、text-alignもまたそのうちの1つです。

対策として使うのは「display: block;」ですね。

このインライン要素をブロック要素とみなしてください、という命令で、これを宣言すると適用されなかったCSSも適用されるようになります。

最終的に、このように出来上がりました!

しっかり文字をセンター寄りにでき、背景のボックスの幅も揃っています。

CSSはブロックレベル要素とインライン要素をしっかり考えながら書かないと、もしCSSが適用されなかったりした時に、後からどこを編集すればいいかわからなくなったりするので注意が必要です。

プレミアムコース5日目の感想|CodeCamp(コードキャンプ)

5回目のレッスンが終わりました。

久しぶりにHTMLとCSSを書きましたが、まだまだ勉強不足だな、と感じる部分が多かったです。特にブロックライン要素とインライン要素の話は、ウェブページを作るに当たっては必須の知識となるので、絶対に覚えたいと思います。また、検証ツールの利便性もとても感じられたので、HTMLとCSSを編集するときは積極的に使って、効率よくページの作成ができるようになりたいと思います。

オンラインでプログラミングの学習をすることに対して、不安を感じてらっしゃる方などいらっしゃるかと思いますが、私は今の所不自由なく学習することができていいます。またオンラインの特徴としてとてもフレキシブルにレッスンを受けられ、難なく学習を進められることかと思います。

この記事や無料体験レッスンを通じて、より多くの方が勉強のイメージを膨らませ、エンジニアとしての大事な一歩を踏み出す一助となりましたら幸いです。

CodeCamp(コードキャンプ)の「プレミアムコース」とは

CodeCamp(コードキャンプ)の「プレミアムコース」は、CodeCamp(コードキャンプ)で学習できるすべての言語を選べるコースです。学習の方法(どの言語をどれだけ学ぶのか)についても自分で決められることもあり、複数コースを受講するよりも断然お得な価格設定となっています。

CodeCamp(コードキャンプ)「プレミアムコース」の料金

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

CodeCamp(コードキャンプ)のプレミアムコースレビュー・感想|記事一覧

LINE@無料相談

無料で相談する

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