こんにちは、ジもちーです！
父にほっぺをチュウされすぎて肌荒れ気味の息子です
この記事を見る方は恐らくですが、今HTML＆CSSを学んでいる方、もしくはこれから学ぼうと考えている方だと思います。
その中でも
- Progateで挫折しかかっている
- なかなか覚えられず先に進むことが出来ない
という方にお勧めの記事になっております。
私は現在HTML＆CSSの基礎を学び終え、模写コーディングを3つほど作り終えた段階です。
私はここまで学んできて
「いや俺めっちゃ非効率なことしてない？てゆうかこれ学ぶ意味あったの？最初からこうしておけばよかった！！」
というイライラを募らせました。
今回の記事は非効率なことがとにかく嫌いな私が感じたイライラを記事に書いて解消しつつ初学者の方に同じストレスを感じてもらわない為の一石二鳥の効率の良い内容です。
読者にとってはただの一石一鳥です
この記事で伝えたいことは下記の３点になります。
- HTML＆CSSを学ぶ上でここに時間を使うのは無駄
- Progateの進め方
- 何よりも時間を使うべきこと
以上の内容でもし気になるものがあれば最後まで読んでいただければ参考になるかと思います。
現在の私のスキル
先ずは軽く私が現在持っているスキルをお伝えします。
HTML＆CSSの基礎はProgateとこちらの本で学びました↓
基礎を終えた私は次にしょーごさん（@samuraibrass）の入門デザインカンプのコーディングを実施、
次に初級デザインカンプのコーディング↓
そして次にクリスタチャレンジの初級デザインカンプを実施↓
現在ここまで自力で作成を行うことが出来ている段階です。
ここまでたどり着くのにちょうど１か月かかりました。
因みに現在はこちらに挑戦中↓
HTML＆CSSを学ぶ上でここに時間を使うのは無駄
ここからが本題になります。
私が伝えたい「無駄」とは覚え方です。
先ほどの私の持っているスキル紹介でProgateと「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」の本を読んで基礎を身に付けたと書きましたが、正確に言うと何となくふんわりと出来ることを知っただけです。
「何となくふんわりと出来ることを知った」
大事なことなので２回言わせていただきました。
なにいってだこいつ
読者のみなさまの辛辣な声が聞こえてきますね。
ではみなさんは基礎を身に付けるってどういう状態だとおもいますか？
- HTMLで使う要素、タグ、属性を全部覚えること
- どこにどんなクラス名を付けるのか全部覚えること
- CSSで使うセレクタ、プロパティ、値を全部覚えること
- それぞれのスペル（綴り）を覚えること
これら全部を覚える必要はありません。
覚える必要があるのはHTMLのよく使うタグと親要素・子要素の概念（divは箱でその中にさらに箱があってみたいな感じ）
CSSに関してはなんか色変えたり、大きくしたり、横に並べたり、薄くできたり等々どういうことがCSSで可能なのかを知っていれば大丈夫です。
CSSのプロパティ（paddinngやmarginなど）は覚える必要はありません。ただ、「どれかのプロパティを使えばこうゆうことが出来たはず」というふうにふんわりと覚えていればさっそく模写コーディングに挑戦してください。
いや無理無理なんにも覚えてないのに模写コーディングなんかできるわけないじゃん
そうなるんですよね。私もそうなってました。
なので私は初めて模写コーディングに挑戦した時に全然分からなくてまた基礎勉強に戻ってしまいました。
でもこれが大きな間違い。まさに無駄な時間。
私が感じた「ぜんぜん分からない」は何が分からなかったかというと「CSSでなんのプロパティを使えばいいか分からない」だったんです。
皆さんもきっと「この文章や画像が思った位置にいかない。思った通りにうごかない。」と感じ、まだまだ基礎が足りてないから基礎を勉強し直そうと思っていませんか？
断言します。基礎を勉強し直さなくて大丈夫です。
その代わりに模写コーディングで分からないことがあったらググっちゃいましょう。
例えば「CSS 動かし方」とか検索してカンニングしちゃいましょう。
カンニングはいけないことですよ・・・。
皆さん真面目に学生の時に勉強されていた方は漏れなくカンニングはいけないことだと思っていることでしょう。
でもWeb制作にあたってカンニングはいけないことではなく、やってあたりまえのことなんです。
実際にWeb制作の案件を行うときにどうやって作ればいいか分からなくなった際にカンニングしちゃいけないと思いますか？
カンニングしてもいいんです！
だからその練習である模写コーディングを行うときにも、もちろんカンニングし放題なわけです！
カンニングしてもいいんだぁ。なら作れちゃうかも。
と思いませんか？そうなんです。作れちゃうんです。
た・だ・し！
いきなり難しいものは作れません。
それと調べる能力とそれを理解する能力がなければ作れません。
最初は簡単なものからチャレンジして、分からないことが出てきたら都度調べて理解しましょう。
こうやって前に進むことで段々と多くのCSSプロパティに触れ、使い方も覚えていきます。
だから冒頭に言った「何となくふんわりと出来ることを知った」状態で前に進んでいいのです。
Progateの進め方
Progateをやっているときにこんなこと思いませんでしたか？
- HTMLでクラス名を付ける時にどんな名前を付ければいいか分からない
- CSSのプロパティのスペルが覚えられない
- floatとflexboxって結局どっち使うの？
それぞれへの回答はこちら
１．HTMLでクラス名を付ける時にどんな名前を付ければいいか分からない
A.「HTML クラス」と検索すればどんな名前を付ければいいかの一覧が出てくるのでそれを参考にしましょう。
２．CSSのプロパティのスペルが覚えられない
A.コードを書くエディタというものをダウンロードして使ってみると入力を助ける機能が備わっています。
例えばpaddingならpaまで入力すると出てくるのでスペルは最初の２文字ぐらい分かれば大丈夫です。
３．floatとflexboxって結局どっち使うの？
A.好みにもよると思いますけど私は圧倒的にflexboxの方が使いやすかったです。
flexboxの使い方も全部覚えるのは難しいので並べ方が分からないときには検索して使いましょう。
上記以外にもProgateを進めていく際にそれぞれ疑問に思ったり分からないなあと思うことがあると思います。
その時に「分からないからもう一度Progateで復習しよう」
とはならないでください！
それよりも検索して調べる能力を磨いた方が絶対に良いです！
時間効率的にも今後も同じように分からないことが出てきた時の為にも検索して分からないことを調べることを強くお勧めします！
上のセクションでもお伝えしたようにCSSでどれかのプロパティを使えば動かしたり、並べたり、色を変えられるなあとうろ覚えの状態になればいいのでProgateは基本的に1週するだけでいいです。
多くても２週にとどめてください。
３週目以降は本当に無駄です。
後は模写コーディングをしながら分からなければ検索して少し歪でもいいので完成させてどんどんチャレンジしていきましょう。
何よりも時間を使うべきこと
ここまでの内容を読んでいればなんとなく私が考える「時間を使うべきこと」というのが分かると思います。
簡単に言うならば
「インプットはほどほどにアウトプットをじっくりと」です。
私が考える最も効率の良い基礎段階の学び方としては
- Progateを1週する。
- 「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」の本を読む
- 無料の初級デザインカンプの模写コーディングに挑戦
この流れになります。
注意点としては3つ
- Progateよりも先に「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」の本を読むと内容が理解できず学習が進みづらい
- 「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」の本は中身をすべて覚えようとせず、ざっくりと読み辞書的な使い方をする
- 模写コーディングはデザインカンプからやった方が分かりやすい
以上を踏まえて出来るだけインプットに使う時間は減らしアウトプットに早めに移り、じっくりと時間をかけて分からないことは調べながら自力で作る。
この流れで基礎学習を行うことを私の経験から踏まえて強くお勧めします。
最後におまけでもう一つお勧めの学習方法をお伝えします。
それは「YouTubeで人がやっている模写コーディングの流れを見る」という学習方法です。
こちらの学習方法の利点としてはただ見るだけで自分の知らないHTML＆CSSの技術を知ることが出来ることです。
この学習方法は人によって合う合わないがあると思いますが、ぜひお試しください！それでは。
コメント