タイでのしごと

【Progate】30代プログラミング初心者の私がつまづいたところ【まとめ】

2018年7月下旬からプログラミング学習を始めたマッコ(@harishimacco)です。

私は現在Progateという無料で使えるプログラミング学習サイトで勉強しています。

 

ちなみに私のプログラミングスキルは「ワードプレスのカスタマイズは全部コピペでやっている」レベルで、自力でのタグ打ちは一切出来ないレベルです。

 

このページでは、[keikou]Progateを使ってプログラミング学習していく中で初心者の私がつまづいた箇所を備忘録も兼ねてまとめています。[/keikou]

 

Progate、あれだけ丁寧に教えてくれるけど、たまに説明が足りないところがある。

「こうやってね」は教えてくれるけど「それはダメ」っていうのが抜けているときがあって、悶絶するときがある。

私よりあとにProgate学習を始めた方の「ぐぬぬぬ」を少しでも減らすお手伝いができたらうれしいです。

※随時更新していきます!

 

【まえがき】Progateってなに?なんでプログラミングを勉強してるの?

もうすでにProgateを始めている方はここは飛ばしてもらっていいです。

 

[keikou]Progate(プロゲート)はプログラミングを勉強できるインターネットサイトです。[/keikou]

アカウントを作ることで自分の進捗具合が自動で保存されるので、空いた時間にちょこちょこ独学でプログラミング学習することができます。

 

Progateのすごいところは[keikou]わかりやすさ[/keikou]もだけどなんと[keikou]無料で使えてしまう[/keikou]こと。

「HTML初級編」「Ruby基礎編」など、基礎レベルの17レッスンを無料で学習できます。

 

有料会員もあるけど月980円だし、もし学習を進めるとしても色々な本買うより安いと思う。

私も基礎コース終わったら多分有料会員になりますね。

 

「プログラミングって何したらいいんだろう?」という私のようなド素人でも、

 

  1. Progateのサイトに行って
  2. アカウント登録して(持っていたら[keikou]Twitterアカウントがオススメ[/keikou]※後述します)
  3. なんとなく指示に従ってやっていくと
  4. いつのまにかレベルアップしていって
  5. いつのまにかハマっている

 

というまさにトントン拍子で「あ、いつのまにかプログラミング学習始まってた」って感じなので、少しでも興味があったらやってみるといいと思います。

>>Progateをやってみる

Progateは無料で使えるし、ゲーム感覚でレベルアップしながら楽しんで続けられるのが特徴です。

 

また、一方的に読み進めたり動画をみたりするだけではなく、2,3枚スライドで説明を受けた後に実際に自分でコードを書いてみる「実践型」なので、なんとなく理解してわかった気になるというのを防ぐことができます。

 

それと…これは個人的な予感なんですが、

[keikou]きっとこれからの時代プログラミング知識がある人とない人で二極化する気がする。。。[/keikou]

 

2020年から小学生もプログラミングが必修になるみたいだし、もうすでにプログラミングやっている子供たちもいるし。

 

[keikou]いまの時代、iPhone使えないって人がいたら正直終わってるなと思いますよね?[/keikou]

これから10年先、プログラミングはそういう立ち位置になっていくと勝手に私は思っています。



【HTML初級コース】

メインのレイアウト|ブロック要素・インライン要素

HTML初級編も結構やり進めてきたあたりかと思います。

私がつまづいたのは「メイン」のブロック要素・インライン要素で、

「クラス名の中にh1とh2タグがあり、それぞれにフォントサイズを指定したい場合はどうしたらいいの?」

っていうところです。

スタイルシートで[keikou]クラス名[/keikou](ここでは[keikou].copy-container[/keikou]とします)を指定して、font-size:14px;と書けばクラス名の中にある文字サイズは14pxになりますよね。

ここまでは簡単にできます。

.copy-container{

font-size:14px;

}

でOKでしたよね。

しかしながら今回は、同じクラス名の中で更にh1は140pxで、h2タグは60pxにしてねって細かくフォントサイズ指定をしてきている。。。

これまでクラス名全体のフォントサイズ指定やカラーを指定はしてきたけど、[keikou]フォントサイズをタグ毎に変えるっていうのはやってない[/keikou]ハズなのですが。。。

 

実際に困った指示はこれ

  • クラス名【.copy-container】のh1タグをfont-size140pxにしてください
  • クラス名【.copy-container】のh2タグをfont-size60pxにしてください

何に困ったのか

  • h1タグ、h2タグをそのまま指定するだけでよいのか
  • 同じクラス名【.copy-container】なのだから、これまで学習したcolorやfloat指定の時のようにまとめて指定できるのか

 

正解

  • クラス名を指定せずh1、h2タグへ指定すると全部のh1h2タグに適応されてしまうので、違う。

※必ずクラス名を入れて、クラス名の中のh1h2タグに支持をかけるようにする。

 

  • CSSでは、同一クラス内で同一プロパティを細かく指定する場合はクラス名で一括でまとめることはできない

正解のタグ

[keikou].copy-container h1[/keikou] {
font-size: 140px;
}

[keikou].copy-container h2[/keikou] {
font-size: 60px;
}

このように少し面倒だけど[keikou]都度【クラス名+h1のフォントサイズはこうしてね】とか、【クラス名+h2のフォントサイズはこうだよ】というように細かく指定しなければならない。[/keikou]

 

ちなみにこういう風にクラス名でまとめるのは間違い。CSSではできない。

[keikou].copy-container[/keikou]{

h1 {
font-size: 140px;

h2 {
font-size: 60px;

}}

どうしてつまづいたのか

プロパティ(colorとかfontsizeの部分)が違うものはクラス名でまとめても大丈夫だったので、同じようにできるのかと思った☞出来ません

こんな感じでプロパティが違えばクラス名でまとめることは可能

.header-logo {
[keikou]float[/keikou]: left;
[keikou]font-size[/keikou]: 36px;
[keikou]padding[/keikou]: 20px 40px;
}

ちなみにこのヒントはTwitterで@harv_techさんが教えてくれました。

 

同じ場所でつまづいている人がいて解決策になったらうれしいです。

プログラミングで転職や副業を考えている人へ

ちなみに、Twitterでも「」や「 」 のハッシュタグを入れてつまづいてる箇所をツイートすると、もしかしたら誰か答えをくれるかもしれません。

だからProgateやるならTwitterアカウントで始めるのがオススメです。

 

また、[keikou]もしあなたが独学のプログラミングに限界を感じている[/keikou]のなら、[keikou]プログラミングスクールで先生から教えてもらう[/keikou]のも時間を有効に使うひとつの方法です。

 

普通プログラミングは20代が活躍しているのですが、ここ「TECH::EXPERT」なら[keikou]30代でも未経験からプログラミングで転職できる[/keikou]ほどのスキルを学ぶことができます。

 

[keikou]今後プログラミング業界への転職[/keikou]を考えていたり、転職しないまでも[keikou]副業としてプログラミングで稼いでいきたいというやる気のある方[/keikou]は無料相談があるので、まずは話を聞いてみてもいいかもしれません。

 

TECH::CAMPの即戦力エンジニア養成プログラム【TECH::EXPERT】

 

転職できなければ全額返金て、すごいな。