現在プログラミングを勉強中でして、これまで学習サービス「Progate」と「ドットインストール」を利用してきました。
Progateで学習を開始して2か月利用し終了、その後ドットインストールに移ってきました。よくあるパターンですね。
ちなみにどちらも初めは無料で使えて、さらに深いところまで学習したい場合、およそ月額1000円で利用できます。
そのドットインストールを約3か月利用し、模写コーディングやポートフォリオ制作をしていて、利用することも少なくなり、9月をもって卒業しようと考えています。
ちなみに僕は現役のエンジニアではありません。エンジニア志望のまだまだな身分でして、偉そうなことは書けませんが、「ドットインストールを3か月利用するとこんなカンジです」をお届けしようと思い、この記事を書いています。
プログラミング学習をはじめようとドットインストールの利用を検討している方、すでに学習中の方、ドットインストールを過去使っていて「懐かしいな～」と言いたい方
そして、3か月前の自分に向けて書いてみたいと思っています。
レッスンの内容をメモ程度に挙げていきますので、この記事を読んだら、もうドットインストールをやらずに済むなんてことはありませんし、ドットインストールのコンテンツを侵害するつもりもありません。
特にProgateで出てこなかった部分について、書いている箇所が多いです。
✔HTML 基礎文法編
Progateをある程度やられた方なら、サクッといけるはずですが、
Blockquoteは使うのか → 引用や転載の際に使用
Codeをhtmlに写す「実態参照」という言葉は覚えておこう、< >など
nav,asideもまだ使ってないnavはbootstrapで → 模写コーディングやポートフォリオも制作していますが、asideはなかなか使う場面が出てこないです、navはbootstrapを使うとheaderでちょくちょく
HTML フォーム部品編は役にたつ radio, label ,color,dateなどその都度ググればよし
ドットインストールはかなり細かいところまで教えてくれるレッスンも多いですが、「その時ググればよし」がけっこうあります。全部暗記しようなんて考えなくて大丈夫ですが、
「こういうのもあるんだな～」に触れておくのは大切です。
<form action=”process.php” method=”post”>
<label>担当者名 <input type=”text” name=”username”></label>
<label>タスク <input type=”text” name=”task”></label>
<button>OK</button>
</form>
formを使った送信 htmlの書き方だけでも → 送信はphpで細かく学びます、getやpostというやつですね
✔CSS 基礎文法
Inherit 継承という考え方 bodyにborderつけてもbodyだけで中の要素にはつかない h1にborder: inherit;でh1にもborder
Vertical-align: ;はtokyo japanの中に日本国旗baselineがあってmiddleで真ん中に、2pxでbaselineから2px上に → これだけ書かれてもわからないですよね、
hslaって使うのかな？rgbaで表せない色はあるのか？ → 色の指定方法
list-style-image: url();もあるんだな～ → background-imageはProgateでもありましたよね
垂直方向で margin が重なると、小さいほうが打ち消されるという仕様がある → marginの相殺
display: inline; はサイズの変更できない → blockやinline-blockは重要なので改めて書いておこうと
初期値がstatic なので position: static;はいつ使うのか？ → relative,absoluteの兄弟
box-sizing: border-box;は便利 padding border を含めて width と heightになる最初からCSS全てに指定する書き方もあります
*, *::before, *::after { box-sizing: border-box; } → こういった書き方をします
calc()も使ったことない「そうだcalcを使おう」となかなかならない
background-size: cover;はprogateの最初でもおなじみ background-position: center;は画像の中心を起点に伸縮
float: right;で右に寄せた要素Aは通常の配置から外れ、その下の要素Bに無視され、Bが上に詰めえてくる。
Bにclear: right;を指定で「右にAがいるぞ、戻れ!」
A BA A
→ →
B B
clearはいまだにイメージしにくい…
✔CSSセレクター
前方一致[attr^=”value”], 後方一致[attr$=”value”], 前方一致[attr*=”value”]これもまだ使ったことない,
〇〇 :nth-child(数字) → 〇〇の数字番目の要素 たまに使います。二つ目以降にmargin-bottomを付けたいという場合,:not(:first-of-type)
:empty は空の要素を取得 → これも使う場面わからない
詳細度という考え方、!importantが最強 ただし乱用はしないように
✔CSSフレックスボックス
Flex: 1;の説明が雑です、幅をグッと伸ばすではわからない #09で「余った領域いっぱいまで伸ばす」という説明が出てくる
flex-directionはrowとcolumnそのreverseでイメージしやすい
justify-contentは主軸に沿ってどう揃える align-itemsは交差軸 使うたびにググるでいい
flex-wrapも 「CSS 折り返し」とかググればよし
orderは 便利かも 「-1」もできる
flex-grow,flex-shirinkは足りなかったら、余ったら どういう割合で分配するか
#08は「何言ってんだよww」ってカンジです 難し過ぎです、たまにあります…
flexboxでは先ほどのmarginの相殺は起きない
display: flex;としてjustify-content: center;とalign-items: center;で中央揃え、これはいいね
top:50%; left:50%; 左上が画面の真ん中に来ちゃうので、さらに要素の半分ずつ引くみたいなやり方でポートフォリオはやっていました、
#13からのヘッダー作成 具体例で使っていてわかりやすい
#16はcalc()も使って応用、自分で「ここはcalcだ!」となかなか思わないので、見ておきましょう
✔CSSアニメーション
7月に出た新しいレッスン、ドットインストールは今でも新しいレッスンがどんどん登場しています
イメージしにくいけど変化前にtransitionプロパティをつける
rotateとscrewの違いは？
何もつけずにrotateで図形の中心を起点に回転、変化前につけるtransform-originで起点を変更、top leftで左上が起点に
#6Chrome特有のバグ ページ読み込み時にtransitionが効いてしまうscriptタグを作って何か書けばよし、「これは有名なバグですね」がプログラミング学習ではたま～に聞かれます
動き出して止まる細かい設定です、ほとんどはeaseでよし
#9から難しくなる デベロッパーツールで細かな設定
#11からanimationプロパティ
@keyframes move {
0% {
Transform: none;
}
50% {
Transform: translateX(100px) rotate(360deg);
}
100%{
Transform: translateX(200px) rotate(360deg);
}
}
まずmoveをつくる
あとは変化させたい要素にanimation-name: move;とanimation-duration: 1s;
急にまるっと書きましたが、自分のためです
#16の ボタンふわっと表示はマストです。覚えておいた方がいいくらい
#17ローディングアイコンは「これぞプログラマーの考え方」必見です
borderでまず囲って、border-right-color: transparent;で右だけ透明、border-radiusを50%で右だけ欠けた「C」が完成 → この時点で「すご…」
@keyframsでspinを作る100%{ rotate(360deg)} infiniteでずっと、linerで等速、お見事!
#18#19#20ポップアップ @keyframs: popup;こういう作り方もあるんだなと
僕のポートフォリオでは画面外に極端に追い出してclassの付け外しで動かしていたから新鮮です
✔CSSレスポンシブ
これはもちろん大事ですが、「レスポンシブ」でググればたくさん情報出ます
モバイルファーストで作る、ってホントですかね？後から仕上げにレスポンシブだと思ってたけど
✔CSSグリッドレイアウト
Youtubeチャンネル「しまぶーのIT大学」にもあります(勝手にお名前使って、すみません)
そちらも非常にわかりやすい動画です、聖杯レイアウトという動画をチェック
#6からのrepeat()とかauto-fill、#7のauto-fitなどは動画でないとイメージしにくい
grid-column,grid-rowはうまくできていると思うけど、どういう状況で使うのだろう
#13grid-template-areas ここから直感的セクション
#14飛び石やL字では「全てが壊れてしまいます」なんか儚い…
✔CSS変数
#3から実際にコードで、
–my-color: orange; → my-colorというのは「オレンジ」ですよから
Color: var(–my-color); → 文字色はmy-colorつまりオレンジです、という流れ
Bodyのさらに親要素があるのか、:root疑似クラスというそうです
#5「何言ってんだよww」再びです
「こうしたテクニックも使えるようになっておくと良いでしょう」がよく出るけど、「暗記」ということではないと思いますよ。
#6,7こういうテーマカラーを変えるは本格的なサイトではよく見る、WorsPressのテーマとか「色違い」を作るのはこういう考え方かも
✔HTML,CSS実践アプリ紹介ページ
Progateでいうところの道場的なレッスンです。完成物があって「これを作りましょう」
display: block;に変えようとか、デベロッパーツールで検証してmarginがついているので消しましょう、text-align: center;でh1を真ん中に、
レスポンシブも作っていき、900px以上はdisplay: flex;で横並び
Width: calc(50% – 32px);など、calcで計算も使っています
まとめ
だいぶ駆け足でざっくりと振り返ってきました。
「自分用のメモ」の要素がだいぶ強いので、これだけを見て「ふむふむ…なるほど…」とはならないはずです。
Progateでは出なかったプロパティなどもたくさん出てきましたね。
ドットインストールはちょっと難しいです。ただ絶妙な加減でちょっとです、「うわ…むっず、やめよう」となる人もいるかもしれませんが、一か月続ければ少しずつ「ああ、そっか」が増えてきます。
もちろんProgateも素晴らしい学習サービスです。入門にどちらを選ぶか、Progateからドットインストールに移行するか
プログラミング学習も選択肢がたくさんあります。参考になれば幸いです
ではまた
コメント