Hello！ファズです。
htmlやcssの勉強をしている方挙手っ！（笑）
独学や会社の先輩に教わったり、中にはオンラインスクールを活用している人も少なくないのではないでしょうか？
本記事は、未経験者・初心者副業に考えている方向け。
独学でサイトや本を使った時間以外のコストかけない勉強方法を書いていきます。
参考になれば幸いです。
【初心者におすすめの記事】
◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい
勉強方法から選ぶ
書籍を使った学習
初心者の方だと、多くの書籍があってどれを選べばいいかわからないと思うはず。
なので、初心者向けに基本的なことを書いてるものを一冊選べばどれでもいいと思います。
書籍で勉強する場合、一冊で全てを網羅しているものはないので、最初に必要なのは基本的な知識を得て道標とすることです。
包装されてなければ、実際に手にとって目を通し、説明していることがわかりやすいものを選べば問題ありません。
WEBサービスを使ってみる
ここからの勉強方法はWEBを活用した方法です。
会員登録は必要で、初級程度の段階まで無料で使えるwebサービスです。
例えばprogateはその言語に合わせた段階のレッスン教材を用意しており、実際に打ち込んでどういったことが起こるのか画面上で確認することができイラスト多めでとっつきやす仕様です。
ただ、WEBサービスの場合、ある程度無料で使えますが、先に進むにつれ有料登録が必要になるので注意してください。
手解きを紹介してるサイトを参考にする
WEBが発展してもう長い年月が経過しており、多くの先駆者たちが知識を備忘録として残してきました。
初心者のために手解きしてくれるような記事も多くあるので、正直書籍はなくても調べればある程度すぐ探せます。
とはいえ、手順や流れを把握するために書籍を使うのは全然有りでいらないというわけではありません。
手解き紹介のサイトなどは情報が充実していることも珍しくありません。
なので、読んで勉強することが多くなりがちです。
ですが、それでは実際にスキルや思考は身につきづらいので、ある程度読んだら実践してみることが大事です。
全ての勉強方法に共通していますが、一番独学の人が陥りやすいポイントです。
動画で身につける
手を動かして学習する勉強方法はきっと一番捗ります。
こちらの有名どころ、ドットインストールの紹介。
ユーザー登録をすることで多くの動画が視聴でき、時間も一つ3分程度なのであまり疲れずに学習することができるよ。
また動画を見ながら一緒にサンプルも制作していくので、書き方がわかりやすく身につきやすいと思います。
初心者から熟練者まで人気のサービス。
特に初心者の時は、少し端折られただけでどうやればいいのか分からず、躓くことも多々あります。
書籍やコードを文字で説明しているサイトよりも詳細に学んでいけるのは大きなポイントではないでしょうか。
登録しなくても一部youtubeで確認できるのでよかったら見てみてください。
独自の勉強方法
ぼくが独学でやっていたhtml/cssを勉強した方法をお教えします。
よくタグやコードなど覚える必要はないと言われます。
これは都度適切なコードを検索して先人たちのサンプルを利用したほうが早いからですね！実際覚えようとしたら時間が足りない・・
が、しかし！
htmlに関してはぼく個人、最初の段階で5〜10個くらいのタグは覚えたほうがいいと思います。
理由は二点！『覚えるのに時間がかからない』、『htmlを組む時に手がとまる時間を少なくする』からです。
htmlは基本的に使うタグがそれほど多くありません。
なのに構造を考える時にいちいち手をとめて調べるよりも一度最初に覚えてしまったほうが効率がいいとぼくは思います。
よく使うタグ
<div>、<ul> 、<span>、<section>、<article>、<a>、<img>、<p>cssはセレクタ名、idやclass、構文を覚えたらそんなに難しいものではありません。
初歩のプロパティ指定などを学習後ですが、アニメーションや疑似要素で状態を変えるcssの勉強をしてみるのも一つとして提案します。
アニメーションが少し複雑なものもありますが、コピペして一部消して、検証などを繰り返すことで要素をどうやって表現しているのか理解を深めることができます。
また、アニメーションを学ぶことでモチベーションが上がるかもしれません。
実際ぼくも初心者のときはtableやdivで作った箱だけのレイアウトを見て飽きたりしてましたが、アニメーションの動きを勉強することで、こんな簡単にできるんだという意識づけができました。
何より動いたことが楽しくて続けるモチベーションになったのは大きかったです。
試してみたい方は『css アニメーション ボタン』などで検索してみてください。
勉強する流れ
独学でhtml/cssの勉強方法の基本的な流れをお教えします。
①html/cssを触る
htmlの勉強は比較的簡単ですが、全容を把握するまで時間がかかると思うので、まずheadのmetaなどは省いてbody内の記述にしぼります。
書籍でもサイトでもいいので、コンテンツの作りを一度読み込む。
読み込む際は複数の項目を同時にすると覚えにくいので、1項目ずつ読み込むようにするのをおすすめ。
その後、見ながらでもいいのでご自身で作成したhtmlファイルに貼り付けたり、実際に書いて確認するなどしてみてください。
入れ子の概念やブロックレベル・インラインレベルの概念など、参考にしたサイトや書籍にあるポイントを押さえながら勉強するとなおベストです。
②レイアウトを組んで触ってみる
①である程度勉強したら、使ったタグを使って自分でレイアウトを実際に組んでみてください。（①の勉強は完璧ではなく、ある程度でいいです。1〜2時間など時間を決めるといいですね。）
自身で作るレイアウトは簡単なものでOK。
レイアウトは一度覚えてしまえば使い回しできることが多いので、積極的に練習するといいでしょう。
ぼくは丸一日自分で考えたり、テキトーにサイト開いてそのレイアウトを再現してみたりしてました。
※この時点ではcssで細かい設定は不要です。
③反復する
あとはひたすら②を反復するだけで『基本のレイアウト・タグ・プロパティ』など、よく使うものが洗い出せると思います。
頻繁に使うものは是非覚えることをおすすめ！
コツは作れるようになったレイアウトは何度もやらず、新しいレイアウトに挑戦して経験の数を増やすこと。
ここまでで、未経験者の方でも1日〜2日で初心者初期レベルを超えたスキルは十分獲得できると思います。
おすすめの勉強方法はWordPress
ある程度知識や経験を身に着けて思うぼく個人のおすすめしたい勉強法。
それが「WordPress」でアフィリエイトをする！
です。
WordPressは基本管理画面から操作してコンテンツを作り上げていき、その過程でレイアウトなどを変更することができます。
ブロガーにはいらないと思う人もいることでしょう。
しかし、WordPressを使ってアフィリエイトサイトを運用することで現場で必要な
- 画像編集
- SEO対策
- ライティングスキル
- マーケティング
- HTML/CSSの編集
これらのスキルを同時に伸ばしていくことが可能。
それにWEB制作の現場では、今でもWordPressでサイト制作することが多く、HTML/CSSを学んだだけでは仕事に繋げるが厳しい。
はじめにWordPressの構造や仕組みを勉強し、どういう風にHTML/CSSを使ってカスタムしていくのか、その過程でphpを使ったループの学習もすることにも。
要は、まとめて必要な知識にフォーカスを当てた「実践的学習」をこなすことができるということ。
正直、1つにしぼっていない学習になるため、短期間で身に着けることは難しいです。
しかし、に一つ一つを学習し物にしていくよりも、必要な知識だけを学習できるので、総合的にみて使う時間は圧倒的に少なくなるはず。
よっておすすめする学習方法はWordPressを使ったアフィリエイトサイトの運用。
勉強の方法まとめ
以上、未経験者・初心者・副業に考えている方へ、時間以外のコストがかからない勉強方法をお伝えしました。
以下まとめ！
WEBサイトにはhtml/cssが必須。
ですが現状CMSであるwordpress（ワードプレス）が市場に多く、html/cssを学習しただけではお仕事を受注することは難しいかもしれません。
それでも、サイト制作には必ず必要になるので効率よく勉強できる環境作りをまずおすすめします。
ではhtml/cssだけでなくjavascriptや、需要が増加しているShopifyエンジニアになるためのスキルも身に付けられるので興味がある方は是非ご覧ください。
今回はこれでおしまい。
ありがとうございました！
コメント