テックキャンプ ０日目
時間ができたので、テックキャンプに入ってからのことをまとめていきたいと思います。参考になれば。
まず、テックキャンプは当日からでないと、カリキュラムが閲覧できません。そらそうか。 気持ち的には、すぐにでも始めたい。高額なお金払ってるし・・・ 閲覧できないのであれば仕方ない。あきらめましょう。w
私は通学プランを申し込みましたが、初日は在宅での受講とのこと！
ここはきちんと確認しないといけないですね。
まだ始まらないので、Progateを学習して1日を過ごしていました。
テックキャンプを終えて 感想
6月7日から学習し、8月13日までの10週間。
朝は、9時40分には教室に行き、10時から19時まで学習。帰宅後23時頃まで学習！
土日も合わせて、一日約１０時間の学習。700時間を使ってプログラミング学習を行なってきました。
テックキャンプに行く前は、自己学習である程度まで学習していましたが、やはり実践していくとエラーにつまる・・・
おまけに、専門用語書かれてもなんのこっちゃ分からず、ネット検索しながらの学習で、時間を使う・・・
私には時間があったので、テックキャンプを選んで学習を始めた訳ですが、この10週間。
辛かった・・・
本当に辛かった。
でも、最終的には、楽しかった！！ プログラミングは面白い！！
初学者でも分かるようになっているカリキュラムだったので、学習自体は苦ではないのですが、期限が迫ってくる！
やることがどんどん出てくる！！
先の見えない出口に向かって、一人で突っ走るわけで。
自信もないし、やってることが正解なのかも分からない。
この部分は本当に辛かったです。
一時期、本当に嫌になりました。
ただ、同期メンバーとアウトプットの時間と言いつつも、現状報告会をしてました。みんなが同じ状況に置かれていることが分かるし、励まし合えたのは本当に力強かった。
みんな意見が違うので、このメンバーでチーム制作したら面白かっただろうな！と思う。やってみたかったーーー
そして、メンターさんには自分の意見を話し、アウトプットすることでカリキュラム外のことも話してもらえて勉強になったし、
ライフコーチには声をかけてもらえて勇気をもらえました。
卒業後は、キャリアサポートさんが親身になってくれ、１ヶ月の就活で就職先を見つけることができました。
就活期間を含め、6月から10月の４ヶ月(家の都合で１ヶ月の間就活してないから３ヶ月かな・・・？)。
本当に、人間関係って大事だなって改めて感じることができました。
「縁」っていうやつですね。
今は、自己学習を行なっています。テックキャンプと言語は違いますが、基礎を学べたおかげで、スムーズに学習できています。
やってよかったと心から思います。
就活が終わったので、正式に修了となるそうです。
なんだか、寂しい今日この頃です。
今後、テックキャンプでのこと。 就活での参考になることをまとめて行きます。
今から動き出そうとする方の参考になれば・・・
ブログって・・・
色んな人にプログラミングの楽しさを知ってもらえるよなエンジニアになるべく、始めたこのブログ。
自分にとっても、インプットしてきた学習内容を噛み砕きながらアウトプットすることで自分のものにしようと取り組んでいます。
先日投稿した内容を弟に見てもらい感想をもらいました・・・
ブログ更新してみたんだけど、見て理解できるか教えて！！
弟）文面自体は読みやすいけど、 全く知識がない人にはちんぷんかんぷん
・・・・・
やっぱりそうだよね・・・
いろいろ、探してみると、工夫されている方がたくさんいるんだなぁと感じました。
ブログ収益されている方なんて、努力がすごい！！
私、まだまだや・・・恥
過去に上げた簡単アウトプットシリーズ、頑張ってわかりやすくお伝えできるよう、改善して行こうと思います。
簡単アウトプッット- CSS・要素の配置について ３-
今回のアウトプットは前回のdisplayプロパティの「display:flex;」を使用して要素を任意の位置に配置する方法です。
Flexbox:任意の位置に要素を配置する方法
- 親要素に「display:flex;」を付与する
- 子要素は横並びになる
- その子要素らに並び順や、要素同士の幅など詳細に決められる
これが基本です。
さぁ、今日から実装しながら説明です。 わかりやすくをモットーにしていますが、うまくいくか・・・
<div class="box"> <div>One</div> <div>Two</div> <div>Three</div> </div>
まず積み木を上記のように準備しました。
HTMLのdiv要素は、文書に構造を付加するための汎用的なブロックレベル要素です。
要素自体は意味のない単純なブロックレベル要素のため、一般的にid属性やclass属性にスタイルシートを組み合わせることで特定の範囲にスタイルを設定する場合などに使用します。
難しい言葉で記述しましたが、、、
簡単にいうと、
積み木を用意しても、p要素やａ要素のように意味を持たせずにただ箱を用意したい時に使用します。
記述したコードは
- 「class」という名前（ class="box"）をつけた積み木
- 無名の積み木３つ（中身は「One」「Two」「Three」）
を用意したとイメージしてください。
これを図にしてわかりやすくするため、少しコードをいじります。
<! DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="stylesheet2.css"> <title>アウトプット</title> </head> <body> <div class="box"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> </div> </body> </html>
head要素を入れることでCSSを読み取ってくれるので付け加えています。
また、「One」「Two」「Three」たちもわかりやすくするため、class
で名前をつけました。
今までのアウトプットでもお伝えしていますが、基本的に左上に基準点があり、上から順番に配置されて、今回のdiv要素はブロックレベル要素のなので、横いっぱいに広がった積み木です。
さて、この「One」「Two」「Three」の部分を横並びにしたい。
CSSの実装やってみましょう。
基本１：親要素に「display:flex;」を付与する
再度コードを見てみましょう。
<div class="box"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> </div>
親要素・子要素は入れ子構造になっています。今回のコードを見てみると、class="box"が親要素、「One」「Two」「Three」たちが子要素で入れ子構造なのがわかります。
なので、基本１の考え方をclass="box"にCSSでスタイリングしていきます。
.box{ display: flex; }
これで、できているはず！！
さぁ、動かしてみましょう！！
横並びになったのがわかりますでしょうか？
これが
基本２：子要素は横並びになる
です。
また、もともと、親要素（class="box"）は、子要素が縦に並んでいたので中身の分まで縦に広がっていましたが、横並びにしたことで、縦幅が小さくなったことにも注目してくださいね！！
長くなってしまった・・・
基本１と２だけなのに・・・
今日はここまでにします。
基本３は新たなプロパティ登場です！！乞うご期待！？
簡単アウトプット- CSS・要素の配置について ２ -
要素の配置について、まず必要なプロパティは
displayプロパティ
| display : block; | 指定された要素は、ブロックレベル要素として表示 |
| display : inline; | 指定された要素は、インライン要素として表示 |
| display : inline-block; | 指定された要素は、並びはインライン要素、中身はブロックレベル要素として表示 |
| display : flex ; | 指定された要素は、子要素が横並びとなる |
| display : none ; | 指定された要素は、非表示となる |
ここで、以前アウトプットした
ブロック要素
インライン要素
- インラインブロック要素 （これは初出し！！）
が登場します。
そう。積み木の考え方です！！
参照：過去のアウトプット投稿より ayachuubuu.hatenablog.com
この、積み木の考え方を今一度思い出しながら、今後のアウトプットを見ていっていただくとイメージつきやすいと思います。
今回のdisplayプロパティは、
ブロックレベル要素をインライン要素に変更できたり、
逆にインライン要素をブロックレベル要素に変更できます。
そうすれば、大きな枠の中に積み木を当てはめるとき、隙間なく指定したところに埋め込んでいける！！そんなイメージ。
このプロパティで一番使用したのは、
display: flex;
これは、ほんと、オリジナルアプリの作成でたくさん使ったし、プログラミング教室でのテスト問題などで出ました。
覚えておくのは
- 親要素に使う
- 子要素が横並びになる
- このプロパティを使ってこそ、いろんな配置を指定できる！！
この3点。 ほんと大事です。
実装しながらのアウトプットはもう少し先！！しばしお待ちを！！！
簡単アウトプッット- CSS・要素の配置について １ -
今までの記事にて画面の考え方をお伝えしました。貼りましたので確認していただければと。
さて、この画面への要素の配置。今までもお伝えしましたが、
どこに
どんな大きさで
どんなふうに
と、指示を出してあげないと、同じ画面をパソコンやスマホ、タブレットでそれぞれ開いたとして、同じようにこちらが意図した画面を表示することはできません。
CSSはスタイリストなので、いろんな飾り付けをしてくれます。
プロパティでアニメーションもつけれるし、ぼかしまでしてくれます。
大きさも変えてくれます。
そして、配置まで指示してくれる！！！
なんて仕事熱心なんでしょう！！
この要素の配置について細かく・簡単にまとめていきます。
簡単アウトプット- CSS プロパティまとめ-
前回の続きです。
