CODE

【HTMLテンプレートから学ぶ】初心者に最適なコーディングの勉強方法【独学可能】

こんにちは！フリーランスWebディレクターのショーへーです。

この記事は、『HTML/CSSの基礎を終えたレベルで月数万の副業収入を得るための裏技』の続編記事です。

魔法じゃないので努力は必要ですが、HTML/CSS/Bootstrapの基礎を終えたレベルの初心者の方が副業収入を得るための方法をまとめています。

なお

  • 「もっと基礎からしっかり学びたい」
  • 「Web制作会社に転職したい」
  • 「フリーランスに挑戦したい」

など、より高い目標をお持ちの方は、オンラインスクールも運営してますので、よかったら見てみてください( ^ω^ )

運営しているオンラインWebスクール

30日で身につけるWEBスキル『デイトラ』

それでは本題をどうぞ！

HTMLテンプレートからスキルアップに繋げるポイント

初心者から独学である程度コーディングができるようになった人が、次のレベルに上がるために必要なことって何だと思いますか？

それが『自分なりの型を作ること』『表現の引き出しを増やすこと』です。

それを学ぶのに一番効率の良い方法は『上手い人が書いたコードを見て盗むこと』なんですが、そのためにはどうしても環境が大切になってきます。

もしあなたがWeb制作会社に勤めていて、デキる先輩コーダーがいるのなら、先輩のコードをみて学ぶこともできるでしょう。

でも、独学の場合は…？ 他人が書いたコードを見る機会すらほとんどありません。

独学でコーディングを学んだ人が、めちゃくちゃデキるようになる例が少ないのは、この「環境不足」のせいだと思います。

それを解消する有力な方法が『HTMLテンプレートから学ぶ』です。

例を見てみましょう。『未経験からコーディングの副業で月5万を稼ぐためのステップ』で紹介した、Kerriというテンプレを元に解説していきます。

 

効率的なクラス分けを学ぶ

例えばstyle.cssを見ると、「section」クラスが定義してあり、パディング幅や背景色などが定義されています。

その下の「text-custom」クラスでは、このクラスをつけると文字色が赤になるように定義してますね。

こんな風に、ページ内で何度も使う（であろう）共通パーツは抜き出して定義しておくと、そのクラスをつけるだけでセクション幅は一定になるし、強調したい文字に「text-custom」をつければ赤にできます。

初心者の頃は、その場その場でクラスを作って、読みづらい＆保守性の低いコーディングをしてしまいがちです。

でも、効率的なクラス分けの方法なんて教えてくれる人がいないといつまでも我流のままですよね。

そこで、こういう工夫をテンプレのコードの中から盗んでいくんです。

↑こっちでは「btn」クラスにボタンのベースを定義しておき、ボタンの色を強調したいとき、角を丸いボタンにしたいときのために「btn-custom」「btn-round」を別で定義してますね。

これで角が丸いボタンを作りたい時は、「class = “btn btn-custom”」とつければOK。

スマートですよね( ^ω^ )

 

テンプレから学んで表現の引き出しを増やす

こちらもKerriを元に紹介。まずは以下の動画を見てください↓

  • 写真をクリックするとポップアップする
  • カテゴリーバーをクリックすると、ページ遷移なしで写真が並べ変わる

この2つの動作が入ってます。ここまで独学でコーディングを学んできた方に質問なんですが、「コレと同じものを作ってください」とお願いしたら、すぐ実装できそうですか？

おそらく、答えはNOですよね。

そもそも”こんなことができる”ってことを知らなかった方も多いんじゃないでしょうか。

知らないものは調べられないし、実装のしようもありませんよね。

HTMLテンプレートには、世界中のデザイナー・コーダーが考えて作ったコードが詰まっています。

それらを元に『知らなかった表現を学んで、自分の引き出しを増やせる』という意味でも、HTMLテンプレートを利用するメリットは大きいんです。

 

ちなみに、この2つの動作は、それぞれjavascriptのライブラリでできています。

✔︎紹介したアニメーションに使われているjavascriptライブラリ

テンプレートで読み込んでいるjsファイルを調べれば、どんなライブラリが使われてるのかが分かりますね( ^ω^ )

個別のjsファイルには必ずライブラリの公式リンクがあるはずなので、それらをチェックしてけば使い方も分かります。

こうしてHTMLテンプレートを研究したことで、自分の引き出しに『写真をポップアップさせる実装』と『並び替えフィルターの実装』が加わりました。

初心者にとって、HTMLテンプレートは表現の引き出しを増やすのに最適な『先生』です。

 

知っておくべきHTMLテンプレートのメリット・デメリット

ただし、テンプレートの利用にはメリットもあればデメリットもあります。

気をつけてほしいポイントを纏めたのでご紹介。

まずはメリットからです。

HTMLテンプレートを使うメリット
  • 制作工数を時短できる
  • 手軽にオシャレなサイトが作れる（副業向き）
  • 上手い人のコーディングを学べる
  • コーディングの引き出しが増える
  • いろんなデザインパターンが見れる

こんな感じですね。大事なのはデメリットの方です。

HTMLテンプレートを使うデメリット
  • 依存してると”コーダー”としてのスキルは伸びない。（コーダーを目指すなら卒業が必要）
  • そのまま使うと海外サイト感のあるデザインになりがち
  • ちょっと頑張れば誰でもマネできてしまう

特に『今後コーダーとして転職したい』『フリーランスコーダーを目指そう』と計画されてる方は、コレばっかりやってるとコーディング力が伸びなくなるのでご注意を！

難易度的にも成長度合い的にも「テンプレをカスタマイズする <<<<<<<<<<<<<ゼロから自分で作る」ですので！

コーディングを本格的に仕事にしていきたいという方は、テンプレートのカスタマイズ制作に依存し過ぎないようにしましょう。

逆に「副業としてLP制作で月数万を稼げればOK」という方は、テンプレのカスタマイズ制作で十分だと思います👍

小さな副業が目的なのに、プロ並みのスキルが身につくまで勉強を続けても仕方ありません。それよりも今のスキルでできる効率的な制作方法を取り入れて、早く実践に移るべき！その中で身に付く力や気づくことも多いです。

そもそも、HTML/CSS/Bootstrapを理解してLPが作れるってだけでも世間一般的にはすごいですしね。自分でコーディングができるってめちゃくちゃ価値がありますよ！

どこまでスキルを伸ばすのか、どこで実践に移っていくのか、その目的をはっきりさせてから実行していきましょう！

 

まとめ：HTMLテンプレートは独学初心者にとっての先生

ここまでHTMLテンプレートの見るべきポイント、効果的な勉強法を解説してきました。

最後にポイントをまとめておきます。

✔︎要点まとめ
  • 効果的なクラス分けや効率のいいブロックの書き方をコードを見て学べる
  • 使ったことのないライブラリや実装方法を見て、表現の引き出しを増やせる
  • 他にも『制作工数を時短』『手軽にオシャレなサイトが作れる』などメリット多数
  • ただし依存しすぎるとコーディング力は伸びないので注意
  • LP制作を副業にしたい方は、テンプレートのカスタマイズができれば十分！

せっかく便利なツールですので、HTMLテンプレートを有効に使ってスキルアップ・副業につなげていきましょう( ^ω^ )

それでは、また！

30DAYSトライアル HTMLテンプレート コーディング 初心者 副業
RELATED POST