ウェブカツ でプログラミング勉強始めて一ヶ月！つまづいた私が伝えたいこと
こんにちは。
こゆびです。
ウェブカツ で、プログラミングの学習を始めて約1ヶ月が経過しました。
実は、ウェブカツ ではPHP部の途中でつまづいてしまい、しばらくウェブカツ を触れていない日々があったりしました。。。
そもそも、javascriptやjQueryも満足にできていない。
このまま、よくわからないままPHPに進んでも、自分の中で混乱するだけ！と思い、自分を正当化しつつ（苦笑）、jsなどの知識を深める勉強をしていました。
（プログラミングとか、WEBデザインとかはやっぱりなんか好きなので、それを全くやらなくなることはなかったのですが）
まあ、でもお金はかかってるんだし、動画を見るだけでもすすめてみよう、、と思って、10日ぶりくらいにウェブカツ に登校。
PHP部で詰まっていた、制作部分に取り組んでみました。
すると、、、
前はどうしてもうまく行かずに、説明を聞いてもよく分からなかった箇所が、割とするっとうまく行くように。
動画の説明も100%理解して、再現できるというところまでは到達はしていないものの、前は暗号に思えたコードの羅列に一つずつ、意味が見えてきました。
この勢いだ！と思って、PHP部を完了、その次のネットワーク・サーバー部もその勢いで完了し、ついにWEBサービス部に入ることができました！
実際に、WEBサービス部をすすめているのですが、一つのサービスを作ることができる！ということで結構ワクワクします。
そこで、ウェブカツ をはじめようかな、と思っているみなさんに私から伝えたいことは、３つ。
１、とりあえず分からなくてもWEBサービス部までは進め！
２、一回休んで見えてくるものもある。
３、ウェブカツ のslackコミュニティを活用せよ！
１と２は少し矛盾しているかもしれませんが、プログラミングをゼロから学習しようとすると、絶対にわけの分からないエラーや、コードに悩まされる日がやってくると思います。
そういった時には、私のように一回離れて見るのもありかと（10日は長すぎたかも笑）。
でもその期間に、私はjsなどを勉強していたおかげで、構文なんかはすんなりと理解できるようになったと思います。
あと、ウェブカツ で勉強するなら、WEBサービス部までは絶対にいってください。
実際に自分の手でサービスを作れるって、楽しそうじゃないですか！？
（ウェブカツ の先輩方は結構苦しんでいるようなので、これからどんだけ内容が難しくなるか、コワイですが笑）
最後に「３、ウェブカツ のslackコミュニティを活用せよ！」については、
たまたま、slack上で近くに住んでいると知った同じく女性割引で、参加している方とお知り合いになり、刺激になったという経験からです。
もちろん、slackだけではなくTwitter上にもたくさん仲間はいるので、刺激になります。
それでは、引き続き、ゆるく私らしくすすめていきたいと思います！
こゆび
それでも、ウェブカツ のslackで出会って、たまたま近くに住んでいた方とお会いしたことで、「やっぱりやってみよう！」という気持ちになるなど、励まされる部分も多く、
超初心者がウェブカツでプログラミング独学初めてみた【10日たったので進捗報告する】
こんにちは。こゆびです。
プログラミングを勉強しようと思い、
ウェブカツを受講し始めて１０日ちょっとたったので、学んだことや感想などを書いていきます。
目次
-
まず始めにウェブカツとは
-
10日間の進捗
-
学んだこと
-
感想
まず始めにウェブカツとは
簡単に言うと、オンラインでプログラミングを勉強できる教材のようなもの。
学べるプログラミング言語はHTML、CSS、javascript、Jquery、PHPなど。
そのほかにWordpressやネットワークサーバー、あとは起業部や営業部など、ちょっと変わったものまであります。
「・・・部？」って思った方もいらっしゃるかもしれませんが、ウェブカツでは、それぞれの言語学習が部活としてまとまっており、入門・中級・上級などに分かれているものもあります。
内容としては一つの部活の中に15分くらいの動画が10~20個程度あって、それを見ながら実際に手を動かしてやってみるといった感じ。
順番は飛ばせないようになっていて、指定された順番で学習を進めていくのが基本です。
料金は基本が49,800円／月。
私は女性割引を適用してもらっているので、19,800円／月。
女性割引が効くと結構おトクかなと思います。
10日間の進捗
・HTML・CSS入門
・javascript・jQuery入門
まで終わりました！
これまでのトータルの勉強時間は37時間です。
学んだこと
まず、自分のPCで開発環境が整えられたのはすごく大きいと思います。
これまではProgateのブラウザに表示されるやつで満足していたので（笑）
サーバーサイド言語に触れたのも今回が初めてなので、データベースとかにさわれたのも勉強になりました。
感想
たった10日ですが、やってみた正直な感想は、
ウェブカツだけじゃ絶対わからんw
ってことです。笑
いい意味でも悪い意味でも。
もちろん、理解力の高い人であればそんなことはないかと思いますが、私の場合は、ついていけなくなることがしばしばありました。
イメージは偏差値高めの高校の授業（笑）
なので授業について行く為に、自分で他の学習方法を探し、授業以外でも自主学習をすると行った感じですね。私は、ドットインストールやProgateなどを活用しています。他にも、サイトの模写をしてみたり、できる方法で勉強を進めています。
そうすることで、ウェブカツを軸に、学習習慣が身につくのかなあと思ったりしています。
とにかく、たった10日間ですが、ウェブカツを活用してプログラミングを学習してみて、
プログラミングを学習する姿勢
が整ったと思います。
PC上でも、自分のマインドや習慣の面でも。
気になる人は、無料で受講もできるので、ぜひ見てみてください。
【DAY1】ウェブカツ！HTML&CSS部 入門
こんにちは。こゆびです。
今日からウェブカツでの学習を開始しました。
HTML＆CSS部 入門です！
HTMLとCSSについては、これまでProgateで何度か道場もやっていたので、
タグの書き方だったり、属性についてはなんとなくわかっていたつもりでした。
でもこれは、Progateの最大の弱点だと思うのですが、書き方がわかったところで、
実際にどうやってHP作るの？ってなるんですよね。。（超初心者）
そこをウェブカツは、コードエディターから教えてくれ、
ブラウザ上ではない環境で開発（といえるのかはまだよく分からない）が
できるので、色々納得感がありました。
HTML＆CSS部 入門は、全部で１９レッスンあるのですが、
実はまだ仮部員状態なのでできるのはレッスン１５まで。
動画を見ながら手を動かして、かかった時間は３時間半くらいでした。
▼新しく学んだ内容をメモしていくよ
（あくまでも備忘録ですが、いや違う！！！ってところがあればご教示ください）
<img>タグ<a>タグなどで画像やURLなどを挿入するときは、
スラッシュをつけることで場所指定できる
<img src=“link/img.jpg”>
<a href="link/index.html"></a>
みたいなかんじ。
表を作るときは<table>タグを使う
枠線の太さはborder属性を指定するよ
<table border=“1”> </table>
行はtrタグ、列はtdタグを使うよ
<tr> <td>中身①</td><td>中身②</td> </tr> ←１行目
<tr> <td>中身③</td><td>中身④</td> </tr> ←２行め
行／列の結合には colspan属性／rowspan属性を使うよ
●行を横に繋げたいとき
<td colspan=“2”>中身</td> ※属性の値は結合する行数
●列を縦に繋げたいとき
<tr rowspan=“2”>中身</tr> ※属性の値は結合する列数
リストを作成するには<ul>タグと<li>タグ！
<ul>
<li></li>
</ul>
・ホームページのメニューを作るときによく使う！
・<p>タグを使っても見た目は変わらないが、PCでの処理が違ってくる
改行は<br>タグ！
<br>
・終タグなし
・インライン要素
フォームは<input>タグとtype属性でいろんなのが作れる
<form></form>フォームタグの中に表示させたいフォームを作る
<input>タグを使いtype属性を指定することで
・テキストフォーム
・✔︎ボックス
などを作ることができる
※<input>は終タグ必要なし
●テキストフォームを作りたいとき
type属性に”text”を入れることでテキストフォームを作れる
<input type=“text”>
●送信ボタンを作りたいとき
type属性に”submit”を入れることで、送信ボタンを作れる
<input type=“submit”>
●チェックボックスを作りたいとき
type属性に”checkbox”を入れることで、✔︎ボックスを作ることができる
<input type=“checkbox”>
●ラジオボタンを作りたいとき
type属性に”radio”を入れることで、ラジオボタン（複数選択不可のフォーム）を作ることができる
<input type=“radio”>
【注意事項】
・name属性をつけることで、それぞれのフォームに名前をつけることができ、
フォームがひとつのグループであることを指定できる。
ラジオボタンで同じnameを指定しなかった場合、別グループになってしまい、
グループごとに選択可能となってしまう
・value属性をつけることでフォームに値を持たせることができる
●セレクトボックスを作りたいとき
<select>タグと<option>タグを使う
<select><option></option></select>
●コメント欄を作りたいとき
<textarea>タグを使う
<textarea></textarea>
-------------------------------------------------------------------------------
・<textarea cols=“50”>cols属性を指定することでコメント欄の横幅
<textarea rows=“3”>rows属性を指定することでコメント欄の縦幅
をそれぞれ指定可能
・<textarea></textarea>の中に文字を入れていると、
コメント欄最初からその文字が表示された状態になる
-------------------------------------------------------------------------------
p {color :blue;}の場合
p=セレクタ ーどの部分にスタイルを適用するのか
color= プロパティ名 どういったスタイルを指定するのか
:blue;=値 ーどのようなスタイル
id属性とclass属性
●id属性とは
どのタグにもつけることができる
タグに名前を指定できる
ひとつのhtmlファイルの中にひとつだけ存在する
CSSでは[＃]をつけて指定する
●class属性とは
どのタグにもつけることができる
タグに名前を指定できる
CSSでは[.]をつけて指定する
→id属性、class属性ともに名前を指定することで
CSSのシートのスタイルを適用させることができる
セレクタの主な指定方法
どれにスタイルを指定するのか？を指定する方法は主にこんなかんじ
- *{color:red;} 全要素に適用
- p{color:red;} 指定X要素に適用
- #title{color:red;} 指定id属性名のついた要素に適用
- .burtton{color:red;} 指定class属性名のついた要素に適用
- p a{color:red;} 要素Xの中にあるY要素に適用
- p > a{color:red;} 要素Xの直下にあるY要素に適用
- p.button{color:red;} 指定のクラス名がついた要素Xに適用
- p#titel{color:red;} 指定id属性名がついた要素Xに適用
- a:hover{color:red;} 要素Xの上にマウスが載ったときに適用
スタイルの適用優先順位
上から優先順位が高い順に並べたよ
① CSSファイルで!importantをつける
p {color:red !important;}
②HTMLファイルでstyle属性で直接指定する
<p style=“color:red;”>”これです</p>
③CSSファイルでid属性を指定
p #title {color:red;}
④CSSファイルclass属性を指定
p.class {color:red;}
⑤書いた順番（一番最後に書いたスタイルが適用される）
p {color:red;}
P{color:blue;}
ブロックレベル要素とインライン要素
①ブロックレベル要素
・一行全て（横幅いっぱい）のボックスになるので、
その後の要素は横並びにはできない
・ブロックレベル要素の中にブロックレベル要素を入れることができる
<p><h1>~<h6><ul><table><form><div>など
②インライン要素
・基本、文字の装飾などで使われる要素
・文字幅分のボックスになるので、横並びにすることができる
・インライン要素の中にブロックレベル要素は入れることができない
<a><input><br><span>など
marginとpadding
・要素（＝ボックス）の周囲の余白を指定できるもの
・ボックスには境界がある
padding：文字と境界の間の余白を指定
margin：境界の外側の余白を指定
・要素を並べるときや境界線（border）を表示するとき、
背景色を表示するときにmarginかpaddingかで違いが出てくる
・インライン要素の場合上下のmarginが指定できない
→上下の余白を指定したい場合は、CSSでインライン要素を
ブロックレベル要素に変える必要がある
CSSファイルの単位の指定
①大きさを指定
・px { font-size: 18px; width: 1028px;} →画面の解像度によって表示サイズが変わる
・％ { width: 100%} →画面のサイズによって表示サイズが変わる
②色の指定
・色名 p{ color: red;} →凝った色に使うことは難しい
・#rrggbb p{ color: #333333;}
・#rgb p{ color: #333;}
・rgba p{ color: rgba(0,0,0,0.5)} →aは透明度（0~1）
positionとfloat
ボックスの配置方法を指定できるもの
●position
①position:static;
→デフォルト
②position:absolute;
top:100px;（上から100pxのところに重なって表示される）
・指定されていないブロックの上に指定されたブロックのシートが
重なるイメージ（その場合指定されていないブロック要素は詰めて表示される）
③position:relative;
top:100px;（上から100pxのところに重なって表示される）
・指定されていないブロックの上に指定されたブロックのシートが
重なるイメージ（その場合指定されていないブロック要素は
そのままの場所で表示される）
④position: fixed;
top:100px;
・スクロールしてもずっと画面から消えない
・absoluteと同じく指定されていないブロックの上に指定された
ブロックのシートが重なるイメージ
（その場合指定されていないブロック要素は詰めて表示される）
●float
p{float:left;} leftまたはrightを指定することができる
・ブロックレベル要素(本来は縦に並ぶもの)であっても、
ボックスの横幅が収まれば横に並べて表示することができる
今日のところはこんなかんじでした。
まだまだ次のレッスンが楽しみです。
こゆび
